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

added and designed home footer simplenews subscription

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2020-12-28 16:40:11 +01:00
parent 01bf726cca
commit 3cebce26e6
14 changed files with 464 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1096,58 +1096,58 @@ div.dialog-off-canvas-main-canvas {
body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs {
padding-top: 24px !important; }
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
margin: 0 auto; }
@media only screen and (max-width: 436px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 436px; } }
@media only screen and (min-width: 655px) and (max-width: 872px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 654px; } }
@media only screen and (min-width: 873px) and (max-width: 1090px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 872px; } }
@media only screen and (min-width: 1091px) and (max-width: 1308px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 1090px; } }
@media only screen and (min-width: 1309px) and (max-width: 1526px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 1308px; } }
@media only screen and (min-width: 1527px) and (max-width: 1744px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 1526px; } }
@media only screen and (min-width: 1745px) and (max-width: 1962px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 1744px; } }
@media only screen and (min-width: 1963px) and (max-width: 2180px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 1962px; } }
@media only screen and (min-width: 2181px) and (max-width: 2398px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 2180px; } }
@media only screen and (min-width: 2399px) and (max-width: 2616px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 2398px; } }
@media only screen and (min-width: 2617px) and (max-width: 2834px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 2616px; } }
@media only screen and (min-width: 2835px) and (max-width: 3052px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 2834px; } }
@media only screen and (min-width: 3053px) and (max-width: 3270px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 3052px; } }
@media only screen and (min-width: 3271px) and (max-width: 3488px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 3270px; } }
@media only screen and (min-width: 3489px) and (max-width: 3706px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 3488px; } }
@media only screen and (min-width: 3707px) and (max-width: 3924px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 3706px; } }
@media only screen and (min-width: 3925px) and (max-width: 4142px) {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
width: 3924px; } }
header[role="banner"] {
@@ -1607,7 +1607,7 @@ article.node--type-frontpage .node__content > section.home-showrooms {
article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item {
grid-row: 1;
opacity: 0;
transition: all 0.7s ease-out; }
transition: all 2s ease-out; }
article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item.active {
opacity: 1; }
article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term {
@@ -2029,3 +2029,29 @@ article.card {
#showrooms article.showroom figure img {
max-width: 100%; }
footer[role="contentinfo"] #block-materiosimplenewssubscription form {
display: flex;
flex-flow: row nowrap;
align-items: center;
font-size: 0.756em; }
footer[role="contentinfo"] #block-materiosimplenewssubscription form > * {
margin-right: 0.5em; }
footer[role="contentinfo"] #block-materiosimplenewssubscription form #edit-subscriptions {
display: flex;
flex-flow: row nowrap; }
footer[role="contentinfo"] #block-materiosimplenewssubscription form #edit-subscriptions > * {
margin-right: 0.5em;
display: flex;
flex-flow: row nowrap;
align-items: center; }
footer[role="contentinfo"] #block-materiosimplenewssubscription form #edit-mail-wrapper input[type="email"] {
width: 10em; }
footer[role="contentinfo"] #block-materiosimplenewssubscription form #edit-actions--2 input[type="submit"] {
border: none;
background: none;
background-color: #69cdcf;
border-radius: 5px;
color: #fff;
padding: 0.7em 1em;
font-weight: 700; }

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

File diff suppressed because one or more lines are too long

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

@@ -172,3 +172,14 @@ main[role="main"]{
}
}
}
// ___ _
// | __|__ ___| |_ ___ _ _
// | _/ _ \/ _ \ _/ -_) '_|
// |_|\___/\___/\__\___|_|
footer[role="contentinfo"]{
>.wrapper{
@extend %grided-width;
}
}

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

@@ -674,11 +674,9 @@ article.node--type-frontpage{
// top:0; left:0;
// width:100%; height:100%;
// overflow: hidden;
opacity: 0;
// transform: translateX(100%);
transition: all 0.7s ease-out;
transition: all 2s ease-out;
&.active{
opacity: 1;
// transform: translateX(0);
@@ -1319,3 +1317,50 @@ article.card{
}
}
// ___ _
// | __|__ ___| |_ ___ _ _
// | _/ _ \/ _ \ _/ -_) '_|
// |_|\___/\___/\__\___|_|
footer[role="contentinfo"]{
#block-materiosimplenewssubscription{
form{
display: flex;
flex-flow: row nowrap;
align-items: center;
font-size: 0.756em;
>*{
margin-right: 0.5em;
}
#edit-subscriptions{
display: flex;
flex-flow: row nowrap;
>*{
margin-right: 0.5em;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
}
#edit-mail-wrapper{
input[type="email"]{
width:10em;
}
}
#edit-actions--2{
input[type="submit"]{
border: none;
background: none;
background-color: $color-base;
border-radius: 5px;
color: #fff;
padding: 0.7em 1em;
font-weight: 700;
}
}
}
}
}

2
web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue
View File

@@ -91,7 +91,7 @@ export default {
this.showroomJ = 0
}
// in any case (re)launch the animation
this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);
this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 15000);
console.log('this.showroomInterval', this.showroomInterval);
this.switchShowroomCarroussel()
},