bachir
/
materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

started responsive UI: header

This commit is contained in:
Bachir Soussi Chiadmi 2021-03-18 23:13:50 +01:00
parent 1862f2922e
commit 5ffacc45ed
7 changed files with 182 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@ -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 {

10
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

13
web/themes/custom/materiotheme/assets/styles/base/_responsive.scss Normal file
View File

@ -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;
}
}

59
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@ -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;
a{
@extend %header-fs;
}
}
}
@include responsive-mediaquery-desktop(){
ul.menu{
li{
display: inline-block;
&:not(:first-of-type){
margin-left: 0.5em;
}
a{
@extend %header-fs;
}
}
}
@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{

56
web/themes/custom/materiotheme/templates/block/block--menu-block--header.html.twig Normal file
View File

@ -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>

2
web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue
View File

@ -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

12
web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue
View File

@ -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"