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

header et menu v0

Browse Source
This commit is contained in:
armansansd
2021-06-24 16:04:02 +02:00
parent c87d8dbf9b
commit e1c693f94c
10 changed files with 303 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
web/themes/custom/popsu/css/styles.css
View File

@@ -1162,34 +1162,98 @@ main h2 {
a {
color: inherit; }
.close-block, .open-block {
background: red;
cursor: pointer; }
iframe {
display: none; }
/*pages*/
#header-top {
height: 3rem; }
.header_top_left_container {
height: 3rem; }
.header_top_left_container #block-identitedusite {
height: 100%; }
.header_top_left_container > div:first-child {
height: 100%; }
.header_top_left_container #block-identitedusite a[rel~='home'] {
height: 100%;
display: block;
color: transparent;
background: left/contain no-repeat url(../images/popsu-home-logo.png); }
.header_top_left_container a[rel~='home'] {
height: 100%;
display: block;
color: transparent;
background: left/contain no-repeat url(../images/popsu-home-logo.png); }
.header_top_middle_container {
background: red; }
height: 100%; }
.header_top_middle_container .views-element-container {
height: 100%; }
.header_top_middle_container .views-element-container > div:first-child {
height: 100%; }
.header_top_middle_container .views-element-container > div:first-child > div:first-child {
height: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center; }
.header_top_middle_container .views-row {
text-align: center;
display: inline-block;
width: auto; }
.header_top_middle_container .views-row a {
text-transform: uppercase;
text-decoration: none;
font-weight: 600; }
.header_top_middle_container .views-row .views-field-title {
display: inline-block;
width: auto;
padding: .2rem .5rem; }
.header_top_middle_container .popsu-node-3 .views-field-title {
color: blue; }
.header_top_middle_container .popsu-node-3 .views-field-title:hover {
background: blue;
color: white; }
.header_top_middle_container .popsu-node-5 .views-field-title {
color: wheat; }
.header_top_middle_container .popsu-node-5 .views-field-title:hover {
background: wheat;
color: white; }
.header_top_middle_container .popsu-node-7 .views-field-title {
color: red; }
.header_top_middle_container .popsu-node-7 .views-field-title:hover {
background: red;
color: white; }
.close-block, .open-block {
cursor: pointer; }
.close-block span, .open-block span {
display: block;
width: 33px;
height: 2px;
position: relative;
background: black;
border-radius: 3px;
z-index: 1; }
.close-block {
padding-top: 1rem; }
.close-block span {
transform-origin: center; }
.close-block > div > span:first-child {
transform: translateY(57%) rotate(45deg); }
.close-block > div > span:nth-child(2) {
transform: rotate(-45deg); }
.open-block {
height: 100%;
display: grid;
align-items: center; }
.open-block span {
margin-bottom: 5px;
transform-origin: 4px 0px; }
#header-top-right .header_top_right_container {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #a1a1a1;
background: white;
display: none;
grid-template-columns: 5% 30% 30% 30% 5%;
grid-template-columns: 10% 25% 25% 30% 10%;
padding: 1rem 0;
z-index: 100;
line-height: 2; }
@@ -1205,21 +1269,12 @@ a {
margin-bottom: .3rem; }
#header-top-right .header_top_right_container .is-active {
font-weight: 800; }
#header-top-right .header_top_right_container #block-views-block-programmes-block-2-2 .views-row {
#header-top-right .header_top_right_container #block-views-block-programmes-block-2 .views-row {
width: 100%; }
footer * {
word-wrap: break-word; }
iframe {
display: none; }
/*pages*/
#header-top-right {
background: yellow; }
#header-top-right .views-row {
display: inline-block; }
.about {
background: lightblue;
text-align: center; }

2
web/themes/custom/popsu/css/styles.css.map
View File

File diff suppressed because one or more lines are too long

2
web/themes/custom/popsu/gulpfile.js
View File

