From 70787b8efa9a777e37989d1c0dfad3ade21e128e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marko=20Pu=C5=A1nik?= <marko.pusnik@guru.si>
Date: Thu, 15 Oct 2015 18:46:02 +0200
Subject: =?UTF-8?q?lep=C5=A1anje=20ali=20gr=C5=A1anje=20:)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/codeq.css           |  26 +-----
 index.html              | 225 +++++++++++++++++++++++-------------------------
 js/codeq/translation.js |   3 +
 res/en.json             |   3 +
 res/sl.json             |   3 +
 5 files changed, 118 insertions(+), 142 deletions(-)

diff --git a/css/codeq.css b/css/codeq.css
index d457089..85a3d8d 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -32,30 +32,10 @@ body {
     margin: 0 auto;
 }
 
-/* modalLogIn */
-#modalLogIn{
-    min-width: 250px;
-    padding: 14px 14px 0;
-    overflow:hidden;
-    background-color:rgba(255,255,255,.8);
+/* modal screens*/
+#screen_login, #screen_signup, #screen_change_pass {
+    padding: 15px 0;
 }
-#modalLogIn .help-block{
-    font-size:12px
-}
-#modalLogIn .bottom{
-    background-color:rgba(255,255,255,.8);
-    border-top:1px solid #ddd;
-    clear:both;
-    padding:14px;
-}
-#modalLogIn .ssa-buttons{
-    margin-bottom: 1em;
-}
-
-#modalLogIn .form-group {
-    margin-bottom: 10px;
-}
-
 
 /* screen language */
 #screen_language {
diff --git a/index.html b/index.html
index 5ec560c..8bedb83 100644
--- a/index.html
+++ b/index.html
@@ -61,7 +61,7 @@
                                 <form class="form col-sm-12">
                                     <div class="form-group">
                                         <span class="small" data-tkey="language">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>
+                                        <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="ui_language_title" data-content="Select the UI language." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
                                         <select class="form-control" id="gui_lang_select">
                                             <option value="sl">Slovensko</option>
                                             <option value="en">English</option>
@@ -69,8 +69,8 @@
                                     </div>
                                     <div class="form-group">
                                         <span class="small" data-tkey="robot_address">Robot’s address</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'>Set the robot's IP address.</span>" data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
-                                        <input type="text" class="form-control" id="robot_address_input" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$)|(((^|:)([0-9a-fA-F]{0,4})){1,8}$)" data-tkey-title="ip_title" title="Choose a valid IPv4 address">
+                                        <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="robot_address_title" data-content="Set the robot's IPv4 or IPv6 address." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
+                                        <input type="text" class="form-control" id="robot_address_input" data-tkey-placeholder="robot_address_placeholder" placeholder="IP address" pattern="(((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$)|(((^|:)([0-9a-fA-F]{0,4})){1,8}$)" data-tkey-title="robot_address_title" title="Set the robot's IPv4 or IPv6 address.">
                                     </div>
                                     <div class="form-group">
                                         <div class="text-right">
@@ -90,135 +90,135 @@
 <!--TODO -->
         <!-- login screen -->
         <div class="container" id="screen_login" style="display: none;">
-            <div class="modal-dialog modal-sm">
-                <!--div class="modal-content"-->
-                    <div class="row"><!--class="modal-header"-->
-                        <h3 class="text-center" data-tkey="signin_header">Please sign in</h3>
-                    </div>
-                    <div class="row"><!--class="modal-body"-->
-                        <div class="row">
-                            <div class="col-md-12">
-                                <span data-tkey="signin_via">Login via</span>
-                                <div class="ssa-buttons">
-                                    <a href="" class="ssa-buttons" role="button" data-dismiss="modal" data-toggle="modal" data-target="#modalAAI" id="aai_login_button">
-                                        <img src="res/gumb_aaiprijava.png" style="width: 49%">
-                                    </a>
-                                </div>
-                                <span data-tkey="signin_or">or</span>
-                                <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
-                                    <div class="form-group">
-                                        <label class="sr-only" for="username" data-tkey="username">Username</label>
-                                        <input type="text" class="form-control" id="username" data-tkey-placeholder="username" placeholder="Username" required>
-                                    </div>
-                                    <div class="form-group">
-                                        <label class="sr-only" for="password" data-tkey="password">Password</label>
-                                        <input type="password" class="form-control" id="password" data-tkey-placeholder="password" placeholder="Password" required>
-                                    </div>
-                                    <div class="form-group">
-                                        <button class="btn btn-primary btn-block" type="button" id="submit" data-tkey="signin_button">Sign in</button>
-                                    </div>
-                                    <!--div class="checkbox">
-                                        <label>
-                                            <input type="checkbox"> keep me logged-in
-                                        </label>
-                                    </div-->
-                                </form>
-                            </div>
+            <div class="row">
+                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
+                    <div class="panel panel-default">
+                        <div class="panel-heading"><!--class="modal-header"-->
+                            <h3 class="text-center" data-tkey="signin_header">Please sign in</h3>
                         </div>
