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

started responsive UI: header

Browse Source
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
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;
}
}

63
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;
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{