@@ -77,7 +77,7 @@ gulp.task('packing', function () {
gulp.task('watch', function(){
livereload.listen();
gulp.watch('./sass/**/*.scss', ['sass']);
gulp.watch('./sass/**/**/*.scss', ['sass']);
gulp.watch('./lib/*.js', ['packing']);
gulp.watch(['./css/style.css', './**/*.twig', './js/*.js'], function (files){
livereload.changed(files)

83
web/themes/custom/popsu/popsu.theme
View File

@@ -53,49 +53,58 @@ function popsu_preprocess_region(&$variables) {
}
// function popsu_theme_suggestions_views_view_alter(array &$suggestions, array $variables) {
// $v = $variables;
// $suggestions[] = 'views_view__headerView';
// }
/**
* Implements hook_preprocess_block().
*/
// function popsu_preprocess_block(&$variables) {
// $t="t";
// }
function popsu_preprocess_views_view_field(&$variables){
// check if link to entoty option is true
$settings = $variables['field']->options['settings'];
if ($settings['link_to_entity']) {
// get the entity and build the classes
$entity = $variables['row']->_entity;
// build new classes
$new_classes = array(
$entity->getEntityTypeId(),
$entity->getEntityTypeId().'-'.$entity->bundle(),
$entity->getEntityTypeId().'-'.$entity->bundle().'-'.$entity->id()
);
// function popsu_preprocess_views_view_field(&$variables){
// // check if link to entoty option is true
// $settings = $variables['field']->options['settings'];
// if ($settings['link_to_entity']) {
// // get the entity and build the classes
// $entity = $variables['row']->_entity;
// // build new classes
// $new_classes = array(
// $entity->getEntityTypeId(),
// $entity->getEntityTypeId().'-'.$entity->bundle(),
// $entity->getEntityTypeId().'-'.$entity->bundle().'-'.$entity->id()
// );
// get the entity link and url
$link = $entity->toLink();
$url = $entity->toLink()->getUrl();
// // get the entity link and url
// $link = $entity->toLink();
// $url = $entity->toLink()->getUrl();
// set the active_class option to the url
$url->setOption('set_active_class', true);
// // set the active_class option to the url
// $url->setOption('set_active_class', true);
// add new classes to the url (without overwriting existing once)
$options = $url->getOptions();
if(isset($options['attributes']) && $attributes = $options['attributes']){
if(isset($attributes['class']) && $classes = $attributes['class']){
$attributes['class'] += $new_classes;
}else{
$attributes['class'] = $new_classes;
}
}else{
$attributes = array(
"class" => $new_classes
);
}
$url->setOption('attributes', $attributes);
// // add new classes to the url (without overwriting existing once)
// $options = $url->getOptions();
// if(isset($options['attributes']) && $attributes = $options['attributes']){
// if(isset($attributes['class']) && $classes = $attributes['class']){
// $attributes['class'] += $new_classes;
// }else{
// $attributes['class'] = $new_classes;
// }
// }else{
// $attributes = array(
// "class" => $new_classes
// );
// }
// $url->setOption('attributes', $attributes);
// update the url of the link
$link->setUrl($url);
// // update the url of the link
// $link->setUrl($url);
// overwrite the output
$variables['output'] = $link->toRenderable();
}
}
// // overwrite the output
// $variables['output'] = $link->toRenderable();
// }
// }

7
web/themes/custom/popsu/sass/pages/_header.scss
View File

@@ -1,7 +0,0 @@
#header-top-right{
background: yellow;
.views-row{
display: inline-block;
}
}

165
web/themes/custom/popsu/sass/pages/partials/_header_footer.scss Normal file
View File

@@ -0,0 +1,165 @@
//header
#header-top{
height: 3rem;
}
.header_top_left_container{
height: 100%;
&>div:first-child{
height: 100%;
}
a[rel~='home']{
height: 100%;
display: block;
color: transparent;
background: left / contain no-repeat url(../images/popsu-home-logo.png);
}
}
.header_top_middle_container{
height: 100%;
// solution to access views container
.views-element-container{
height: 100%;
&>div:first-child{
height: 100%;
&>div:first-child{
height: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
}
}
.views-row{
text-align: center;
display: inline-block;
width: auto;
a{
text-transform: uppercase;
text-decoration: none;
font-weight: 600;
}
.views-field-title{
display: inline-block;
width: auto;
padding: .2rem .5rem;
}
}
.popsu-node-3{
.views-field-title{
color: $col-eur;
&:hover{
background: $col-eur;
color:white;
}
}
}
.popsu-node-5{
.views-field-title{
color: $col-mond;
&:hover{
background: $col-mond;
color:white;
}
}
}
.popsu-node-7{
.views-field-title{
color: $col-met;
&:hover{
background: $col-met;
color:white;
}
}
}
}
.close-block, .open-block{
// background: red;
cursor:pointer;
span{
display: block;
width: 33px;
height: 2px;
position: relative;
background: black;
border-radius: 3px;
z-index: 1;
}
}
.close-block{
padding-top: 1rem;
span{
transform-origin: center;
}
&>div>span:first-child{
transform: translateY(57%)rotate(45deg);
}
&>div>span:nth-child(2){
transform: rotate(-45deg);
}
}
.open-block{
height: 100%;
display: grid;
align-items: center;
span{
margin-bottom: 5px;
transform-origin: 4px 0px;
}
}
#header-top-right{
.header_top_right_container{
position: absolute;
top: 0;
left: 0;
width: 100%;
background: white;
display: none;
grid-template-columns: 10% 25% 25% 30% 10%;
padding: 1rem 0;
z-index: 100;
line-height: 2;
nav{
grid-column-start: 2;
}
// padding: 1rem .5rem 1rem .5rem;
a{
text-decoration: none;
font-weight: 400;
&:hover{
text-decoration: underline;
}
}
h2{
font-weight: 100;
margin-bottom: .3rem;
}
.is-active{
font-weight: 800;
}
#block-views-block-programmes-block-2{
.views-row{
width: 100%;
}
}
}
}
// nav{
// // position: absolute;
// // display: none;
// }
//footer
footer{
*{
word-wrap: break-word;
}
}

90
web/themes/custom/popsu/sass/setup/_globals.scss
View File

@@ -14,96 +14,6 @@ main{
a{
color:inherit;
}
.close-block, .open-block{
background: red;
cursor:pointer;
}
//header
.header_top_left_container{
height: 3rem;
#block-identitedusite{
height: 100%;
// max-height: 5rem;
a[rel~='home']{
height: 100%;
display: block;
color: transparent;
background: left / contain no-repeat url(../images/popsu-home-logo.png);
}
}
}
.header_top_middle_container{
background: red;
// div{
// div{
// div:first-child{
// display: grid;
// grid-template-columns: repeat(3, 1fr);
// }
// }
// }
//how to access the view js id
.views-row{
display: inline-block;
width: auto;
}
}
#header-top-right{
.header_top_right_container{
position: absolute;
top: 0;
left: 0;
width: 100%;
background: rgb(161, 161, 161);
display: none;
grid-template-columns: 5% 30% 30% 30% 5%;
padding: 1rem 0;
z-index: 100;
line-height: 2;
nav{
grid-column-start: 2;
}
// padding: 1rem .5rem 1rem .5rem;
a{
text-decoration: none;
font-weight: 400;
&:hover{
text-decoration: underline;
}
}
h2{
font-weight: 100;
margin-bottom: .3rem;
}
.is-active{
font-weight: 800;
}
#block-views-block-programmes-block-2-2{
.views-row{
width: 100%;
}
}
}
}
nav{
// position: absolute;
// display: none;
}
//footer
footer{
*{
word-wrap: break-word;
}
}
//TEMP
iframe{

2
web/themes/custom/popsu/sass/setup/_variables.scss
View File

@@ -5,7 +5,7 @@ $font-normal: .6rem;
$col-met: red;
$col-eur: blue;
$col-reg: green;
$col-mond: wheat;
@media (min-width: 48rem) {
:root {
font-size: calc(1rem + ((1vw - .48rem) * 1.389));

4
web/themes/custom/popsu/sass/styles.scss
View File

@@ -24,6 +24,6 @@
@import "setup/globals";
/*pages*/
@import "pages/header";
@import "pages/partials/header_footer";
@import "pages/home";
@import "pages/default";
@import "pages/default";

11
web/themes/custom/popsu/templates/regions/region--header-top-right.html.twig
View File

@@ -18,11 +18,18 @@
<div{{ attributes }}>
{{ content }}
<div class="close-block" >
close
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="open-block" >
open
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
{% endif %}