summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--css/codeq.css32
-rw-r--r--index.html214
-rw-r--r--js/codeq/core.js4
-rw-r--r--js/codeq/login.js1
-rw-r--r--js/codeq/navigation.js9
-rw-r--r--js/codeq/statusbar.js2
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 */
diff --git a/index.html b/index.html
index 2299c2d..105fae4 100644
--- a/index.html
+++ b/index.html
@@ -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 &amp; 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;