diff options
| -rw-r--r-- | css/codeq.css | 26 | ||||
| -rw-r--r-- | index.html | 225 | ||||
| -rw-r--r-- | js/codeq/translation.js | 3 | ||||
| -rw-r--r-- | res/en.json | 3 | ||||
| -rw-r--r-- | 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 { @@ -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", |