-                    </div>
-                    <div class="row"><!-- class="modal-footer"-->
-                        <div class="text-center">
-                            <span data-tkey="signin_footer">New here ? </span><a href="" role="button" data-dismiss="modal" data-toggle="modal" id="signup_button"> <!--data-target="#modalSignUp"--><b data-tkey="signin_footer_signup">Sign Up</b></a>
+                        <div class="panel-body"><!--class="modal-body"-->
+                            <span data-tkey="signin_via">Login via</span>
+                            <div class="ssa-buttons">
+                                <a href="" class="ssa-buttons" role="button" data-dismiss="modal" data-toggle="modal" data-target="#modalAAI" id="aai_login_button">
+                                    <img src="res/gumb_aaiprijava.png" style="width: 49%">
+                                </a>
+                            </div>
+                            <span data-tkey="signin_or">or</span>
+                            <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
+                                <div class="form-group">
+                                    <label class="sr-only" for="username" data-tkey="username">Username</label>
+                                    <input type="text" class="form-control" id="username" data-tkey-placeholder="username" placeholder="Username" required>
+                                </div>
+                                <div class="form-group">
+                                    <label class="sr-only" for="password" data-tkey="password">Password</label>
+                                    <input type="password" class="form-control" id="password" data-tkey-placeholder="password" placeholder="Password" required>
+                                </div>
+                                <div class="form-group">
+                                    <button class="btn btn-primary btn-block" type="button" id="submit" data-tkey="signin_button">Sign in</button>
+                                </div>
+                                <!--div class="checkbox">
+                                    <label>
+                                        <input type="checkbox"> keep me logged-in
+                                    </label>
+                                </div-->
+                            </form>
                         </div>
-                        <br>
-                        <div class="text-center small">
-                            <a role="button" onclick="codeq.setLang('sl')">Slovenščina</a> | <a role="button" onclick="codeq.setLang('en')">English</a>
+                        <div class="panel-footer"><!-- class="modal-footer"-->
+                            <div class="text-center">
+                                <span data-tkey="signin_footer">New here ? </span><a href="" role="button" data-dismiss="modal" data-toggle="modal" id="signup_button"> <!--data-target="#modalSignUp"--><b data-tkey="signin_footer_signup">Sign Up</b></a>
+                            </div>
+                            <br>
+                            <div class="text-center small">
+                                <a role="button" onclick="codeq.setLang('sl')">Slovenščina</a> | <a role="button" onclick="codeq.setLang('en')">English</a>
+                            </div>
                         </div>
                     </div>
-                <!--/div-->
+                </div>
             </div>
         </div>
 
         <!-- AAI login -->
-        <div class="container" id="screen_aai_login" style="display: none;">
-            <div class="container">
-                <div class="row">
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn" id="cancel_aai_login">×</button>
-                    <h3 class="text-center">Arnes AAI</h3>
-                </div>
-            </div>
-            <div class="container">
-                <div class="row" style="padding: 0; padding-top: 5px;">
-                    <iframe width="100%" height="850px"  frameborder="0" scrolling="no" allowtransparency="true" src="" id="aai_iframe"></iframe>
+        <div class="container-fluid" id="screen_aai_login" style="display: none;">
+            <div class="row">
+                <div class="col-md-12" style="padding: 0;">
+                    <button type="button" class="pull-right" id="cancel_aai_login" style="position: absolute; top:10px; right:10px;" data-tkey="go_back">Go back</button>
+                    <iframe width="100%" height="100%"  frameborder="0" scrolling="yes" allowtransparency="true"  src="https://aai.arnes.si/Shibboleth.sso/Login?entityID=https://idp.aai.arnes.si/idp/20090116&target=https://aai.arnes.si/SSO/authenticate" id="aai_iframe"></iframe>
                 </div>
             </div>
         </div>
 
         <!--Sign up screen-->
         <div class="container" id="screen_signup" style="display: none;">
