SIO-2075 Mainpage update

In the current version, the main page is a portal. We want
a mainpage to be a separate entity.

Change-Id: I7e6ef9406cfa44ee53a1e2039f08ac25a4ff2fde

oioioi/base/static/scss/_language-picker.scss

@@ -0,0 +1,8 @@
+.current-language {
+    position: absolute;
+    right: 5px;
+    font-weight: bold;
+    font-size: 18px;
+    margin: 0px 5px 0px 0px;
+    color: $brand-success;
+}

oioioi/base/static/scss/_navbar.scss

@@ -67,7 +67,8 @@ body {
   > a,
   .dropdown > a,
   .oioioi-navbar__extra > a,
-  .oioioi-navbar__extra > .dropdown > a {
+  .oioioi-navbar__extra > .dropdown > a,
+  .oioioi-navbar__menu-uncollapsed > a {
     @include centered-block($navbar-height);
     color: $oioioi-navbar-link-color;
     padding: 0 $oioioi-navbar-padding-base-horizontal;
@@ -127,7 +128,8 @@ body {
     padding: 0 $oioioi-navbar-padding-base-horizontal;
   }
 
-  > .oioioi-navbar__extra {
+  > .oioioi-navbar__extra,
+  > .oioioi-navbar__menu-uncollapsed {
     display: flex;
   }
 
@@ -163,7 +165,8 @@ body {
 // * Labels get shrunk
 @media (max-width: $screen-md-max) {
   .oioioi-navbar,
-  .oioioi-navbar > .oioioi-navbar__extra {
+  .oioioi-navbar > .oioioi-navbar__extra,
+  .oioioi-navbar__menu-uncollapsed {
     > a > .label,
     .dropdown > a > .label {
       max-width: $oioioi-navbar-label-md-width;
@@ -173,6 +176,7 @@ body {
 
 // Small screens
 // * Menu replaces brand
+// * Navbar links collapse to a dropdown menu
 // * Contest picker max width decreases
 // * Username and labels gets hidden (only icons)
 @media (max-width: $screen-sm-max) {
@@ -181,6 +185,10 @@ body {
       display: block;
     }
 
+    > .oioioi-navbar__menu-uncollapsed {
+      display: none;
+    }
+
     > .oioioi-navbar__brand:not(.oioioi-navbar__brand--always) {
       display: none;
     }

oioioi/base/static/scss/style.scss

@@ -10,6 +10,7 @@
 @import "scss/layout";
 @import "scss/markdown-editor";
 @import "scss/spinner";
+@import "scss/language-picker";
 
 body {
   min-width: $oioioi-body-min-width;

oioioi/base/templates/base-with-menu.html

@@ -3,12 +3,8 @@
 {% block body-class %}body-with-menu{% endblock %}
 {% block container-class %}container-fluid{% endblock %}
 
-{% block navbar-menu %}
-<a class="oioioi-navbar__brand" href="{% url 'index' contest_id=None %}">{{ site_name }}</a>
-
-<div class="oioioi-navbar__menu dropdown">
-    {% include "ingredients/navbar-menu.html" %}
-</div>
+{% block navbar-logo %}
+    {% include "ingredients/navbar-logo-with-menu.html" %}
 {% endblock %}
 
 {% block body %}

oioioi/base/templates/base.html

@@ -10,7 +10,7 @@
         <meta charset="UTF-8">
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="{{ STATIC_URL }}favicon.ico" />
+        {% include "ingredients/head-favicon.html" %}
 
         {% comment %}
         Load jQuery because inlined scripts in some views depends on it.
@@ -41,8 +41,8 @@
             {% if request.session.admin_time %} oioioi-navbar--admin-time {% endif %}
             {% if is_under_su %} oioioi-navbar--admin-su {% endif %} {% block navbar-class %}{% endblock %}">
 
-                {% block navbar-menu %}
-                <a class="oioioi-navbar__brand oioioi-navbar__brand--always" href="{% url 'index' contest_id=None %}">{{ site_name }}</a>
+                {% block navbar-logo %}
+                    {% include "ingredients/navbar-logo.html" with always_visible=True %}
                 {% endblock %}
 
                 <div class="oioioi-navbar__contests">
@@ -72,6 +72,11 @@
                     {% endif %}
                 </div>
 
+                <div class="oioioi-navbar__lang">
+                    {% block navbar_language_selector %}
+                        {% include 'ingredients/language-picker.html' %}
+                    {% endblock %}
+                </div>
 
                 <div class="oioioi-navbar__user-su">
                     {% block navbar_user_su_panel %}

oioioi/base/templates/ingredients/head-favicon.html

@@ -0,0 +1,3 @@
+{% load staticfiles %}
+
+<link rel="shortcut icon" href="{% static "favicon.ico" %}"/>

oioioi/base/templates/ingredients/language-picker.html

@@ -1,12 +1,24 @@
 {% if LANGUAGES|length > 1 %}
-{% load i18n %}
-    <li class="divider" role="separator"></li>
-    {% for lang_short, lang_name in LANGUAGES %}
-        <li>
-            <a href="#" class="lang-select" lang="{{ lang_short }}">
-                <img title="{{ lang_short|language_name_local }}" src="{{ STATIC_URL }}images/flags/{{ lang_short }}.png"/>
-                {{ lang_short|language_name_local }}
-            </a>
-        </li>
-    {% endfor %}
+    {% load i18n %}
+    {% get_current_language as LANGUAGE_CODE %}
+
+    <div class="dropdown">
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+            <img title="{{ LANGUAGE_CODE|language_name_local }}" src="{{ STATIC_URL }}images/flags/{{ LANGUAGE_CODE }}.png"/>
+            <span class="caret"></span>
+        </a>
+        <ul class="dropdown-menu pull-right">
+            {% for lang_short, lang_name in LANGUAGES %}
+                <li>
+                    <a href="#" class="lang-select" lang="{{ lang_short }}">
+                        <img title="{{ lang_short|language_name_local }}" src="{{ STATIC_URL }}images/flags/{{ lang_short }}.png"/>
+                        {{ lang_short|language_name_local }}
+                        {% if lang_short == LANGUAGE_CODE %}
+                            <span class="current-language">✓</span>
+                        {% endif %}
+                    </a>
+                </li>
+            {% endfor %}
+        </ul>
+    </div>
 {% endif %}

oioioi/base/templates/ingredients/navbar-logo-with-menu.html

@@ -0,0 +1,5 @@
+{% include "ingredients/navbar-logo.html" with always_visible=False %}
+
+<div class="oioioi-navbar__menu dropdown">
+    {% include "ingredients/navbar-menu.html" %}
+</div>

oioioi/base/templates/ingredients/navbar-logo.html

@@ -0,0 +1,3 @@
+<a class="oioioi-navbar__brand {% if always_visible %}oioioi-navbar__brand--always{% endif %}" href="{% url 'index' contest_id=None %}">
+    {{ site_name }}
+</a>

oioioi/base/templates/ingredients/navbar-user.html

@@ -23,7 +23,6 @@
                     <button type="submit" class="btn btn-primary">{% trans "Log in" %}</button>
                 </form>
             </li>
-            {% include 'ingredients/language-picker.html' %}
         </ul>
     </div>
 {% else %}
@@ -51,7 +50,6 @@
             {% for item in menu %}
                 <li><a href="{{ item.url }}" {{ item.attrs }}>{{ item.text }}</a></li>
             {% endfor %}
-            {% include 'ingredients/language-picker.html' %}
 
             {% su_dropdown_form %}
             {% user_info_dropdown_form %}

oioioi/clock/static/common/clocks.js

@@ -74,9 +74,13 @@ $(function() {
      * @returns {string} formatted date
      */
     function getDatetimeString(time) {
-        return time.getFullYear() + '-' + time.getMonth() + '-'
-            + time.getDay() + ' ' + time.getHours() + ':'
-            + time.getMinutes() + ':' + time.getSeconds();
+        function twoDigit(number) {
+            return ("0" + number).slice(-2);
+        }
+
+        return time.getFullYear() + '-' + twoDigit(time.getMonth() + 1) + '-'
+            + twoDigit(time.getDate()) + ' ' + twoDigit(time.getHours()) + ':'
+            + twoDigit(time.getMinutes()) + ':' + twoDigit(time.getSeconds());
     }
 
     /**