started responsive UI: header

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1246,18 +1246,24 @@ aside.messages {
 
 header[role="banner"] {
   padding: 0.2em 0 0 0; }
-  header[role="banner"] #block-userlogin h2, header[role="banner"] #user-tools h4, header[role="banner"] #user-flags h2, header[role="banner"] #user-flags li h5, header[role="banner"] #block-header ul.menu li a {
+  header[role="banner"] #block-userlogin h2, header[role="banner"] #user-tools a.mdi-account, header[role="banner"] #user-flags h2, header[role="banner"] #user-flags li h5, header[role="banner"] #block-header ul.menu li a {
     font-size: 0.9em;
     font-weight: 400; }
   header[role="banner"] #block-sitebranding h1 {
     margin: 0;
     line-height: 1; }
+  @media (max-width: 375px) {
+    header[role="banner"] #block-sitebranding .slogan {
+      display: none; } }
   header[role="banner"] #block-socialmedialinks {
     padding-right: 0.5em;
     border-right: 1px solid #1A1A1A;
     margin-right: 0.5em; }
     header[role="banner"] #block-socialmedialinks li {
       padding: 0; }
+    @media (max-width: 375px) {
+      header[role="banner"] #block-socialmedialinks {
+        display: none; } }
   header[role="banner"] #block-userlogin {
     position: relative;
     padding: 0 1em;
@@ -1328,8 +1334,11 @@ header[role="banner"] {
     margin-right: 1em; }
   header[role="banner"] #user-tools {
     padding-top: 0.06em; }
-    header[role="banner"] #user-tools h4 {
+    header[role="banner"] #user-tools a.mdi-account {
       cursor: pointer; }
+      @media (max-width: 375px) {
+        header[role="banner"] #user-tools a.mdi-account span {
+          display: none; } }
     header[role="banner"] #user-tools .mdi-logout::before {
       margin: -0.125em 0 0 0;
       vertical-align: top; }
@@ -1344,6 +1353,9 @@ header[role="banner"] {
       cursor: pointer; }
       header[role="banner"] #user-flags h2:before {
         padding-right: 0.2em; }
+      @media (max-width: 375px) {
+        header[role="banner"] #user-flags h2 span {
+          display: none; } }
     header[role="banner"] #user-flags ul {
       background-color: #fff;
       overflow: hidden;
@@ -1410,13 +1422,39 @@ header[role="banner"] {
     margin-right: 1em;
     padding-left: 1em;
     border-left: 1px solid #000; }
+    header[role="banner"] #block-header #block-header-menu,
+    header[role="banner"] #block-header label[for="block-header-menu"] {
+      display: none; }
     header[role="banner"] #block-header ul.menu {
       margin: 0; }
       header[role="banner"] #block-header ul.menu li {
-        padding: 0;
+        padding: 0; }
+    @media (min-width: 1080px) {
+      header[role="banner"] #block-header ul.menu li {
         display: inline-block; }
         header[role="banner"] #block-header ul.menu li:not(:first-of-type) {
-          margin-left: 0.5em; }
+          margin-left: 0.5em; } }
+    @media (max-width: 375px) {
+      header[role="banner"] #block-header {
+        position: relative;
+        /* Toggle Show/Hide Menu */ }
+        header[role="banner"] #block-header label[for="block-header-menu"] {
+          display: block; }
+        header[role="banner"] #block-header ul.menu {
+          display: none; }
+        header[role="banner"] #block-header input:checked ~ ul.menu {
+          display: block; }
+        header[role="banner"] #block-header ul.menu {
+          position: absolute;
+          width: 110px;
+          height: auto;
+          top: 18.9px;
+          right: 0;
+          background-color: white;
+          padding: 0.2em 0.5em;
+          margin-right: -0.5em;
+          z-index: 90;
+          text-align: right; } }
   header[role="banner"] #block-languageswitcher {
     text-align: right; }
     header[role="banner"] #block-languageswitcher h2 {

web/themes/custom/materiotheme/assets/styles/base/_responsive.scss

@@ -0,0 +1,13 @@
+// iphone 6/7/8
+@mixin responsive-mediaquery-phone() {
+  @media (max-width: 375px) {
+    @content;
+  }
+}
+
+
+@mixin responsive-mediaquery-desktop() {
+  @media (min-width: 1080px) {
+    @content;
+  }
+}

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -5,6 +5,7 @@
 @import './base/layout';
 @import './base/animations';
 @import './base/fonts';
+@import './base/responsive';
 
 
 html{
@@ -35,6 +36,12 @@ header[role="banner"]{
       margin:0;
       line-height: 1;
     }
+    .slogan{
+
+      @include responsive-mediaquery-phone(){
+        display:none;
+      }
+    }
   }
 
   #block-socialmedialinks{
