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

more respnsive: header hamburger done, started base

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-03-29 22:28:24 +02:00
parent d170979b42
commit 2f1636dfd4
13 changed files with 651 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
build/webpack.config.dev.js
View File

@@ -33,7 +33,7 @@ module.exports = merge(baseConfig, {
'sass-loader'
]
}, {
test: /\.(png|jpg|gif)$/,
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',

2
build/webpack.config.prod.js
View File

@@ -34,7 +34,7 @@ module.exports = merge(baseConfig, {
'sass-loader'
]
}, {
test: /\.(png|jpg|gif)$/,
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',

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

@@ -19319,24 +19319,36 @@ header[role="banner"] {
header[role="banner"] > .wrapper .header-block.header-right label[for="header-block-right-toggle"] {
display: block; }
header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper {
z-index: 10;
z-index: 100;
position: absolute;
top: 33px;
width: 300px;
right: -450px;
right: 0;
box-sizing: border-box;
transition: right 0.5s ease-in-out; }
overflow: hidden;
width: 0.1px;
box-shadow: 0 0 0 #fff;
padding: 1em 0;
margin-top: 0.7em;
transition: all 0.5s ease-in-out; }
header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > *.block, header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > div#user-tools {
display: block;
padding: 0 0 0.5em 0 !important;
margin: 0 0 0.5em 0 !important;
width: 18em;
padding: 0 0 1em 0 !important;
margin: 0 0 1em 0 !important;
text-align: right;
border-left: none !important;
border-right: none !important; }
header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > *.block:not(:last-child), header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > div#user-tools:not(:last-child) {
border-bottom: 1px solid #ccc !important; }
header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper #user-flags {
width: 18em;
padding: 1em 0 0 0 !important;
margin: 1em 0 0 0 !important;
border-top: 1px solid #ccc !important; }
header[role="banner"] > .wrapper .header-block.header-right input#header-block-right-toggle:checked ~ div.header-block-wrapper {
right: 1px; } }
width: 20em;
padding: 1em 1em;
box-shadow: -2px 2px 4px #ccc; } }
main[role="main"] {
flex: 1 1 auto;
@@ -19397,9 +19409,7 @@ header[role="banner"] {
header[role="banner"] #block-sitebranding h1, header[role="banner"] #block-sitebranding .slogan {
display: inline-block; } }
@media (max-width: 654px) {
header[role="banner"] .header-block.header-right .header-block-wrapper {
padding: 1em 1em;
box-shadow: -2px 2px 4px #ccc;
header[role="banner"] .header-block.header-right .header-block-wrapper, header[role="banner"] .header-block.header-right .header-block-wrapper #user-flags ul {
background-color: #fff; } }
header[role="banner"] #block-socialmedialinks {
padding-right: 0.5em;
@@ -19672,15 +19682,20 @@ header[role="banner"] {
align-self: flex-end; }
@media (max-width: 654px) {
header[role="banner"] #header-bottom {
flex-direction: column-reverse;
flex-direction: column;
justify-content: center; }
header[role="banner"] #header-bottom #block-pagetitle {
width: max-content; } }
width: 100%; }
header[role="banner"] #header-bottom #block-materiosapisearchblock {
box-sizing: border-box;
width: 100%; } }
header[role="banner"] #block-pagetitle {
padding: 1em 0; }
@media (max-width: 654px) {
body.path-frontpage header[role="banner"] #block-pagetitle, body.path-home header[role="banner"] #block-pagetitle {
display: none; } }
header[role="banner"] #block-pagetitle {
padding: 1em 0 0; }
body.path-frontpage header[role="banner"] #block-pagetitle, body.path-home header[role="banner"] #block-pagetitle {
display: none; } }
header[role="banner"] #block-pagetitle h2 {
margin: 0;
font-size: 1.512em;
@@ -19720,10 +19735,17 @@ header[role="banner"] {
width: 20px;
height: 20px;
margin: 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAATFJREFUeNqcU8sNgkAQxc9dEr1rQgEkWoBGPEOid0ygA+6asDagBZCIHUgFrBVABWoF0ME6yZqRz/jBFw7D7ryZnZk3LSGEQiHP8/M5ut9v8rfXU2ezqa7rJSdBwff9fn/Q6XQr33xuXK83dCPIy+UKvSEEEMbjSfEkSRKa7HkeOh2PIZ5DQgwBBkEGD8yA4RFZliFfxi2R9/uDvIP8ZC/iOC4mL5GhvHdpEdhIsNvknHAkjDHDWIThqX6VpmlX+QjGdtJYr+26EL6Qt9sN5xfbtutXqqrSNUNjGtdsmqY0oigiH8I5h9e+Kv9vzjBUQmF4/UFhmqYRCnMcp7IJUtvg/UXbyATjx61qyX12XVcqAeYZBAG5z5ZljUbD6j4Xc4omUFDrTZnPmqGrfzABDwEGACI/YeOOd/wDAAAAAElFTkSuQmCC);
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9IjI3bW0iCiAgIGhlaWdodD0iMjdtbSIKICAgdmlld0JveD0iMCAwIDI3IDI3IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxNTY4MCIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wLjIgKGU4NmM4NzA4NzksIDIwMjEtMDEtMTUpIgogICBzb2RpcG9kaTpkb2NuYW1lPSJzZWFyY2guc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMTU2NzQiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJiYXNlIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnpvb209IjMuOTU5Nzk4IgogICAgIGlua3NjYXBlOmN4PSI1Mi4zOTQzMDEiCiAgICAgaW5rc2NhcGU6Y3k9IjY2LjY2OTUyOSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0ibW0iCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIGlua3NjYXBlOmRvY3VtZW50LXJvdGF0aW9uPSIwIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE5MjAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTE0NSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMjgiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgLz4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGExNTY3NyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iQ2FscXVlIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxnCiAgICAgICBpZD0iZzE2NDIwIgogICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC44MTE1MDI5MywwLjIxMDg3NTA4KSI+CiAgICAgIDxsaW5lCiAgICAgICAgIGZpbGw9Im5vbmUiCiAgICAgICAgIHN0cm9rZT0iIzNhNThkOCIKICAgICAgICAgc3Ryb2tlLXdpZHRoPSIzLjU3NzU0IgogICAgICAgICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgICAgICAgIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIKICAgICAgICAgeDE9IjIuMDQzNjYwNiIKICAgICAgICAgeTE9IjI0LjQzMzkxNiIKICAgICAgICAgeDI9IjkuNDg3MjAyNiIKICAgICAgICAgeTI9IjE2Ljk5MDM3NCIKICAgICAgICAgaWQ9ImxpbmU0NTg0IgogICAgICAgICBzdHlsZT0ic3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW9wYWNpdHk6MSIgLz4KICAgICAgPGcKICAgICAgICAgaWQ9Imc0NTkwIgogICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjI2NDU4MzMzLDAsMCwwLjI2NDU4MzMzLC0zNzQuNTIzNSwtNjQ3Ljc4NjYpIj4KICAgICAgICA8cGF0aAogICAgICAgICAgIGQ9Im0gMTUwOS4zNzEsMjQ4OS4xMjkgYyAtMC4wMzksNi4xOTYgLTAuOTk2LDExLjYzOSAtMi44NjksMTYuMzI2IC0xLjg3Myw0LjY4NyAtNC40MjEsOC42MDcgLTcuNjQyLDExLjc1NSAtMy4yMjMsMy4xNDkgLTcuMDQ5LDUuNTA5IC0xMS40NzksNy4wODMgLTQuNDMsMS41NzQgLTkuMTg4LDIuMzQ2IC0xNC4yNjksMi4zMTUgLTQuOTQ0LC0wLjAzIC05LjYwMywtMC44NTkgLTEzLjk3OSwtMi40ODcgLTQuMzc3LC0xLjYyOCAtOC4xOTIsLTQuMDMzIC0xMS40NDQsLTcuMjI0IC0zLjI1MywtMy4xODcgLTUuODA0LC03LjEzNyAtNy42NTUsLTExLjg0NyAtMS44NTEsLTQuNzEgLTIuNzU3LC0xMC4xNjQgLTIuNzIxLC0xNi4zNjEgMC4wMzksLTYuMTk1IDEuMDQ1LC0xMS42MzcgMy4wMjQsLTE2LjMyNCAxLjk3OCwtNC42ODggNC42MjksLTguNjIxIDcuOTU3LC0xMS44MDUgMy4zMjYsLTMuMTgyIDcuMTY5LC01LjU2MSAxMS41MywtNy4xMzcgNC4zNjEsLTEuNTc0IDguOTQ1LC0yLjM0NiAxMy43NDksLTIuMzE2IDQuOTQzLDAuMDI5IDkuNjAxLDAuODU3IDEzLjk3OSwyLjQ4NiA0LjM3NSwxLjYyOSA4LjE4OCw0LjA1NSAxMS40NDIsNy4yNzYgMy4yNTIsMy4yMjIgNS44MDUsNy4xODggNy42NTYsMTEuODk5IDEuODUxLDQuNzEzIDIuNzU4LDEwLjE2NSAyLjcyMSwxNi4zNjEgeiBtIC01NS4yNDQsLTAuMzM3IGMgLTAuMDIyLDMuNTUxIDAuMzkyLDYuNzU4IDEuMjQ3LDkuNjE2IDAuODU0LDIuODYgMi4wOSw1LjMyMiAzLjcxNSw3LjM4NSAxLjYyMywyLjA2NCAzLjYxNCwzLjY2MiA1Ljk3Myw0Ljc4NyAyLjM2LDEuMTMgNS4wNzQsMS43MDMgOC4xMzcsMS43MjEgMi45OTIsMC4wMiA1LjY5NSwtMC41MiA4LjEwMywtMS42MjEgMi40MTEsLTEuMDk5IDQuNDM3LC0yLjY3IDYuMDg2LC00LjcxNSAxLjY0OSwtMi4wNDEgMi45MTYsLTQuNDg4IDMuODA1LC03LjMzOSAwLjg4NiwtMi44NDggMS4zNDMsLTYuMDQ5IDEuMzY0LC05LjYwMSAwLjAyMSwtMy41NDkgLTAuMzk2LC02Ljc3MiAtMS4yNDcsLTkuNjY2IC0wLjg1NCwtMi44OTUgLTIuMDkyLC01LjM3MiAtMy43MTQsLTcuNDM4IC0xLjYyNCwtMi4wNjIgLTMuNjMxLC0zLjY1OSAtNi4wMjksLTQuNzg5IC0yLjM5NSwtMS4xMjcgLTUuMDkxLC0xLjcwMSAtOC4wODIsLTEuNzIxIC0zLjA2NCwtMC4wMTggLTUuNzg0LDAuNTM5IC04LjE1NiwxLjY3NCAtMi4zNzQsMS4xMzUgLTQuMzg1LDIuNzI2IC02LjAzMyw0Ljc2OCAtMS42NSwyLjA0NSAtMi45MTcsNC41MDkgLTMuODA1LDcuMzkzIC0wLjg5LDIuODg1IC0xLjM0Myw2LjA2NyAtMS4zNjQsOS41NDYgeiIKICAgICAgICAgICBpZD0icGF0aDQ1ODgiIC8+CiAgICAgIDwvZz4KICAgICAgPGNpcmNsZQogICAgICAgICBmaWxsPSIjZmYyMzI2IgogICAgICAgICBjeD0iMTUuMjQ0NTMzIgogICAgICAgICBjeT0iMTAuNjk2NDU0IgogICAgICAgICByPSIxLjcyMTkwODMiCiAgICAgICAgIGlkPSJjaXJjbGU0NTk0IgogICAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjI2NDU4MyIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=);
background-position: center;
background-repeat: no-repeat;
background-size: contain; }
background-size: contain;
background-color: transparent; }
@media (max-width: 654px) {
header[role="banner"] #block-materiosapisearchblock {
padding: 0 1em;
background-color: #69cdcf; }
body:not(.path-base) header[role="banner"] #block-materiosapisearchblock {
display: none; } }
aside.messages {
padding: 0; }
@@ -20116,6 +20138,32 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name-
padding: 0;
display: inline-block;
vertical-align: top; }
@media (max-width: 654px) {
.cards-list > ul {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
width: 100%; }
.cards-list > ul > li {
flex: 0 1 48%;
margin: 0 0 0.5em 0; }
.cards-list > ul > li > article {
width: 100%;
height: auto; }
.cards-list > ul > li > article > section.images {
height: auto; }
.cards-list > ul > li > article > section.images > figure {
position: relative; }
.cards-list > ul > li > article > section.images > figure:not(:first-child) {
display: none; }
.cards-list > ul > li > article > section.images > figure img:not(.blank) {
width: 100%;
height: auto; }
.cards-list > ul > li > article > section.images > figure img.blank {
top: 0;
bottom: 0;
left: 0;
right: 0; } }
article.card {
position: relative;

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

File diff suppressed because one or more lines are too long

85
web/themes/custom/materiotheme/assets/img/search.svg Normal file
View File

@@ -0,0 +1,85 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="27mm"
height="27mm"
viewBox="0 0 27 27"
version="1.1"
id="svg15680"
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
sodipodi:docname="search.svg">
<defs
id="defs15674" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="52.394301"
inkscape:cy="66.669529"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
inkscape:document-rotation="0"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1145"
inkscape:window-x="0"
inkscape:window-y="28"
inkscape:window-maximized="1" />
<metadata
id="metadata15677">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g16420"
transform="translate(0.81150293,0.21087508)">
<line
fill="none"
stroke="#3a58d8"
stroke-width="3.57754"
stroke-linecap="round"
stroke-miterlimit="10"
x1="2.0436606"
y1="24.433916"
x2="9.4872026"
y2="16.990374"
id="line4584"
style="stroke:#000000;stroke-opacity:1" />
<g
id="g4590"
transform="matrix(0.26458333,0,0,0.26458333,-374.5235,-647.7866)">
<path
d="m 1509.371,2489.129 c -0.039,6.196 -0.996,11.639 -2.869,16.326 -1.873,4.687 -4.421,8.607 -7.642,11.755 -3.223,3.149 -7.049,5.509 -11.479,7.083 -4.43,1.574 -9.188,2.346 -14.269,2.315 -4.944,-0.03 -9.603,-0.859 -13.979,-2.487 -4.377,-1.628 -8.192,-4.033 -11.444,-7.224 -3.253,-3.187 -5.804,-7.137 -7.655,-11.847 -1.851,-4.71 -2.757,-10.164 -2.721,-16.361 0.039,-6.195 1.045,-11.637 3.024,-16.324 1.978,-4.688 4.629,-8.621 7.957,-11.805 3.326,-3.182 7.169,-5.561 11.53,-7.137 4.361,-1.574 8.945,-2.346 13.749,-2.316 4.943,0.029 9.601,0.857 13.979,2.486 4.375,1.629 8.188,4.055 11.442,7.276 3.252,3.222 5.805,7.188 7.656,11.899 1.851,4.713 2.758,10.165 2.721,16.361 z m -55.244,-0.337 c -0.022,3.551 0.392,6.758 1.247,9.616 0.854,2.86 2.09,5.322 3.715,7.385 1.623,2.064 3.614,3.662 5.973,4.787 2.36,1.13 5.074,1.703 8.137,1.721 2.992,0.02 5.695,-0.52 8.103,-1.621 2.411,-1.099 4.437,-2.67 6.086,-4.715 1.649,-2.041 2.916,-4.488 3.805,-7.339 0.886,-2.848 1.343,-6.049 1.364,-9.601 0.021,-3.549 -0.396,-6.772 -1.247,-9.666 -0.854,-2.895 -2.092,-5.372 -3.714,-7.438 -1.624,-2.062 -3.631,-3.659 -6.029,-4.789 -2.395,-1.127 -5.091,-1.701 -8.082,-1.721 -3.064,-0.018 -5.784,0.539 -8.156,1.674 -2.374,1.135 -4.385,2.726 -6.033,4.768 -1.65,2.045 -2.917,4.509 -3.805,7.393 -0.89,2.885 -1.343,6.067 -1.364,9.546 z"
id="path4588" />
</g>
<circle
fill="#ff2326"
cx="15.244533"
cy="10.696454"
r="1.7219083"
id="circle4594"
style="fill:#000000;fill-opacity:1;stroke-width:0.264583" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

13
web/themes/custom/materiotheme/assets/scripts/main.js
View File

@@ -96,6 +96,7 @@ import { MA } from 'vuejs/api/ma-axios'
initVSiteBrandingBlock()
initVPagetitleBlock()
initVHeaderMenu()
initHamburgerMenu()
initVMainContent()
initVSearchBlock()
initVLeftContent()
@@ -167,6 +168,10 @@ import { MA } from 'vuejs/api/ma-axios'
document.querySelector('body').classList.add(...classes)
updateLanguageLinksBlock(to.path);
// close the hamburger menu
store.dispatch('Common/openCloseHamMenu', false)
// trigger router
next()
})
@@ -300,6 +305,14 @@ import { MA } from 'vuejs/api/ma-axios'
}).$mount('#' + id)
}
function initHamburgerMenu(){
const input = document.querySelector('input#header-block-right-toggle')
input.addEventListener('change', (e) => {
console.log("block header right toggle", e, this);
store.dispatch('Common/openCloseHamMenu', e.currentTarget.checked)
})
}
function initVMainContent () {
const id = 'main-content'
const $main_content = document.querySelector('#' + id)

34
web/themes/custom/materiotheme/assets/styles/base/_layout.scss
View File

@@ -151,21 +151,28 @@ header[role="banner"]{
display:block;
}
// default position (hidden, translated right)
$w: 20em;
.header-block-wrapper{
z-index: 10;
z-index: 100;
position: absolute;
top: $min-height;
$w: 300px;
width: $w;
right: - $w - 150px;
right:0;
// right: - $w - 150px;
box-sizing: border-box;
// transform: translateX(150px);
transition: right 0.5s ease-in-out;
// transform: translateX(450px);
overflow: hidden;
width:0.1px;
box-shadow: 0 0 0 #fff;
padding:1em 0;
margin-top: 0.7em;
transition: all 0.5s ease-in-out;
>*.block, >div#user-tools{
display: block;
padding:0 0 0.5em 0!important;
margin:0 0 0.5em 0!important;
width: $w - 2em;
padding:0 0 1em 0!important;
margin:0 0 1em 0!important;
text-align: right;
border-left: none!important;
border-right: none!important;
@@ -173,11 +180,20 @@ header[role="banner"]{
border-bottom: 1px solid #ccc!important;
}
}
#user-flags{
width: $w - 2em;
padding:1em 0 0 0!important;
margin:1em 0 0 0!important;
border-top: 1px solid #ccc!important;
}
}
// input checked, wrapper visible
input#header-block-right-toggle:checked ~ div.header-block-wrapper {
// transform: translateX(1px);
right:1px;
// right:1px;
width: $w;
padding:1em 1em;
box-shadow: -2px 2px 4px #ccc;
}
}
}

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