-            <div class="modal-dialog modal-sm">
-                <div class="row">
-                    <h3 class="text-center" data-tkey="signup_header">Sign up</h3>
-                </div>
-                <div class="row">
-                    <form id="formSignUp" class="form">
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="username">Username</label>
-                            <input class="form-control" name="username" id="modalSignUpUsername" type="text" data-tkey-placeholder="username_placeholder" placeholder="Desired username" pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" data-tkey-title="username_title" title="Choose a alpha-numeric username of 5-15 characters." required="">
-                        </div>
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="name">Display name</label>
-                            <input class="form-control" name="name" id="modalSignUpName" type="text" data-tkey-placeholder="name_placeholder" placeholder="Desired display name" data-tkey-title="name_title" title="Choose a display name.">
-                        </div>
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="email">E-mail</label>
-                            <input class="form-control" name="email" id="modalSignUpEmail" type="email" data-tkey-placeholder="email" placeholder="E-mail" data-tkey-title="email_title" title="Enter a valid email address." required="">
+            <div class="row">
+                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
+                    <div class="panel panel-default">
+                        <div class="panel-heading">
+                            <h3 class="text-center" data-tkey="signup_header">Sign up</h3>
                         </div>
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="password">Password</label>
-                            <input class="form-control" name="password" id="modalSignUpPassword" type="password" data-tkey-placeholder="password" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                        <div class="panel-body">
+                            <form id="formSignUp" class="form">
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="username">Username</label>
+                                    <input class="form-control" name="username" id="modalSignUpUsername" type="text" data-tkey-placeholder="username_placeholder" placeholder="Desired username" pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" data-tkey-title="username_title" title="Choose a alpha-numeric username of 5-15 characters." required="">
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="name">Display name</label>
+                                    <input class="form-control" name="name" id="modalSignUpName" type="text" data-tkey-placeholder="name_placeholder" placeholder="Desired display name" data-tkey-title="name_title" title="Choose a display name.">
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="email">E-mail</label>
+                                    <input class="form-control" name="email" id="modalSignUpEmail" type="email" data-tkey-placeholder="email" placeholder="E-mail" data-tkey-title="email_title" title="Enter a valid email address." required="">
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="password">Password</label>
+                                    <input class="form-control" name="password" id="modalSignUpPassword" type="password" data-tkey-placeholder="password" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="password_verify">Verify (repeat password)</label>
+                                    <input class="form-control" name="verify" id="modalSignUpVerify" type="password" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                                </div>
+                            </form>
                         </div>
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="password_verify">Verify (repeat password)</label>
-                            <input class="form-control" name="verify" id="modalSignUpVerify" type="password" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                        <div class="panel-footer">
+                            <div class="text-center">
+                                <button class="btn btn-default" data-tkey="cancel" id="exit_signup_btn">Cancel</button>
+                                <input form="formSignUp" class="btn btn-primary" id="btnSignUp" type="submit" data-tkey-value="signup_button" value="Sign up">
+                            </div>
+                            <br>
+                            <div class="text-center small">
+                                <a role="button" onclick="codeq.setLang('sl')">Slovenščina</a> | <a role="button" onclick="codeq.setLang('en')">English</a>
+                            </div>
                         </div>
-                    </form>
-                </div>
-                <div class="row">
-                    <div>
-                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn" data-tkey="cancel" id="exit_signup_btn">Cancel</button>
-                        <input form="formSignUp" class="btn btn-primary" id="btnSignUp" type="submit" data-tkey-value="signup_button" value="Sign up">
-                    </div>
-                    <br>
-                    <div class="text-center small">
-                        <a role="button" onclick="codeq.setLang('sl')">Slovenščina</a> | <a role="button" onclick="codeq.setLang('en')">English</a>
                     </div>
