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

Responsive language menu 

- Large screens: will display the dropdownmenu
- Medium & small screens will show a button (on the top right in the future)
and a menu will push the content (to left) and showing the language options.
parent ec13f58f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
templates/_header.twig
+ 30
− 2
View file @ 789cf2b5
......@@ -8,7 +8,33 @@
</div>
</div>
</div>
<div class="right">
{% if not hideLanguageBar -%}
<div id="languagebar" class="hide-for-large">
<div id="menu">
<div class="pure-menu">
{% for key, lang in languageBar -%}
{% if key == currentLanguage -%}
<a class="pure-menu-heading" href="#">{{ lang.name }}</a>
{% else -%}
<ul class="pure-menu-list">
{% if lang.url -%}
<li class="pure-menu-item"><a href="{{ lang.url }}{% spaceless %}
{% if queryParams %}&{% endif %}
{% for name, value in queryParams %}
{% if not loop.first %}&{% endif %}
{% if value %}{{ name }}={{ value }}{% else %}{{ name }}{% endif %}
{% endfor %}"{% endspaceless %} class="pure-menu-link">{{ lang.name }}</a></li>
{% endif %}
{% endif -%}
{% endfor -%}
</ul>
</div>
</div>
</div>
{%- endif %}
<div class="right show-for-large">
<div class="v-center language-bar">
<form id="SelectLang" class="pure-form" method="get">
{% if not hideLanguageBar -%}
......@@ -33,7 +59,9 @@
</div>
{% endif -%}
</form>
</div>
</div><!--show-for-large-->
</div>
</div> <!-- wrap -->
</div> <!-- header -->
......
templates/base.twig
+ 6
− 1
View file @ 789cf2b5
......@@ -5,6 +5,7 @@
<meta name="viewport" content="initial-scale=1.0">
<title>{{ pagetitle }}</title>
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/lib/pure-min.css">
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/src/side-menu.css">
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/lib/selectize.default.css" />
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/lib/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/src/default.css">
......@@ -18,7 +19,11 @@
{% block preload %}{% endblock %}
</head>
<body id="{{ templateId }}">
<div class="container">
<div id="layout">
<a href="#menu" id="menuLink" class="menu-link">
<!-- Hamburger icon -->
<span></span>
</a>
{% block header %}{% include "_header.twig" %}{% endblock %}
<div id="content">
......
www/assets/css/src/side-menu.css 0 → 100644
+ 203
− 0
View file @ 789cf2b5
/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
position: relative;
left: 0;
padding-left: 0;
}
#layout.active #menu {
left: 150px;
width: 150px;
}
#layout.active .menu-link {
left: 150px;
}
/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#menu {
margin-left: -150px; /* "#menu" width */
width: 150px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: #E8410C;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*
All anchors inside the menu should be styled like this.
*/
#menu a {
color: #ffffff;
border: none;
padding: 0.6em 0 0.6em 0.6em;
}
/*
Remove all background/borders, since we are applying them to #menu.
*/
#menu .pure-menu,
#menu .pure-menu ul {
border: none;
background: transparent;
}
/*
Add that light border to separate items into groups.
*/
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
border-top: 1px solid #db0100;
}
/*
Change color of the anchor links on hover/focus.
*/
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
background: #db0100;
}
/*
This styles the selected menu item `<li>`.
*/
#menu .pure-menu-selected,
#menu .pure-menu-heading {
background: #ffa86f;
color: black;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#menu .pure-menu-selected a {
color: #fff;
}
/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/
/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
position: fixed;
display: block; /* show this only on small screens */
top: 0;
left: 0; /* "#menu width" */
background: #e8410c;
background: rgba(232, 65, 12, 0.7);
font-size: 10px; /* change this value to increase/decrease button size */
z-index: 10;
width: 2em;
height: auto;
padding: 2.1em 1.6em;
}
.menu-link:hover,
.menu-link:focus {
background: #b8002c;
}
.menu-link span {
position: relative;
display: block;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
background-color: #fff;
width: 100%;
height: 0.2em;
}
.menu-link span:before,
.menu-link span:after {
position: absolute;
margin-top: -0.6em;
content: " ";
}
.menu-link span:after {
margin-top: 0.6em;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 64em) {
#header,
#content {
padding-left: 2em;
padding-right: 2em;
}
#layout {
padding-left: 150px; /* left col width "#menu" */
left: 0;
}
#menu {
left: 150px;
}
.menu-link {
position: fixed;
left: 150px;
display: none;
}
#layout.active .menu-link {
left: 150px;
}
}
@media (max-width: 63.9375em) {
/* Only apply this when the window is small. Otherwise, the following
case results in extra padding on the left:
* Make the window small.
* Tap the menu to trigger the active state.
* Make the window large again.
*/
#layout.active {
position: relative;
left: 150px;
}
}
www/assets/js/src/language.js
+ 2
− 2
View file @ 789cf2b5
......@@ -7,8 +7,8 @@ $(document).ready(function() {
$('#SelectLang').on("change", function (e) {
if (-1 !== $.inArray(
$('#language_selector-selectized').prev().text().toLowerCase(),
languages
$('#language_selector-selectized').prev().text().toLowerCase(),
languages
)
) {
e.currentTarget.submit();
......
www/assets/js/src/script.js
+ 50
− 0
View file @ 789cf2b5
......@@ -73,3 +73,53 @@ $(document).ready(function() {
});
});
/*************/
(function (window, document) {
var layout = document.getElementById('layout'),
menu = document.getElementById('menu'),
menuLink = document.getElementById('menuLink'),
content = document.getElementById('content');
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
length = classes.length,
i = 0;
for(; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
function toggleAll(e) {
var active = 'active';
e.preventDefault();
toggleClass(layout, active);
toggleClass(menu, active);
toggleClass(menuLink, active);
}
menuLink.onclick = function (e) {
toggleAll(e);
};
content.onclick = function(e) {
if (menu.className.indexOf('active') !== -1) {
toggleAll(e);
}
};
}(this, this.document));
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