diff options
| -rw-r--r-- | css/codeq.css | 32 | ||||
| -rw-r--r-- | index.html | 214 | ||||
| -rw-r--r-- | js/codeq/core.js | 4 | ||||
| -rw-r--r-- | js/codeq/login.js | 1 | ||||
| -rw-r--r-- | js/codeq/navigation.js | 9 | ||||
| -rw-r--r-- | js/codeq/statusbar.js | 2 |
6 files changed, 219 insertions, 43 deletions
diff --git a/css/codeq.css b/css/codeq.css index 153e870..138761b 100644 --- a/css/codeq.css +++ b/css/codeq.css @@ -109,18 +109,6 @@ body { min-height: 100%; height: 100%; } - /* focus on 1st block */ - .quadrants.block1 > * > .block { min-width: 22%; width: 22%; } - .quadrants.block1 > * > .block.block1 { min-width: 34%; width: 34%; } - /* focus on 2nd block */ - .quadrants.block2 > * > .block { min-width: 22%; width: 22%; } - .quadrants.block2 > * > .block.block2 { min-width: 34%; width: 34%; } - /* focus on 3rd block */ - .quadrants.block3 > * > .block { min-width: 22%; width: 22%; } - .quadrants.block3 > * > .block.block3 { min-width: 34%; width: 34%; } - /* focus on 4th block */ - .quadrants.block4 > * > .block { min-width: 22%; width: 22%; } - .quadrants.block4 > * > .block.block4 { min-width: 34%; width: 34%; } } /* md */ @@ -135,26 +123,6 @@ body { min-height: 50%; height: 50%; } - /* focus on 1st block */ - .quadrants.block1 > * > .block1 { min-height: 60%; height: 60%; min-width: 60%; width: 60%; } - .quadrants.block1 > * > .block2 { min-height: 60%; height: 60%; min-width: 40%; width: 40%; } - .quadrants.block1 > * > .block3 { min-height: 40%; height: 40%; min-width: 60%; width: 60%; } - .quadrants.block1 > * > .block4 { min-height: 40%; height: 40%; min-width: 40%; width: 40%; } - /* focus on 2nd block */ - .quadrants.block2 > * > .block1 { min-height: 60%; height: 60%; min-width: 40%; width: 40%; } - .quadrants.block2 > * > .block2 { min-height: 60%; height: 60%; min-width: 60%; width: 60%; } - .quadrants.block2 > * > .block3 { min-height: 40%; height: 40%; min-width: 40%; width: 40%; } - .quadrants.block2 > * > .block4 { min-height: 40%; height: 40%; min-width: 60%; width: 60%; } - /* focus on 3rd block */ - .quadrants.block3 > * > .block1 { min-height: 40%; height: 40%; min-width: 60%; width: 60%; } - .quadrants.block3 > * > .block2 { min-height: 40%; height: 40%; min-width: 40%; width: 40%; } - .quadrants.block3 > * > .block3 { min-height: 60%; height: 60%; min-width: 60%; width: 60%; } - .quadrants.block3 > * > .block4 { min-height: 60%; height: 60%; min-width: 40%; width: 40%; } - /* focus on 4th block */ - .quadrants.block4 > * > .block1 { min-height: 40%; height: 40%; min-width: 40%; width: 40%; } - .quadrants.block4 > * > .block2 { min-height: 40%; height: 40%; min-width: 60%; width: 60%; } - .quadrants.block4 > * > .block3 { min-height: 60%; height: 60%; min-width: 40%; width: 40%; } - .quadrants.block4 > * > .block4 { min-height: 60%; height: 60%; min-width: 60%; width: 60%; } } /* sm */ @@ -54,12 +54,57 @@ <span class="glyphicon glyphicon glyphicon-user"></span> </a> <ul class="dropdown-menu"> - <li><a href="#">Profile</a></li> - <li><a href="#">Login or Signup</a></li> - <li><a href="#">Logout</a></li> + <li id="navigation-logout"><a href="#">Logout</a></li> + <li id="navigation-profile"><a href="#">Profile</a></li> + <li role="separator" class="divider"></li> + <li><a href="#" data-toggle="modal" data-target="#modalChangePassword">Change password</a></li> </ul> </li> - <li><a href="#"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a></li> + <li class="dropdown"> + <a href="" class="dropdown-toggle" data-toggle="dropdown" id="settingsTrigger" title="Settings, options..." aria-expanded="true"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a> + <div class="dropdown-menu" style="background-color: #fff"> + <form class="form col-sm-12"> + <div class="form-group"> + <span class="small">Language</span> + <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-content="<span class='small'>Select the UI language.</span>" data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br> + <select class="form-control"> + <option value="sl">Slovensko</option> + <option value="en">English</option> + <option value="d">Dolgooooooooooooooooooooooooooooooooooooooooooooooo</option> + </select> + </div> + <div class="form-group"> + <span class="small"> + Language + </span> + <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-content="<span class='small'>Select the UI language.</span>" data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br> + <div> + <div class="radio"> + <label> + <input name="lang" value="en" type="radio">English + </label> + </div> + <div class="radio"> + <label> + <input name="lang" value="sl" type="radio">Slovensko + </label> + </div> + <div class="radio"> + <label> + <input name="lang" value="d" type="radio">Dolgooooooooooooooooooooooooooooooooooooooooooooooo + </label> + </div> + </div> + </div> + <div class="form-group"> + <div class="text-right"> + <button type="button" class="btn btn-default" data-target="settingsDropdown" data-toggle="dropdown">Close</button> + <button type="button" class="btn btn-primary" data-target="settingsDropdown" data-toggle="dropdown">Save</button> + </div> + </div> + </form> + </div> + </li> </ul> </div><!--/.nav-collapse --> @@ -70,14 +115,20 @@ <div class="container" id="screen_login"> <form class="form-signin"> <h2 class="form-signin-heading">Please login</h2> - <label for="username" class="sr-only">Username</label> - <input type="text" id="username" class="form-control" placeholder="Username" required="" autofocus=""> - <label for="password" class="sr-only">Password</label> - <input type="password" id="password" class="form-control" placeholder="Password" required=""> - <button class="btn btn-lg btn-default btn-block" type="button" id="submit">Login</button> + <div class="form-group"> + <label for="username" class="sr-only">Username</label> + <input type="text" id="username" class="form-control" placeholder="Username" required="" autofocus=""> + <label for="password" class="sr-only">Password</label> + <input type="password" id="password" class="form-control" placeholder="Password" required=""> + <button class="btn btn-lg btn-default btn-block" type="button" id="submit">Login</button> + </div> + <div class="form-group"> + <a href="" data-dismiss="modal" data-toggle="modal" role="button" data-target="#modalSignIn">New User? Sign-in..</a> + </div> </form> </div> + <!-- main screen: programming language selection, settings, etc. --> <div class="container" id="screen_language" style="text-align: center; display: none;"> <div class="row"> @@ -164,6 +215,150 @@ </div><!--/row--> </div><!--container--> + <!-- problem screen: profile --> + <div class="container-fluid" id="screen_profile" style="display: none;"> + <h2> + Profile + <div class="btn-group btn-group-xs hidden-md pull-right"> + <a href="" data-toggle="modal" data-target="#modalChangePassword" class="btn btn-default">Change Password</a> + <a href="#" class="btn btn-default">Go back</a> + </div> + </h2> + <hr> + <div class="row"> + <div class="col-lg-3 col-md-4"> + <div class="panel panel-default"> + <div class="panel-heading"> + Overview + </div> + <ul class="list-group small"> + <li class="list-group-item text-right"><span class="pull-left"><strong>Username</strong></span>markopusnik</li> + <li class="list-group-item text-right"><span class="pull-left"><strong>Real name</strong></span>Marko Pušnik</li> + <li class="list-group-item text-right"><span class="pull-left"><strong>Joined</strong></span>Sep 29, 2015</li> + <li class="list-group-item text-right"><span class="pull-left"><strong>Last seen</strong></span>1 hour ago</li> + </ul> + </div> + + <div class="panel panel-default"> + <div class="panel-heading"> + Statistics + </div> + <ul class="list-group small"> + <li class="list-group-item"><strong>Points</strong> <span class="label label-default pull-right">87</span></li> + <li class="list-group-item"><strong>Prolog</strong> <span class="label label-default pull-right">10</span></li> + <li class="list-group-item"><strong>Python</strong> <span class="label label-default pull-right">10</span></li> + <li class="list-group-item"><strong>Robot</strong> <span class="label label-default pull-right">10</span></li> + </ul> + </div> + </div><!--/col-3--> + + <div class="col-lg-9 col-md-8"> + <ul class="nav nav-tabs" id="profileTab"> + <li class="active"><a href="#" class="text-primary" data-target="#profileSettings" data-toggle="tab">Edit Profile</a></li> + <li><a href="#" class="text-primary" data-target="#profile2" data-toggle="tab">Neki</a></li> + </ul> + <div class="tab-content"> + <div class="tab-pane active" id="profileSettings"> + <br> + <form class="form"> + <div class="col-lg-6"> + <div class="form-group"> + <label><h4>Username</h4></label> + <input type="text" class="form-control input-lg disabled" disabled="disabled" name="username" value="markopusnik"> + </div> + </div> + <div class="col-lg-6"> + <div class="form-group"> + <label><h4>Real name</h4></label> + <input type="text" class="form-control input-lg" name="realName" placeholder="First & last name" maxlength="50"> + </div> + </div><!--/col--> + <div class="col-lg-12"> + <div class="form-group"> + <label><h4>Email</h4></label> + <input type="email" class="form-control input-lg disabled" disabled="disabled" name="email" placeholder="Email address (private)" required="required"> + </div> + </div><!--/col--> + <div class="col-lg-12"> + <div class="form-group"> + <button class="btn btn-lg btn-primary pull-right" type="submit">Save</button> + </div> + </div><!--/col--> + </form> + </div><!--/tab-pane--> + + <div class="tab-pane" id="profile2"> + <h2 class="text-center">Todo...</h2> + </div><!--/tab-pane--> + + </div><!--/tab-content--> + </div><!--/col-9--> + </div><!--row--> + </div><!--container--> + + <!-- Modals --> + <div id="modalSignIn" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h2 class="text-center">Sign-in</h2> + </div> + <div class="modal-body"> + <form class="form" method="post"> + <div class="form-group"> + <label class="control-label">Email</label> + <input class="form-control" name="email" id="inputEmail" type="email" data-ng-model="newuser.email" placeholder="email@you.com (kept private)" required=""> + </div> + <div class="form-group" bs-has-error=""> + <label class="control-label">Username</label> + <input class="form-control" name="username" id="inputUsername" type="text" data-ng-model="newuser.username" placeholder="desired username" pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" title="Choose a alpha-numeric username of 5-15 characters" required=""> + </div> + <div class="form-group"> + <label class="control-label">Password</label> + <input class="form-control" name="password" id="inputpassword" type="password" data-ng-model="newuser.password" placeholder="password" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required=""> + </div> + <div class="form-group"> + <label class="control-label">Verify (repeat password)</label> + <input class="form-control" name="verify" id="inputVerify" type="password" data-ng-model="newuser.verify" placeholder="password (again)" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required=""> + </div> + </form><!--/row--> + </div><!--/modal-body--> + <div class="modal-footer"> + <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button> + <button class="btn btn-lg btn-primary" id="btnRegister" type="submit">Sign</button> + </div><!--/modal-footer--> + </div> + </div> + </div> + + <div id="modalChangePassword" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h2 class="text-center">Password Change</h2> + </div> + <div class="modal-body"> + <form class="form" method="post"> + <div class="form-group"> + <label>New Password</label> + <input class="form-control input-lg" placeholder="Enter a new password" name="new" type="password"> + </div> + <div class="form-group"> + <label>Verify Password</label> + <input class="form-control input-lg" placeholder="Repeat the password again" name="verify" type="password"> + </div> + </form><!--/row--> + </div><!--/modal-body--> + <div class="modal-footer"> + <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button> + <button class="btn btn-lg btn-primary" id="btnPasswdChange" type="submit">Change</button> + </div><!--/modal-footer--> + </div> + </div> + </div> + <!-- Covers the whole screen with a semi-transparent block, so no input events can be triggered below. Used as a wait screen; must be the last element in the DOM. It is active after load, javascript turns it off after initialization. --> @@ -197,6 +392,7 @@ <script src="js/codeq/prolog.js"></script> <script src="js/codeq/python.js"></script> <script src="js/codeq/login.js"></script> + <script src="js/codeq/profile.js"></script> <script src="js/codeq/language.js"></script> <script src="js/codeq/problem.js"></script> </body> diff --git a/js/codeq/core.js b/js/codeq/core.js index 1685dd7..3dfa7c2 100644 --- a/js/codeq/core.js +++ b/js/codeq/core.js @@ -389,5 +389,7 @@ codeq.setLang(lang || 'en'); // initial language setting // go to login codeq.globalStateMachine.transition('login'); - }); + + //For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself. + $('[data-toggle="popover"]').popover()}); })(); diff --git a/js/codeq/login.js b/js/codeq/login.js index c400f06..f590acb 100644 --- a/js/codeq/login.js +++ b/js/codeq/login.js @@ -29,6 +29,7 @@ codeq.globalStateMachine.register('login',{
'enter': function(){
$("#submit").on('click', loginFun);
+ //$('#modalLogin').modal();
$("#screen_login").css('display', '');
$('#disabled').css('display', 'none');
diff --git a/js/codeq/navigation.js b/js/codeq/navigation.js index 1a7799f..80fd321 100644 --- a/js/codeq/navigation.js +++ b/js/codeq/navigation.js @@ -97,4 +97,13 @@ codeq.globalStateMachine.transition('prolog'); e.preventDefault(); }); + $('#navigation-logout').on('click', function(e){ + codeq.globalStateMachine.transition('login'); + e.preventDefault();//prevent this since we'll trigger a page reload otherwise + }); + $('#navigation-profile').on('click', function(e){ + codeq.globalStateMachine.transition('profile'); + e.preventDefault();//prevent this since we'll trigger a page reload otherwise + }); + })();
\ No newline at end of file diff --git a/js/codeq/statusbar.js b/js/codeq/statusbar.js index 2134b93..56070bd 100644 --- a/js/codeq/statusbar.js +++ b/js/codeq/statusbar.js @@ -6,7 +6,7 @@ (function () { var langs = codeq.supportedLangs, - jqMenu = jqBar.find('.dropdown-menu'), + jqMenu = jqLang.find('.dropdown-menu'), lang, cssClass; for (lang in langs) { if (!langs.hasOwnProperty(lang)) continue; |