-
                 </div>
             </div>
         </div>
 
         <!-- change password screen -->
         <div class="container" id="screen_change_pass" style="display: none;">
-            <div class="modal-dialog modal-sm">
-                <div class="row">
-                    <h3 class="text-center" data-tkey="change_password_header">Change password </h3>
-                </div>
-                <div class="row">
-                    <form id="formChangePassword" class="form">
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="password_new">New Password</label>
-                            <input class="form-control" name="new" id="modalChangePasswordNew" type="password" data-tkey-placeholder="password_new_placeholder" placeholder="Enter a new password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+            <div class="row">
+                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
+                    <div class="panel panel-default">
+                        <div class="panel-heading">
+                            <h3 class="text-center" data-tkey="change_password_header">Change password </h3>
                         </div>
-                        <div class="form-group">
-                            <label class="control-label small" data-tkey="password_verify">Verify Password</label>
-                            <input class="form-control" name="verify" id="modalChangePasswordVerify" type="password" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                        <div class="panel-body">
+                            <form id="formChangePassword" class="form">
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="password_new">New Password</label>
+                                    <input class="form-control" name="new" id="modalChangePasswordNew" type="password" data-tkey-placeholder="password_new_placeholder" placeholder="Enter a new password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label small" data-tkey="password_verify">Verify Password</label>
+                                    <input class="form-control" name="verify" id="modalChangePasswordVerify" type="password" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                                </div>
+                            </form>
                         </div>
-                    </form>
-                </div>
-                <div class="row">
-                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-tkey="cancel" id="cancel_change_pass_button">Cancel</button>
-                    <input form="formChangePassword" class="btn btn-primary" id="btnPasswdChange" type="submit" data-tkey-value="change_password_button" value="Change password"></button>
+                        <div class="panel-footer text-center">
+                            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-tkey="cancel" id="cancel_change_pass_button">Cancel</button>
+                            <input form="formChangePassword" class="btn btn-primary" id="btnPasswdChange" type="submit" data-tkey-value="change_password_button" value="Change password"></button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -396,19 +396,6 @@
         </div><!--container-->
 
         <!-- Modals -->
-        <!--div id="modalAAI" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" data-keyboard="false" data-backdrop="static" 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" data-toggle="modal" data-target="#modalLogIn">×</button>
-                        <h3 class="text-center">Arnes AAI</h3>
-                    </div>
-                    <div class="modal-body" style="padding: 0;">
-                        <iframe width="100%" height="500px" frameborder="0" scrolling="no" allowtransparency="true" src="https://codeq.si/Shibboleth.sso/Login?forceAuthn=1"></iframe>
-                    </div>
-                </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.
diff --git a/js/codeq/translation.js b/js/codeq/translation.js
index f0c8aab..1e85273 100644
--- a/js/codeq/translation.js
+++ b/js/codeq/translation.js
@@ -57,6 +57,9 @@
             $('[data-tkey-value]').each(function () {
                 translateElement($(this), 'tkey-value', lang);
             });
+            $('[data-tkey-data-content]').each(function () {
+                translateElement($(this), 'tkey-data-content', lang);
+            });
         };
 
     // Translate the whole document when the user switches the display language
diff --git a/res/en.json b/res/en.json
index c721548..bde0a98 100644
--- a/res/en.json
+++ b/res/en.json
@@ -1,6 +1,9 @@
 {
   "language": "Language",
+  "ui_language_title": "Select the UI language.",
   "robot_address": "Robot’s IP address",
+  "robot_address_placeholder": "IP address",
+  "robot_address_title": "Set the robot's IPv4 or IPv6 address.",
   "problem_list": "Problems",
   "python": "Python",
   "prolog": "Prolog",
diff --git a/res/sl.json b/res/sl.json
index 7745fd7..17ae22b 100644
--- a/res/sl.json
+++ b/res/sl.json
@@ -1,6 +1,9 @@
 {
   "language": "Jezik",
+  "ui_language_title": "Izberite jezik uporabniškega vmesnika.",
   "robot_address": "Robotov naslov IP",
+  "robot_address_placeholder": "IP naslov",
+  "robot_address_title": "Vnesite IPv4 or IPv6 naslov robota.",
   "problem_list": "Naloge",
   "python": "Python",
   "prolog": "Prolog",
-- 
cgit v1.2.1