added showrooms pages, made page-title color
This commit is contained in:
@@ -1174,7 +1174,10 @@ header[role="banner"] {
|
||||
header[role="banner"] #block-header ul.menu {
|
||||
margin: 0; }
|
||||
header[role="banner"] #block-header ul.menu li {
|
||||
padding: 0; }
|
||||
padding: 0;
|
||||
display: inline-block; }
|
||||
header[role="banner"] #block-header ul.menu li:not(:first-of-type) {
|
||||
margin-left: 0.5em; }
|
||||
header[role="banner"] #block-languageswitcher {
|
||||
text-align: right; }
|
||||
header[role="banner"] #block-languageswitcher h2 {
|
||||
@@ -1221,6 +1224,17 @@ header[role="banner"] {
|
||||
font-size: 1.512em;
|
||||
text-transform: capitalize;
|
||||
font-weight: 300; }
|
||||
body:not(.path-home) header[role="banner"] #block-pagetitle h2 {
|
||||
padding: 0.5em 1em; }
|
||||
body.path-blabla header[role="banner"] #block-pagetitle h2 {
|
||||
color: #fff;
|
||||
background-color: #9458aa; }
|
||||
body.path-showrooms header[role="banner"] #block-pagetitle h2 {
|
||||
color: #fff;
|
||||
background-color: #50aa3c; }
|
||||
body.path-base header[role="banner"] #block-pagetitle h2 {
|
||||
color: #fff;
|
||||
background-color: #69cdcf; }
|
||||
header[role="banner"] #block-materiosapisearchblock {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
@@ -1390,6 +1404,23 @@ article.node--type-frontpage .node__content > section.home-blabla {
|
||||
font-size: 0.756em;
|
||||
line-height: 0.9; }
|
||||
|
||||
#showrooms {
|
||||
width: calc(100% + 15px); }
|
||||
#showrooms article.showroom {
|
||||
width: 435px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0 15px 15px 0; }
|
||||
#showrooms article.showroom h1 {
|
||||
margin: 0;
|
||||
font-weight: 4; }
|
||||
#showrooms article.showroom p {
|
||||
margin: 0; }
|
||||
#showrooms article.showroom figure {
|
||||
margin: 0; }
|
||||
#showrooms article.showroom figure img {
|
||||
max-width: 100%; }
|
||||
|
||||
.infinite-loading-container .infinite-status-prompt i[class^="loading-"] {
|
||||
width: 15px;
|
||||
height: 15px; }
|
||||
|
||||
572
web/themes/custom/materiotheme/assets/dist/main.js
vendored
572
web/themes/custom/materiotheme/assets/dist/main.js
vendored
File diff suppressed because one or more lines are too long
@@ -55,9 +55,40 @@ import 'theme/assets/styles/main.scss'
|
||||
}
|
||||
|
||||
function initVRouter(){
|
||||
// we need this to update the title while using history nav
|
||||
// we need this to update the title and body classes while using history nav
|
||||
router.beforeEach((to, from, next) => {
|
||||
// console.log('router beforeEach to ', to);
|
||||
// commit new title to store
|
||||
store.commit('Common/setPagetitle', to.name != 'home' ? to.name : null)
|
||||
|
||||
// remove all path related body classes
|
||||
let body_classes = document.querySelector('body').classList;
|
||||
let classes_to_rm = [];
|
||||
for (var i = 0; i < body_classes.length; i++) {
|
||||
if(body_classes[i].startsWith('path-')){
|
||||
classes_to_rm.push(body_classes[i]);
|
||||
}
|
||||
}
|
||||
document.querySelector('body').classList.remove(...classes_to_rm);
|
||||
// add new path classes to body
|
||||
let classes = [];
|
||||
if(to.path == '/'){
|
||||
classes.push('path-home');
|
||||
}else{
|
||||
let path_parts = to.path.replace(/^\//, '').split('/');
|
||||
for (var i = 0; i < path_parts.length; i++) {
|
||||
if(i == 0){
|
||||
var c = "path-" + path_parts[i];
|
||||
}else if (path_parts[i] !== ''){
|
||||
var c = classes[i-1] +'-'+ path_parts[i];
|
||||
}
|
||||
classes.push(c)
|
||||
}
|
||||
|
||||
}
|
||||
document.querySelector('body').classList.add(...classes);
|
||||
|
||||
// trigger router
|
||||
next();
|
||||
})
|
||||
}
|
||||
@@ -157,7 +188,7 @@ import 'theme/assets/styles/main.scss'
|
||||
onclick(event){
|
||||
// console.log("Clicked on header menu link", event);
|
||||
let href = event.target.getAttribute('href');
|
||||
let title = event.target.innerText;
|
||||
// let title = event.target.innerText;
|
||||
// console.log("Clicked on header menu link : href", href);
|
||||
this.$router.push(href)
|
||||
// replaced by router.beforeEach
|
||||
|
||||
@@ -1 +1,5 @@
|
||||
$transparent-bg: rgba(255,255,255, 0.95);
|
||||
|
||||
$color-base:#69cdcf;
|
||||
$color-showrooms:#50aa3c;
|
||||
$color-blabla:#9458aa;
|
||||
|
||||
@@ -134,6 +134,10 @@ header[role="banner"]{
|
||||
margin:0;
|
||||
li{
|
||||
padding:0;
|
||||
display: inline-block;
|
||||
&:not(:first-of-type){
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
a{
|
||||
@extend %header-fs;
|
||||
}
|
||||
@@ -204,6 +208,24 @@ header[role="banner"]{
|
||||
font-size: 1.512em;
|
||||
text-transform: capitalize;
|
||||
font-weight: 300;
|
||||
|
||||
|
||||
|
||||
body:not(.path-home) & {
|
||||
padding:0.5em 1em;
|
||||
}
|
||||
body.path-blabla & {
|
||||
color: #fff;
|
||||
background-color: $color-blabla;
|
||||
}
|
||||
body.path-showrooms & {
|
||||
color: #fff;
|
||||
background-color: $color-showrooms;
|
||||
}
|
||||
body.path-base & {
|
||||
color: #fff;
|
||||
background-color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -320,7 +342,7 @@ article.node--type-frontpage{
|
||||
@extend %part-centered-layout;
|
||||
}
|
||||
&.home-database{
|
||||
background-color: #69cdcf;
|
||||
background-color: $color-base;
|
||||
@extend %part-columned-layout;
|
||||
.field--name-field-a-database{}
|
||||
.cards-list-home{
|
||||
@@ -357,7 +379,7 @@ article.node--type-frontpage{
|
||||
}
|
||||
}
|
||||
&.home-showrooms{
|
||||
background-color: #50aa3c;
|
||||
background-color: $color-showrooms;
|
||||
@extend %part-columned-layout;
|
||||
.field--name-field-showrooms{
|
||||
}
|
||||
@@ -408,7 +430,7 @@ article.node--type-frontpage{
|
||||
width:100%;
|
||||
box-sizing:border-box;
|
||||
padding:1em 0;
|
||||
background-color:#50aa3c;
|
||||
background-color:$color-showrooms;
|
||||
color: #fff;
|
||||
>*{
|
||||
// display: inline-block;
|
||||
@@ -424,7 +446,7 @@ article.node--type-frontpage{
|
||||
}
|
||||
}
|
||||
&.home-blabla{
|
||||
background-color: #9458aa;
|
||||
background-color: $color-blabla;
|
||||
@extend %part-columned-layout;
|
||||
|
||||
.cards-list-home{
|
||||
@@ -477,6 +499,34 @@ article.node--type-frontpage{
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ___ _
|
||||
// / __| |_ _____ __ ___ _ ___ ___ _ __ ___
|
||||
// \__ \ ' \/ _ \ V V / '_/ _ \/ _ \ ' \(_-<
|
||||
// |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/
|
||||
#showrooms{
|
||||
width: calc(100% + #{$column_goutiere});
|
||||
article.showroom{
|
||||
width: $column_width * 2 + $column_goutiere;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0 $column_goutiere $column_goutiere 0;
|
||||
|
||||
h1{
|
||||
margin:0;
|
||||
font-weight: 4;
|
||||
}
|
||||
p{ margin:0; }
|
||||
figure{
|
||||
margin:0;
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ___ _
|
||||
// / __|__ _ _ _ __| |___
|
||||
// | (__/ _` | '_/ _` (_-<
|
||||
|
||||
Reference in New Issue
Block a user