diff --git a/templates/_header.twig b/templates/_header.twig
index 8455fc01f243d3c33b8b9d8b07abb80e04264491..2adb3efa740264a3e99f35c1ac3f05c4dc6ff1b5 100644
--- a/templates/_header.twig
+++ b/templates/_header.twig
@@ -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 -->
diff --git a/templates/base.twig b/templates/base.twig
index 4f2e196ef9e40725feef1d3e035079eaa7de18b5..131944af751560d347d1ec69fc9766517d19308a 100644
--- a/templates/base.twig
+++ b/templates/base.twig
@@ -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">
diff --git a/www/assets/css/src/side-menu.css b/www/assets/css/src/side-menu.css
new file mode 100644
index 0000000000000000000000000000000000000000..c903b9f7cccb6d44106260078537062fab1b1d8c
--- /dev/null
+++ b/www/assets/css/src/side-menu.css
@@ -0,0 +1,203 @@
+/*
+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;
+ }
+}
diff --git a/www/assets/js/src/language.js b/www/assets/js/src/language.js
index 9150e4354e8da1c06b676e3f9c2db77e50a72085..6666a5504637abbaf9627510c5e32048d485b836 100644
--- a/www/assets/js/src/language.js
+++ b/www/assets/js/src/language.js
@@ -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();
diff --git a/www/assets/js/src/script.js b/www/assets/js/src/script.js
index 19aac25406df76a6412dd475a7259f34e5c1a036..58facd5443783e58168dbbd3f186e99c1204be20 100644
--- a/www/assets/js/src/script.js
+++ b/www/assets/js/src/script.js
@@ -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));