Skip to content
Snippets Groups Projects
Commit cfa2875f authored by Olimpia Magliulo's avatar Olimpia Magliulo
Browse files

Responsive language menu#3

parent 83c06549
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
templates/_header.twig
+ 3
− 6
View file @ cfa2875f
...@@ -11,11 +11,10 @@ ...@@ -11,11 +11,10 @@
<div class="right"> <div class="right">
<a href="#menu" id="menuLink" class="menu-link hide-for-large"> <a href="#menu" id="menuLink" class="menu-link hide-for-large">
<!-- Hamburger icon --> <!-- 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> </a>
</div> </div>
{% if not hideLanguageBar -%} {% if not hideLanguageBar -%}
<div id="languagebar"> <div id="languagebar">
<div id="menu"> <div id="menu">
...@@ -66,10 +65,8 @@ ...@@ -66,10 +65,8 @@
</div> </div>
{% endif -%} {% endif -%}
</form> </form>
</div><!--show-for-large--> </div> <!--language-bar-->
</div><!--show-for-large-->
</div>
</div> <!-- wrap --> </div> <!-- wrap -->
</div> <!-- header --> </div> <!-- header -->
templates/base.twig
+ 10
− 11
View file @ cfa2875f
...@@ -21,18 +21,17 @@ ...@@ -21,18 +21,17 @@
<body id="{{ templateId }}"> <body id="{{ templateId }}">
<div id="layout"> <div id="layout">
{% block header %}{% include "_header.twig" %}{% endblock %} {% 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 id="foot">
<div class="wrap">
{% block contentwrapper -%}
{% block content %}{% endblock -%}
{% endblock %}
</div>
</div><!-- content -->
<div id="push"></div>
</div><!-- container -->
<div class="foot">
{% block footer %}{% include "_footer.twig" %}{% endblock %} {% block footer %}{% include "_footer.twig" %}{% endblock %}
</div> </div>
......
www/assets/css/src/default.css
+ 0
− 3
View file @ cfa2875f
...@@ -323,9 +323,6 @@ MEDIA QUERIES ...@@ -323,9 +323,6 @@ MEDIA QUERIES
#logo{ #logo{
font-size: 1.8em; font-size: 1.8em;
} }
.fa-language{
font-size: 2em;
}
} }
@media screen and (max-width: 0em), screen and (min-width: 40em) { @media screen and (max-width: 0em), screen and (min-width: 40em) {
......
www/assets/css/src/side-menu.css
+ 11
− 12
View file @ cfa2875f
...@@ -3,6 +3,7 @@ Add transition to containers so they can push in and out. ...@@ -3,6 +3,7 @@ Add transition to containers so they can push in and out.
*/ */
#layout, #layout,
#menu, #menu,
#foot,
.menu-link { .menu-link {
-webkit-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out;
...@@ -109,7 +110,7 @@ how it works: ...@@ -109,7 +110,7 @@ how it works:
small screens. small screens.
*/ */
.menu-link { .menu-link {
position: absolute; position: relative;
display: block; /* show this only on small screens */ display: block; /* show this only on small screens */
top: 0; top: 0;
right: 0; /* "#menu width" */ right: 0; /* "#menu width" */
...@@ -136,26 +137,24 @@ small screens. ...@@ -136,26 +137,24 @@ small screens.
.menu-link span:before, .menu-link span:before,
.menu-link span:after { .menu-link span:after {
background-color: transparent; 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) ------------------------------------- */ /* -- Responsive Styles (Media Queries) ------------------------------------- */
@media screen and (max-width: 0em), screen and (min-width: 40em) { @media screen and (max-width: 63.9375em) {
#layout.active { #layout.active {
position: relative; position: relative;
right: 11em; 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;
} }
} }
www/assets/js/src/script.js
+ 2
− 0
View file @ cfa2875f
...@@ -83,6 +83,7 @@ $(document).ready(function() { ...@@ -83,6 +83,7 @@ $(document).ready(function() {
menu = document.getElementById('menu'), menu = document.getElementById('menu'),
menuLink = document.getElementById('menuLink'), menuLink = document.getElementById('menuLink'),
content = document.getElementById('content'); content = document.getElementById('content');
footer = document.getElementById('foot');
function toggleClass(element, className) { function toggleClass(element, className) {
var classes = element.className.split(/\s+/), var classes = element.className.split(/\s+/),
...@@ -110,6 +111,7 @@ $(document).ready(function() { ...@@ -110,6 +111,7 @@ $(document).ready(function() {
toggleClass(layout, active); toggleClass(layout, active);
toggleClass(menu, active); toggleClass(menu, active);
toggleClass(menuLink, active); toggleClass(menuLink, active);
toggleClass(footer, active);
} }
menuLink.onclick = function (e) { menuLink.onclick = function (e) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment