From cfa2875fa507a79dbfc9a55f74a443445ff242d0 Mon Sep 17 00:00:00 2001
From: Olimpia Magliulo <olimpiam@intern-ikts-MacBook-Air.local>
Date: Tue, 5 Dec 2017 12:58:41 +0100
Subject: [PATCH] Responsive language menu#3
---
templates/_header.twig | 9 +++------
templates/base.twig | 21 ++++++++++-----------
www/assets/css/src/default.css | 3 ---
www/assets/css/src/side-menu.css | 23 +++++++++++------------
www/assets/js/src/script.js | 2 ++
5 files changed, 26 insertions(+), 32 deletions(-)
diff --git a/templates/_header.twig b/templates/_header.twig
index cd1c79193..850121a2f 100644
--- 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 -->
diff --git a/templates/base.twig b/templates/base.twig
index c1244f398..21162c6db 100644
--- 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>
diff --git a/www/assets/css/src/default.css b/www/assets/css/src/default.css
index ff80a5372..4aa50f8f2 100644
--- 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) {
diff --git a/www/assets/css/src/side-menu.css b/www/assets/css/src/side-menu.css
index b07bbeeea..9795216ee 100644
--- 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;
}
}
diff --git a/www/assets/js/src/script.js b/www/assets/js/src/script.js
index 58facd544..255b7d031 100644
--- 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) {
--
GitLab