added showrooms pages, made page-title color

This commit is contained in:
2019-07-24 17:20:44 +02:00
parent 77154f04a3
commit f2d8c15c25
18 changed files with 1668 additions and 258 deletions

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

@@ -1 +1,5 @@
$transparent-bg: rgba(255,255,255, 0.95);
$color-base:#69cdcf;
$color-showrooms:#50aa3c;
$color-blabla:#9458aa;

View File

@@ -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%;
}
}
}
}
// ___ _
// / __|__ _ _ _ __| |___
// | (__/ _` | '_/ _` (_-<