@@ -44,6 +51,9 @@ header[role="banner"]{
     li{
       padding:0;
     }
+    @include responsive-mediaquery-phone(){
+      display:none;
+    }
   }
 
   #block-userlogin{
@@ -146,9 +156,14 @@ header[role="banner"]{
   // vue userblock
   #user-tools{
     padding-top: 0.06em;
-    h4{
+    a.mdi-account{
       @extend %header-fs;
       cursor: pointer;
+      span{
+        @include responsive-mediaquery-phone(){
+          display:none;
+        }
+      }
     }
     .mdi-logout::before {
       margin: -0.125em 0 0 0;
@@ -168,6 +183,11 @@ header[role="banner"]{
       @extend %header-fs;
       cursor: pointer;
       &:before{padding-right: 0.2em;}
+      span{
+        @include responsive-mediaquery-phone(){
+          display:none;
+        }
+      }
     }
     ul{
       background-color: #fff;
@@ -265,19 +285,52 @@ header[role="banner"]{
     margin-right: 1em;
     padding-left: 1em;
     border-left: 1px solid #000;
+    #block-header-menu,
+    label[for="block-header-menu"]{
+      display:none;
+    }
     ul.menu{
       margin:0;
       li{
         padding:0;
-        display: inline-block;
-        &:not(:first-of-type){
-          margin-left: 0.5em;
-        }
         a{
           @extend %header-fs;
         }
       }
     }
+    @include responsive-mediaquery-desktop(){
+      ul.menu{
+        li{
+          display: inline-block;
+          &:not(:first-of-type){
+            margin-left: 0.5em;
+          }
+        }
+      }
+    }
+    @include responsive-mediaquery-phone(){
+      position: relative;
+
+      label[for="block-header-menu"]{
+        display:block;
+      }
+      /* Toggle Show/Hide Menu */
+      // https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/#sec-download
+      ul.menu { display: none; }
+      input:checked ~ ul.menu { display: block; }
+      ul.menu{
+        position: absolute;
+        width: 110px;
+        height: auto;
+        top: 18.9px;
+        right: 0;
+        background-color: white;
+        padding: 0.2em 0.5em;
+        margin-right: -0.5em;
+        z-index: 90;
+        text-align: right;
+      }
+    }
   }
 
   #block-languageswitcher{

web/themes/custom/materiotheme/templates/block/block--menu-block--header.html.twig

@@ -0,0 +1,56 @@
+{#
+/**
+ * @file
+ * Theme override for a menu block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: HTML attributes for the containing element.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: HTML attributes for the title element.
+ * - content_attributes: HTML attributes for the content element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * Headings should be used on navigation menus that consistently appear on
+ * multiple pages. When this menu block's label is configured to not be
+ * displayed, it is automatically made invisible using the 'visually-hidden' CSS
+ * class, which still keeps it visible for screen-readers and assistive
+ * technology. Headings allow screen-reader and keyboard only users to navigate
+ * to or skip the links.
+ * See http://juicystudio.com/article/screen-readers-display-none.php and
+ * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-menu',
+    'navigation',
+    'menu--' ~ derivative_plugin_id|clean_class,
+  ]
+%}
+{% set heading_id = attributes.id ~ '-menu'|clean_id %}
+<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes.addClass(classes)|without('role', 'aria-labelledby') }}>
+  {# Label. If not displayed, we still provide it for screen readers. #}
+  {% if not configuration.label_display %}
+    {% set title_attributes = title_attributes.addClass('visually-hidden') %}
+  {% endif %}
+  <!-- <h2{{ title_attributes.setAttribute('id', heading_id) }}>&#9776;</h2> -->
+  <label for="{{ heading_id }}">&#9776;</label>
+  <input type="checkbox" id="{{ heading_id }}"/>
+
+  {# Menu. #}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</nav>

web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue

@@ -2,7 +2,7 @@
   <div id="user-flags">
     <h2
       class="mdi mdi-folder-outline"
-    >{{ $t("materio.My folders") }} ({{collsLength}})</h2>
+    ><span>{{ $t("materio.My folders") }} ({{collsLength}})</span></h2>
     <ul>
       <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
         <h5

web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue

@@ -1,12 +1,12 @@
 <template lang="html">
   <div id="user-tools">
-    <h4
-      class="mdi mdi-account"
-    >
-    <a href="/user">
-      {{ mail }}
+    <!-- <h4
+
+    > -->
+    <a class="mdi mdi-account" href="/user">
+      <span>{{ mail }}</span>
     </a>
-    </h4>
+    <!-- </h4> -->
     <a href="/admin/content/materials"
       v-if="isAdmin"
       class="mdi mdi-settings"