Responsive language menu#3

cfa2875f · Olimpia Magliulo · 83c06549 · cfa2875f · cfa2875f · cfa2875f
Commit cfa2875f authored 7 years ago by Olimpia Magliulo
--- a/templates/_header.twig
+++ b/templates/_header.twig
@@ -11,11 +11,10 @@
                <div class="right">
                    <a href="#menu" id="menuLink" class="menu-link hide-for-large">
                        <!-- Hamburger icon -->
-                        <span class="fa fa-language fa-3x" aria-hidden="true"></span>
+                        <span class="fa fa-language fa-2x" aria-hidden="true"></span>
                    </a>
                </div>

-
                {% if not hideLanguageBar -%}
                    <div id="languagebar">
                        <div id="menu">
@@ -66,10 +65,8 @@
                            </div>
                        {% endif -%}
                        </form>
-                    </div><!--show-for-large-->
-
-
-                </div>
+                    </div> <!--language-bar-->
+                </div><!--show-for-large-->
            </div> <!-- wrap -->
        </div> <!-- header -->

--- a/templates/base.twig
+++ b/templates/base.twig
@@ -21,18 +21,17 @@
 <body id="{{ templateId }}">
    <div id="layout">
 {% block header %}{% include "_header.twig" %}{% endblock %}
+        <div id="content">
+            <div class="wrap">
+                {% block contentwrapper -%}
+                    {% block content %}{% endblock -%}
+                {% endblock %}
+            </div>
+        </div><!-- content -->
+        <div id="push"></div>
+    </div><!-- layout -->

-    <div id="content">
-        <div class="wrap">
-            {% block contentwrapper -%}
-                {% block content %}{% endblock -%}
-            {% endblock %}
-        </div>
-    </div><!-- content -->
-    <div id="push"></div>
-    </div><!-- container -->
-
-    <div class="foot">
+    <div id="foot">
 {% block footer %}{% include "_footer.twig" %}{% endblock %}
    </div>


--- a/www/assets/css/src/default.css
+++ b/www/assets/css/src/default.css
@@ -323,9 +323,6 @@ MEDIA QUERIES
    #logo{
        font-size: 1.8em;
    }
-    .fa-language{
-        font-size: 2em;
-    }
 }

 @media screen and (max-width: 0em), screen and (min-width: 40em) {

--- a/www/assets/css/src/side-menu.css
+++ b/www/assets/css/src/side-menu.css
@@ -3,6 +3,7 @@ Add transition to containers so they can push in and out.
 */
 #layout,
 #menu,
+#foot,
 .menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
@@ -109,7 +110,7 @@ how it works:
 small screens.
 */
 .menu-link {
-    position: absolute;
+    position: relative;
    display: block; /* show this only on small screens */
    top: 0;
    right: 0; /* "#menu width" */
@@ -136,26 +137,24 @@ small screens.
 .menu-link span:before,
 .menu-link span:after {
    background-color: transparent;
-    width: 100%;
-}

-.menu-link span:before,
-.menu-link span:after {
-    position: absolute;
-    margin-top: -0.6em;
 }

-.menu-link span:after {
-    margin-top: 0.6em;
-}

 /* -- Responsive Styles (Media Queries) ------------------------------------- */


-@media screen and (max-width: 0em), screen and (min-width: 40em) {
+@media screen and (max-width: 63.9375em) {
    #layout.active {
        position: relative;
        right: 11em;
-         /* moves to right as many ems as the one used by the fa-icon (4x) */
+         /* moves to right as many ems as the one used by the menu */
+    }
+    #menuLink.menu-link.active {
+        position: fixed;
+        right: 11em;
+    }
+    #foot.active {
+        margin-right: 11em;
    }
 }
--- a/www/assets/js/src/script.js
+++ b/www/assets/js/src/script.js
@@ -83,6 +83,7 @@ $(document).ready(function() {
        menu     = document.getElementById('menu'),
        menuLink = document.getElementById('menuLink'),
        content  = document.getElementById('content');
+        footer  = document.getElementById('foot');

    function toggleClass(element, className) {
        var classes = element.className.split(/\s+/),
@@ -110,6 +111,7 @@ $(document).ready(function() {
        toggleClass(layout, active);
        toggleClass(menu, active);
        toggleClass(menuLink, active);
+        toggleClass(footer, active);
    }

    menuLink.onclick = function (e) {