From 83c06549f79d738c2ce4ccf8741574bd8dbab4e2 Mon Sep 17 00:00:00 2001
From: Olimpia Magliulo <olimpiam@intern-ikts-MacBook-Air.local>
Date: Tue, 28 Nov 2017 17:01:03 +0100
Subject: [PATCH] Responsive language menu#2
- side-menu button moved to the right
- update responsive menu for rtl languages.
- menu-link span position needs to be adjusted.
- footer should move like the rest of the page (js needed)
---
modules/core/templates/loginuserpass.twig | 2 +-
templates/_header.twig | 15 ++--
templates/base.twig | 4 --
www/assets/css/src/default-rtl.css | 42 ++++++++++-
www/assets/css/src/default.css | 69 ++++++++++--------
www/assets/css/src/side-menu.css | 88 ++++++-----------------
6 files changed, 116 insertions(+), 104 deletions(-)
diff --git a/modules/core/templates/loginuserpass.twig b/modules/core/templates/loginuserpass.twig
index bc531a1e0..f90ce56a0 100644
--- a/modules/core/templates/loginuserpass.twig
+++ b/modules/core/templates/loginuserpass.twig
@@ -37,7 +37,7 @@
<form class="pure-form pure-form-aligned center-form" action="?" method="post" name="f">
<div class="form-align">
- <div class="hide-for-small-only v-center-right">
+ <div class="show-for-medium v-center-right">
<img class="pure-img" src="/{{ baseurlpath }}resources/icons/experience/gtk-dialog-authentication.48x48.png"
alt=""/>
</div>
diff --git a/templates/_header.twig b/templates/_header.twig
index 2adb3efa7..cd1c79193 100644
--- a/templates/_header.twig
+++ b/templates/_header.twig
@@ -8,9 +8,16 @@
</div>
</div>
</div>
+ <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>
+ </a>
+ </div>
+
{% if not hideLanguageBar -%}
- <div id="languagebar" class="hide-for-large">
+ <div id="languagebar">
<div id="menu">
<div class="pure-menu">
{% for key, lang in languageBar -%}
@@ -19,12 +26,12 @@
{% else -%}
<ul class="pure-menu-list">
{% if lang.url -%}
- <li class="pure-menu-item"><a href="{{ lang.url }}{% spaceless %}
+ <li class="pure-menu-item"><a href="{{ lang.url }}{%- spaceless %}
{% if queryParams %}&{% endif %}
{% for name, value in queryParams %}
- {% if not loop.first %}&{% endif %}
+ {%- if not loop.first %}&{% endif -%}
{% if value %}{{ name }}={{ value }}{% else %}{{ name }}{% endif %}
- {% endfor %}"{% endspaceless %} class="pure-menu-link">{{ lang.name }}</a></li>
+ {% endfor %}"{% endspaceless -%} class="pure-menu-link">{{ lang.name }}</a></li>
{% endif %}
{% endif -%}
{% endfor -%}
diff --git a/templates/base.twig b/templates/base.twig
index 131944af7..c1244f398 100644
--- a/templates/base.twig
+++ b/templates/base.twig
@@ -20,10 +20,6 @@
</head>
<body id="{{ templateId }}">
<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/default-rtl.css b/www/assets/css/src/default-rtl.css
index 9716b628a..6ebee2be1 100644
--- a/www/assets/css/src/default-rtl.css
+++ b/www/assets/css/src/default-rtl.css
@@ -4,7 +4,12 @@
html {
direction: rtl;
}
-
+#header{
+ background: linear-gradient(-141deg, #b8002c 0%, #db0100 51%, #e8410c 75%);
+}
+#footer{
+ background: linear-gradient(-141deg, #b8002c 0%, #db0100 51%, #e8410c 75%);
+}
/* LISTS */
ul {
margin: .3em 2em 1.5em 0;
@@ -119,4 +124,37 @@ div .item{
}
.pure-table-attributes li{
margin:0;
-}
\ No newline at end of file
+}
+
+/* language side menu on medium and small screens*/
+#layout.active #menu {
+ right: initial;
+ left: 11em;
+}
+#layout.active .menu-link {
+ right: initial;
+ left: 11em;
+}
+#menu {
+ right: initial;
+ margin-right: 0;
+ margin-left: -11em; /* "#menu" width */
+ left: 0;
+}
+#menu a {
+ padding: 0.6em 0.6em 0.6em 0em;
+}
+
+.menu-link {
+ right: initial;
+ left: 0; /* "#menu width" */
+}
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+@media screen and (max-width: 0em), screen and (min-width: 40em) {
+ #layout.active {
+ right: initial;
+ left: 11em;
+ }
+}
diff --git a/www/assets/css/src/default.css b/www/assets/css/src/default.css
index 5afda93da..ff80a5372 100644
--- a/www/assets/css/src/default.css
+++ b/www/assets/css/src/default.css
@@ -105,6 +105,11 @@ HEADER
/* ***********************************************************
CONTENT
************************************************************ */
+#layout {
+ position: relative;
+ right: 0;
+ padding-right: 0;
+ }
#content {
padding-top: 2em;
padding-bottom: 4rem;
@@ -287,21 +292,29 @@ table.attributes ul{
MEDIA QUERIES
************************************************************ */
-@media screen and (max-width:480px) {
+@media screen and (max-width: 480px) {
+ .pure-form .pure-input-sm-1-1{
+ width: 100%;
+ }
+}
+@media screen and (max-width: 39.9375em) {
+ .hide-for-small-only {
+ display: none !important;
+ }
+ .selectize-input{
+ padding-right: 0.1rem;
+ }
body {
- font-size: 0.875em;
+ font-size:75%;
}
.wrap{
- width: 90%;
- }
- .pure-form .pure-input-sm-1-1{
- width: 100%;
+ width: 90%;
}
.pure-form-aligned .pure-controls{
margin: 0.5em 0 0;
float: left;
}
- #content {
+ #layout {
padding-top: 0;
}
.auth_methods {
@@ -310,12 +323,8 @@ MEDIA QUERIES
#logo{
font-size: 1.8em;
}
-}
-@media screen and (max-width: 39.9375em) {
- .hide-for-small-only {
- display: none !important; }
- .selectize-input{
- padding-right: 0.1rem;
+ .fa-language{
+ font-size: 2em;
}
}
@@ -328,30 +337,34 @@ MEDIA QUERIES
}
}
-@media screen and (min-width: 40em) {
- .hide-for-medium {
- display: none !important; }
+@media screen and (min-width: 40em) and (max-width: 63.9375em) {
+ .hide-for-medium-only {
+ display: none !important;
+ }
+ body{
+ font-size: 85%;
+ }
}
@media screen and (max-width: 39.9375em) {
.show-for-medium {
- display: none !important; }
+ display: none !important;
+ }
+}
+
+@media screen and (max-width: 39.9375em), screen and (min-width: 64em) {
+ .show-for-medium-only {
+ display: none !important;
+ }
}
@media screen and (min-width: 64em) {
.hide-for-large {
- display: none !important; }
+ display: none !important;
+ }
}
@media screen and (max-width: 63.9375em) {
.show-for-large {
- display: none !important; }
+ display: none !important;
+ }
}
-/*@media screen and (min-width: 40em) { !*640*! w/ font-size:16pt*/
-
-/*}*/
-/*@media screen and (min-width: 64em) { !*1024px*!*/
-
-/*}*/
-/*@media screen and (max-width: 18.75em) { !*528*!*/
-
-/*}*/
diff --git a/www/assets/css/src/side-menu.css b/www/assets/css/src/side-menu.css
index c903b9f7c..b07bbeeea 100644
--- a/www/assets/css/src/side-menu.css
+++ b/www/assets/css/src/side-menu.css
@@ -14,18 +14,13 @@ Add transition to containers so they can push in and 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;
+ right: 11em;
+ width: 11em;
}
-
#layout.active .menu-link {
- left: 150px;
+ right: 11em;
}
/*
@@ -34,11 +29,11 @@ appears on the left side of the page.
*/
#menu {
- margin-left: -150px; /* "#menu" width */
- width: 150px;
+ margin-right: -11em; /* "#menu" width */
+ width: 11em;
position: fixed;
top: 0;
- left: 0;
+ right: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: #E8410C;
@@ -51,7 +46,7 @@ All anchors inside the menu should be styled like this.
#menu a {
color: #ffffff;
border: none;
- padding: 0.6em 0 0.6em 0.6em;
+ padding: 0.6em 0em 0.6em 0.6em;
}
/*
@@ -114,90 +109,53 @@ how it works:
small screens.
*/
.menu-link {
- position: fixed;
+ position: absolute;
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 */
+ right: 0; /* "#menu width" */
+ background: transparent;
z-index: 10;
- width: 2em;
- height: auto;
- padding: 2.1em 1.6em;
+ height: 2rem;
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ text-decoration: none;
}
-.menu-link:hover,
-.menu-link:focus {
- background: #b8002c;
+.menu-link span:hover,
+.menu-link span:focus {
+ color: rgba(1,1,1,0.8);
}
.menu-link span {
position: relative;
display: block;
+ color: #FFFFFF;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
- background-color: #fff;
+ background-color: transparent;
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.
- */
+@media screen and (max-width: 0em), screen and (min-width: 40em) {
#layout.active {
position: relative;
- left: 150px;
+ right: 11em;
+ /* moves to right as many ems as the one used by the fa-icon (4x) */
}
}
--
GitLab