about screen mockup; TODO: text&design -> Loni&Saša

10 files changed, 87 insertions, 2 deletions

diff --git a/css/codeq.css b/css/codeq.css
index 9d056c7..e82cf85 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -46,6 +46,39 @@ body {
     cursor: pointer;
 }
 
+/* screen about*/
+
+.about-logos {
+    text-align: center;
+    height: 6em;
+    margin: 1em 0 1em 0;
+}
+
+.about-logos div {
+    height: 100%; /* set on element if more logos in line */
+    display: inline-block;
+    position: relative;
+}
+
+.about-logos div img {
+    max-height: 100%;
+    max-width: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    -webkit-transform:translate(-50%,-50%);
+    position: absolute;
+}
+
+div.vertical-line{
+    height: 100%;
+    width: 0px;
+    border: 0;
+    border-left: 1px solid #eee;
+    margin: 0 1% 0 1%;
+}
+
+
 /* screen problems*/
 .block {
     /*border-right: 1px solid #e5e5e5;
diff --git a/index.html b/index.html
index ec70211..d126273 100644
--- a/index.html
+++ b/index.html
@@ -87,6 +87,8 @@
                                 <li id="navigation-profile"><a href="#" data-tkey="profile">Profile</a></li>
                                 <li class="saml-login-hide divider" role="separator"></li>
                                 <li class="saml-login-hide"><a href="#" data-toggle="modal" data-target="#modalChangePassword" data-tkey="change_pass" id="change-password">Change password</a></li>
+                                <li class="divider" role="separator"></li>
+                                <li id="navigation-about"><a href="#" data-tkey="about">About</a></li>
                             </ul>
                         </li>
                         <li id="settings_dropdown_menu"> <!-- class="dropdown"-->
@@ -272,6 +274,25 @@
             </div>
         </div>
 
+
+        <!-- about screen -->
+        <div class="container" id="screen_about" style="display: none;">
+            <div class="row">
+                <div class="col-md-12">
+                    <h2>
+                        <span data-tkey="about">About</span>
+                        <div class="btn-group pull-right">
+                            <button type="button" class="btn btn-default" id="btnAboutGoBack" data-tkey="go_back">Go back</button>
+                        </div>
+                    </h2>
+                    <hr>
+                    <div data-tkey="about_html">
+                        <!-- loads html from about_html translations -->
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <!-- main screen: programming language selection, settings, etc. -->
         <div class="container" id="screen_language" style="text-align: center; display: none;">
             <div class="row">
@@ -532,6 +553,7 @@
         <script src="js/codeq/upgrade_to_aai.js"></script>
         <script src="js/codeq/change_password.js"></script>
         <script src="js/codeq/profile.js"></script>
+        <script src="js/codeq/about.js"></script>
         <script src="js/codeq/language.js"></script>
         <script src="js/codeq/problem_list.js"></script>
         <script src="js/codeq/settings.js"></script>
diff --git a/js/codeq/about.js b/js/codeq/about.js
new file mode 100644
index 0000000..a0ca261
--- /dev/null
+++ b/js/codeq/about.js
@@ -0,0 +1,22 @@
+/**
+ * Created by markop on 11/09/15.
+ */
+(function(){
+
+    var jqScreen = $("#screen_about"),
+        jqBtnGoBack = $("#btnAboutGoBack");
+
+    codeq.globalStateMachine.register('about',{
+        'enter': function(){
+            jqBtnGoBack.on('click',function(){
+                history.back();//forces a transition to the previous state
+            });
+            jqScreen.css('display', '');
+        },
+        'exit' : function(){
+            jqScreen.css('display', 'none');
+            jqBtnGoBack.off('click');
+        }
+    });
+
+})();
diff --git a/js/codeq/navigation.js b/js/codeq/navigation.js
index 4baf5b9..be56740 100644
--- a/js/codeq/navigation.js
+++ b/js/codeq/navigation.js
@@ -149,6 +149,10 @@
         codeq.globalStateMachine.transition('profile');
         e.preventDefault();//prevent this since we'll trigger a page reload otherwise
     });