@@ -11,9 +11,9 @@ $mdi-font-path: './mdi/fonts/';
@import './base/fonts';
// @import './base/responsive';
html{
// background-color: red;
}
// .dialog-off-canvas-main-canvas{
// background-color: red;
// }
@mixin iconMDI($name) {
&::before {
@@ -54,6 +54,10 @@ header[role="banner"]{
font-weight: 400;
}
// @include col-mediaquery-max(3){
// overflow-x: hidden;
// }
#block-sitebranding{
h1{
margin:0;
@@ -77,9 +81,11 @@ header[role="banner"]{
@include col-mediaquery-max(3){
.header-block.header-right{
.header-block-wrapper{
padding:1em 1em;
box-shadow: -2px 2px 4px #ccc;
background-color: #fff;
&, #user-flags ul{
// background-color: #222;
// color: #fff;
background-color: #fff;
}
}
}
}
@@ -496,13 +502,15 @@ header[role="banner"]{
align-self: flex-end;
}
@include col-mediaquery-max(3){
flex-direction: column-reverse;
flex-direction: column;
justify-content:center;
#block-pagetitle{
width: max-content;
// width: max-content;
width:100%;
}
#block-materiosapisearchblock{
box-sizing: border-box;
width:100%;
}
}
@@ -513,8 +521,9 @@ header[role="banner"]{
@include col-mediaquery-max(3){
body.path-frontpage &, body.path-home & {
display: none;
display: none;
}
padding: 1em 0 0;
}
h2{
margin:0;
@@ -574,13 +583,21 @@ header[role="banner"]{
width:20px; height:20px;
margin:0;
// border-radius: 7px;
background-image: url('../img/search.png');
background-image: url('../img/search.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-color: transparent
}
}
@include col-mediaquery-max(3){
body:not(.path-base) &{
display: none;
}
padding: 0 1em;
background-color: $color-base;
}
}
}
@@ -1202,6 +1219,38 @@ article.node--type-frontpage{
vertical-align: top;
}
}
@include col-mediaquery-max(3){
&>ul{
display: flex;
flex-flow: row wrap;
justify-content: space-around;
width:100%;
>li{
flex: 0 1 48%;
margin:0 0 0.5em 0;
>article{
width:100%;
height:auto;
>section.images{
height: auto;
>figure{
position: relative;
&:not(:first-child){
display:none;
}
img:not(.blank){
width:100%;
height:auto;
}
img.blank{
top:0; bottom:0; left:0; right:0;
}
}
}
}
}
}
}
}
article.card{

10
web/themes/custom/materiotheme/materiotheme.theme
View File

@@ -61,6 +61,16 @@ function materiotheme_preprocess_html(&$vars) {
$vars['page']['#attached']['html_head'][] = [$description, 'description'];
$viewport = array(
'#tag' => 'meta',
'#attributes' => array(
'name' => 'viewport',
'content' => 'width=device-width, initial-scale=1, maximum-scale=1',
),
);
$vars['page']['#attached']['html_head'][] = [$viewport, 'viewport'];
// drupal_add_html_head($viewport, 'viewport');
// $gv = [
// '#tag' => 'meta',
// '#attributes' => [

4
web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue
View File

@@ -22,7 +22,8 @@ export default {
},
methods: {
...mapActions({
userLogin: 'User/userLogin'
userLogin: 'User/userLogin',
openCloseHamMenu: 'Common/openCloseHamMenu'
}),
login () {
this.userLogin({
@@ -30,6 +31,7 @@ export default {
pass: this.password
}).then(() => {
console.log("LoginBlock user logged-in")
this.openCloseHamMenu(false)
this.$router.push({
name: 'base'
})

4
web/themes/custom/materiotheme/vuejs/components/Content/HeaderMenu.vue
View File

@@ -34,6 +34,9 @@ export default {
}
},
methods: {
// ...mapActions({
// openCloseHamMenu: 'Common/openCloseHamMenu'
// }),
compileTemplate(){
this.template = Vue.compile(this.html)
},
@@ -50,6 +53,7 @@ export default {
onclick (event) {
// console.log("Clicked on header menu link", event);
const href = event.target.getAttribute('href')
// this.openCloseHamMenu(false)
this.$router.push(href)
}
},

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

@@ -73,7 +73,8 @@ export default {
...mapActions({
createFlagColl: 'User/createFlagColl',
deleteFlagColl: 'User/deleteFlagColl',
openFlagColl: 'User/openFlagColl'
openFlagColl: 'User/openFlagColl',
openCloseHamMenu: 'Common/openCloseHamMenu'
}),
onCreateFlagColl () {
console.log("UserFlags onCreateFlagColl", this.new_folder_name)
@@ -136,6 +137,7 @@ export default {
onOpenFlagColl (flagcollid) {
// const flagcollid = e.target.getAttribute('flagcollid');
console.log("UserFlags onOpenFlagColl", flagcollid);
this.openCloseHamMenu(false)
this.openFlagColl(flagcollid)
.then(() => {
// console.log("onDeleteFlagColl then", data);

13
web/themes/custom/materiotheme/vuejs/store/modules/common.js
View File

@@ -7,7 +7,8 @@ export default {
// initial state
state: {
pagetitle: null
pagetitle: null,
hamburgerMenuToggle: document.querySelector('input#header-block-right-toggle')
},
// getters
@@ -18,10 +19,18 @@ export default {
setPagetitle (state, title) {
console.log('Common, setPagetitle', title)
state.pagetitle = title
},
setHamMenuState (state, s){
state.hamburgerMenuToggle.checked = s
}
},
// actions
actions: {}
actions: {
openCloseHamMenu ({ dispatch, commit, state }, s) {
console.log('openCloseHamMenu', s)
commit('setHamMenuState', s)
}
}
}