+    $('#navigation-about').on('click', function(e){
+        codeq.globalStateMachine.transition('about');
+        e.preventDefault();//prevent this since we'll trigger a page reload otherwise
+    });
     $('#change-password').on('click', function(e){
         codeq.globalStateMachine.transition('changePassword');
         e.preventDefault();//prevent this since we'll trigger a page reload otherwise
diff --git a/res/MIZS_slo.png b/res/MIZS_slo.png
new file mode 100644
index 0000000..beb955a
--- /dev/null
+++ b/res/MIZS_slo.png
diff --git a/res/ai_lab_logo.png b/res/ai_lab_logo.png
new file mode 100644
index 0000000..31c5f0c
--- /dev/null
+++ b/res/ai_lab_logo.png
diff --git a/res/en.json b/res/en.json
index 2f65bab..6d96f22 100644
--- a/res/en.json
+++ b/res/en.json
@@ -65,5 +65,7 @@
   "upgrade_to_aai_body_text_1": "<p>User with this email address already exists.</p><p>Enter its password and select <span class=\"badge\">Yes</span> to upgrade it to AAI.</p>",
   "upgrade_to_aai_body_text_2": "<p>Select <span class=\"badge\">No</span> to do a separate account.</p>",
   "upgrade_to_aai_no_button": "No, make new",
-  "upgrade_to_aai_yes_button": "Yes, upgrade to AAI"
+  "upgrade_to_aai_yes_button": "Yes, upgrade to AAI",
+  "about": "About",
+  "about_html" : "<p>CodeQ™ is the ...<div class=\"about-logos\"><div style=\"width: 29%;\"><img src=\"res/fri_logo.png\"></div><div class=\"vertical-line\"></div><div style=\"width: 29%;\"><img src=\"res/ai_lab_logo.png\"></div></div><hr><p>Programming by Guru Ltd, Ljubljana, Slovenia. Design by Loni DBS Ltd, Ljubljana, Slovenia.</p><hr></p>The project was co-funded by European Regional Development Fund and Slovenian Ministry of Education, Science, and Sport.<p></p><div class=\"about-logos\"><div style=\"width: 45%;\"><img src=\"res/nalozba_v_vaso_prihodnost.png\" style=\"max-height: 80%;max-width: 80%;\"></div><div class=\"vertical-line\"></div><div style=\"width: 45%;\"><img src=\"res/MIZS_slo.png\" style=\"max-height: 60%;max-width: 60%;\"></div></div><hr><h3>Contact</h3><p>Aleksander Sadikov, PhD, project leader.</p><hr><h3>Minimal requirements</h3><p>Android: version 3.1, iOS: version 5, Windows Phone: version 8</p>"
 }
diff --git a/res/fri_logo.png b/res/fri_logo.png
new file mode 100644
index 0000000..fb57432
--- /dev/null
+++ b/res/fri_logo.png
diff --git a/res/nalozba_v_vaso_prihodnost.png b/res/nalozba_v_vaso_prihodnost.png
new file mode 100644
index 0000000..62035c1
--- /dev/null
+++ b/res/nalozba_v_vaso_prihodnost.png
diff --git a/res/sl.json b/res/sl.json
index d6bb0c5..bbfd71d 100644
--- a/res/sl.json
+++ b/res/sl.json
@@ -65,5 +65,7 @@
   "upgrade_to_aai_body_text_1": "<p>Uporabnik s tem e-poštnim naslovom že obstaja.</p><p> Vnesite geslo in izberite <span class=\"badge\">Da</span>, da ga nadgradite na AAI.</p>",
   "upgrade_to_aai_body_text_2": "<p>Izberite <span class=\"badge\">Ne</span>, če želite narediti poseben račun.</p>",
   "upgrade_to_aai_no_button": "Ne, naredite novega",
-  "upgrade_to_aai_yes_button": "Da, nadgradite na AAI"
+  "upgrade_to_aai_yes_button": "Da, nadgradite na AAI",
+  "about": "O aplikaciji",
+  "about_html" : "<h3>Naziv operacije</h3><p>Učenje programiranja s samodejno generiranimi namigi.</p><hr><h3>Kratek opis operacije</h3><p>Razvita je bila e-storitev in mobilno aplikacija za inteligentni sistem poučevanja. Samostojno učenju programiranja prek reševanja programerskih nalog smo nadgradili z ekspertnim modulom za opozarjanje na napake in samodejno generiranje namigov, ter modulom za testiranje programov (uporabnikovih rešitev) s samodejno generiranimi testnimi primeri. Poleg tega je bil razvit modul za povezavo z mobilnimi roboti, ki bo omogočil poganjanje programov na le-teh.</p><hr><h3>Upravičenci</h3><p>Univerza v Ljubljani (Fakulteta za računalništvo in informatiko, Laboratorij za umetno inteligenco)</p><div class=\"about-logos\"><div style=\"width: 29%;\"><img src=\"res/fri_logo.png\"></div><div class=\"vertical-line\"></div><div style=\"width: 29%;\"><img src=\"res/ai_lab_logo.png\"></div></div><hr><h3>Stroški operacije</h3><p>X EUR od tega Y EUR iz javnih virov financiranja (85% Evropska unija, 15% Ministrstvo za izobraževanje, znanost in šport).</p><hr><h3>Datum operacije</h3><p>Operacija je potekala od d.m.2015 do 30.9.20135</p><hr><h3>Kontaktna oseba</h3><p>dr. Aleksander Sadikov, vodja projekta.</p><p>Operacijo delno financira Evropska unija iz Evropskega sklada za regionalni razvoj ter Ministrstvo za izobraževanje, znanost in šport. Operacija se izvaja v okviru Operativnega programa krepitve regionalnih razvojnih potencialov v obdobju 2007-2013, razvojne prioritete: gospodarska razvojna infrastruktura; prednostne usmeritve: Informacijska družba.</p><div class=\"about-logos\"><div style=\"width: 45%;\"><img src=\"res/nalozba_v_vaso_prihodnost.png\" style=\"max-height: 80%;max-width: 80%;\"></div><div class=\"vertical-line\"></div><div style=\"width: 45%;\"><img src=\"res/MIZS_slo.png\" style=\"max-height: 60%;max-width: 60%;\"></div></div><hr><h3>Mobilna aplikacija - minimalne zahteve</h3><p>Android: verzija 3.1, iOS: verzija 5, Windows Phone: verzija 8.</p><hr><p>Razvoj aplikacije: Guru d.o.o. Oblikovanje: LONI DBS d.o.o.</p>"
 }