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

home page - sliders

Browse Source
This commit is contained in:
armansansd
2021-07-01 16:59:41 +02:00
parent bccbd6e279
commit 85696e31d7
10 changed files with 459 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -999,6 +999,42 @@ table {
.slick-arrow.slick-hidden {
display: none; }
.programme-2 .views-field-field-programme .field-content {
background: blue; }
.programme-2 .views-field {
color: blue; }
.programme-3 .views-field-field-programme .field-content {
background: blue; }
.programme-3 .views-field {
color: blue; }
.programme-4 .views-field-field-programme .field-content {
background: wheat; }
.programme-4 .views-field {
color: wheat; }
.programme-5 .views-field-field-programme .field-content {
background: wheat; }
.programme-5 .views-field {
color: wheat; }
.programme-7 .views-field-field-programme .field-content {
background: red; }
.programme-7 .views-field {
color: red; }
.programme-6 .views-field-field-programme .field-content {
background: red; }
.programme-6 .views-field {
color: red; }
@media (min-width: 48rem) {
:root {
font-size: calc(1rem + ((1vw - .48rem) * 1.389));
@@ -1162,6 +1198,9 @@ main h2 {
a {
color: inherit; }
strong {
font-weight: 600; }
iframe {
display: none; }
@@ -1172,6 +1211,9 @@ iframe {
row-gap: 1rem; }
/*pages*/
header {
margin-bottom: 2rem; }
#header-top {
height: 3rem;
background: white; }
@@ -1212,19 +1254,19 @@ iframe {
display: inline-block;
width: auto;
padding: .2rem .5rem; }
.header_top_middle_container .popsu-node-3 .views-field-title {
.header_top_middle_container .programme-3 .views-field-title {
color: blue; }
.header_top_middle_container .popsu-node-3 .views-field-title:hover {
.header_top_middle_container .programme-3 .views-field-title:hover {
background: blue;
color: white; }
.header_top_middle_container .popsu-node-5 .views-field-title {
.header_top_middle_container .programme-5 .views-field-title {
color: wheat; }
.header_top_middle_container .popsu-node-5 .views-field-title:hover {
.header_top_middle_container .programme-5 .views-field-title:hover {
background: wheat;
color: white; }
.header_top_middle_container .popsu-node-7 .views-field-title {
.header_top_middle_container .programme-7 .views-field-title {
color: red; }
.header_top_middle_container .popsu-node-7 .views-field-title:hover {
.header_top_middle_container .programme-7 .views-field-title:hover {
background: red;
color: white; }
@@ -1342,9 +1384,124 @@ footer {
color: transparent;
background: left/contain no-repeat url(../images/yt.svg); }
.last-news .slick-slide, .last-ressources .slick-slide {
margin: 0 1rem; }
.last-news .slick-arrow, .last-ressources .slick-arrow {
position: absolute;
height: 100%;
cursor: pointer;
z-index: 100;
background-color: white;
opacity: 0;
transition: opacity 250ms;
width: 10%; }
.last-news .slick-arrow:hover, .last-ressources .slick-arrow:hover {
opacity: .5; }
.last-news .slick-next, .last-ressources .slick-next {
right: 0;
top: 0; }
.last-news .views-row, .last-ressources .views-row {
display: grid !important;
grid-template-columns: 1fr;
position: relative;
height: auto; }
.last-news .views-row .views-field-field-image, .last-ressources .views-row .views-field-field-image {
grid-column: 1;
grid-row: 1 / span 4;
z-index: -1;
padding-top: 1rem; }
.last-news .views-row .views-field:not(.views-field-field-image), .last-ressources .views-row .views-field:not(.views-field-field-image) {
background: blue;
width: 50%;
margin-left: 1rem;
padding-left: 1rem; }
.last-news .views-row .views-field-title, .last-ressources .views-row .views-field-title {
padding-bottom: 1rem;
grid-column: 1;
grid-row: 3;
font-weight: 600; }
.last-news .views-row .views-field-view-node, .last-ressources .views-row .views-field-view-node {
padding-top: 1rem;
grid-column: 1;
grid-row: 1; }
.last-news .views-row .views-field-field-programme, .last-ressources .views-row .views-field-field-programme {
text-transform: uppercase;
grid-column: 1;
grid-row: 2; }
.last-news .views-row a, .last-ressources .views-row a {
text-decoration: none; }
.about {
background: lightblue;
text-align: center; }
background: #98d0d9;
text-align: center;
padding: 18rem 0 3rem 0;
margin-top: -15rem; }
.about article h2 {
font-family: "duke" !important;
font-size: 1.6rem;
color: black;
font-weight: 400; }
.about article h2 a {
text-decoration: none; }
.about article h3 {
color: black; }
.about article div {
margin: 0 5%; }
#home_blocks-block_3 {
background: #98d0d9;
padding: 2rem; }
#home_blocks-block_3 h2 {
text-align: center;
margin: 0 0 1rem 0; }
#home_blocks-block_3 .last-ressources .views-field:not(.views-field-field-image) {
width: 80%; }
#home_blocks-block_3 .last-ressources .views-row {
display: grid !important;
grid-template-columns: 1fr 1fr;
align-items: center;
background: white;
position: relative;
height: auto;
padding: 1rem;
background-clip: content-box; }
#home_blocks-block_3 .last-ressources .views-field-field-image {
grid-row: 3 / span 2;
margin-top: -1.5rem;
z-index: 0;
padding: .5rem; }
#home_blocks-block_3 .last-ressources .views-field:not(.views-field-field-image) {
background: transparent;
width: auto;
margin-left: 0;
padding-left: 0; }
#home_blocks-block_3 .last-ressources .views-field-title {
font-weight: 600;
grid-row: 3 / span 1;
grid-column: 2 / span 1; }
#home_blocks-block_3 .last-ressources .views-field-view-node {
grid-row: 2 / span 1;
grid-column: 2 / span 1; }
#home_blocks-block_3 .last-ressources .views-field-field-programme {
padding-left: .5rem !important;
grid-row: 1 / span 1;
grid-column: 1 / span 2;
text-transform: uppercase;
margin-top: -.5rem; }
#home_blocks-block_3 .last-ressources .views-field-field-programme .field-content {
display: inline-block;
width: auto;
background-color: blue !important;
padding: .3rem .5rem; }
#home_blocks-block_3 .last-ressources .views-field-field-programme .field-content {
font-weight: 600;
display: inline-block;
width: auto;
color: white;
padding: .02rem .3rem; }
.path-centre-de-ressources {
background-color: #f8f8fb; }
@@ -1393,7 +1550,8 @@ footer {
display: grid;
column-gap: 1rem;
row-gap: 1rem;
grid-template-columns: calc(10% - 3em) repeat(3, 27.3%); }
grid-template-columns: calc(10% - 3em) repeat(3, 27.3%);
align-items: flex-start; }
.path-centre-de-ressources .views-view-grid .views-row .views-col:first-child {
grid-column-start: 2; }
.path-centre-de-ressources .views-view-grid .views-col {
@@ -1401,7 +1559,6 @@ footer {
grid-template-columns: 40% 60%;
grid-auto-rows: min-content;
background-color: white;
background-clip: content-box;
width: 100% !important;
padding: .3rem; }
.path-centre-de-ressources .views-view-grid .views-col a {
@@ -1411,7 +1568,8 @@ footer {
.path-centre-de-ressources .views-view-grid .views-col .views-field:not(:first-child) {
padding: 0 0 0 .4rem; }
.path-centre-de-ressources .views-view-grid .views-col .views-field-field-image {
grid-row: 2 / span 2; }
grid-row: 3 / span 2;
margin-top: -1.5rem; }
.path-centre-de-ressources .views-view-grid .views-col .views-field-field-programme {
grid-row: 1 / span 1;
grid-column: 1 / span 2; }
@@ -1420,9 +1578,10 @@ footer {
display: inline-block;
width: auto;
color: white;
background: red;
padding: .15rem .3rem;
margin-bottom: 1rem; }
.path-centre-de-ressources .views-view-grid .views-col .views-field-field-theme .field-content {
color: black; }
.path-centre-de-ressources .views-view-grid .views-col .views-field-field-type-de-ressource {
text-transform: uppercase;
font-weight: 600;

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/js/main.js
View File

File diff suppressed because one or more lines are too long

15
web/themes/custom/popsu/lib/script.js
View File

@@ -2,8 +2,19 @@ import 'slick-carousel';
$(function(){
console.log("$ ready !!");
$('.last-news').slick();
$('.last-ressources').slick();
$('.last-news').slick({
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding: '60px',
});
$('.last-ressources').slick({
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
centerPadding: '60px',
infinite: false,
});
$('.close-block').click(function(){
$(this).parent().fadeOut();

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

@@ -17,7 +17,7 @@ function popsu_preprocess_views_view_unformatted(&$variables) {
foreach ($rows as $id => $row) {
$variables['rows'][$id]['attributes'] = new Attribute();
$c = $variables['rows'][$id]['content']["#row"]->nid;
$variables['rows'][$id]['attributes']->addClass("popsu-node-".$c);
$variables['rows'][$id]['attributes']->addClass("programme-".$c);
}
}
@@ -38,9 +38,29 @@ function popsu_preprocess_region(&$variables) {
* Implements hook_preprocess_page().
*/
// function popsu_preprocess_page(&$variables){
// $rows = $variables['rows'];
// }
function popsu_preprocess_views_view(&$variables){
$vars = $variables;
if(isset($variables['css_class']) && $variables['css_class'] == 'last-news'){
$rows =& $variables['rows'];
foreach ($rows as $i => &$row ){
foreach ($row['#rows'] as $j => &$elem) {
$entity = $elem["#row"]->_entity;
if ($entity->hasField('field_programme')) {
$prog_id = $entity->get('field_programme')->getString();
$class = "programme-".$prog_id;
$attributes = array(
"class" => $class
);
}
// $elem['id'] = new Attribute("socks");
//$elem['attributes']->addClass($class);
}
}
}
}
function popsu_preprocess_views_view_grid(&$variables){
// we pass all variables by reference

159
web/themes/custom/popsu/sass/pages/_home.scss
View File

@@ -1,7 +1,158 @@
.last-news, .last-ressources{
.slick-slide{
margin: 0 1rem;
}
.slick-arrow{
position: absolute;
height: 100%;
cursor: pointer;
z-index: 100;
background-color: white;
opacity: 0;
transition: opacity 250ms;
width: 10%;
&:hover{
opacity: .5;
}
}
.slick-next{
right: 0;
top: 0;
}
.views-row{
display: grid !important;
grid-template-columns: 1fr;
// flex-direction: column;
// flex-direction: column-reverse;
position: relative;
height: auto;
.views-field-field-image{
grid-column: 1;
grid-row: 1 / span 4;
z-index: -1;
padding-top: 1rem;
}
.views-field:not(.views-field-field-image){
background: blue;
width: 50%;
margin-left: 1rem;
padding-left: 1rem;
}
.views-field-title{
padding-bottom: 1rem;
grid-column: 1;
grid-row: 3;
font-weight: 600;
}
.views-field-view-node{
padding-top: 1rem;
grid-column: 1;
grid-row: 1;
}
.views-field-field-programme{
text-transform: uppercase;
grid-column: 1;
grid-row: 2;
}
a{
text-decoration: none;
}
}
}
.about{
background: lightblue;
text-align: center;
background: $lightblue;
text-align: center;
padding: 18rem 0 3rem 0;
margin-top: -15rem;
article{
h2{
font-family: "duke" !important;
font-size: $font-large;
color:black;
font-weight: 400;
a{
text-decoration: none;
}
}
h3{
color: black;
}
div{
margin: 0 5%;
}
}
}
#home_blocks-block_3{
background: $lightblue;
padding: 2rem;
h2{
text-align: center;
margin: 0 0 1rem 0;
}
.last-ressources{
.views-field:not(.views-field-field-image){
width: 80%;
}
.views-row{
display: grid !important;
grid-template-columns: 1fr 1fr;
align-items: center;
background: white;
position: relative;
height: auto;
padding: 1rem;
background-clip: content-box;
}
.views-field-field-image{
grid-row: 3 / span 2;
margin-top: -1.5rem;
z-index: 0;
padding: .5rem;
}
.views-field:not(.views-field-field-image){
background: transparent;
width: auto;
margin-left: 0;
padding-left: 0;
}
.views-field-title{
font-weight: 600;
grid-row: 3 / span 1;
grid-column: 2 / span 1;
}
.views-field-view-node{
// padding-top: 1rem;
// grid-column: 1;
// grid-row: 1;
grid-row: 2 / span 1;
grid-column: 2 / span 1;
}
.views-field-field-programme{
.field-content{
display: inline-block;
width: auto;
background-color: blue !important;
padding: .3rem .5rem;
}
padding-left: .5rem !important;
grid-row: 1 / span 1;
grid-column: 1 / span 2;
text-transform: uppercase;
margin-top: -.5rem;
.field-content{
font-weight: 600;
display: inline-block;
width: auto;
color: white;
padding: .02rem .3rem;
// margin-bottom: 1rem;
}
}
}
}

18
web/themes/custom/popsu/sass/pages/_ressources.scss
View File

@@ -3,13 +3,13 @@
.content_container{
&>div>h2:first-child{
text-align: center;
background-color: #98d0d9;
background-color: $lightblue;
padding: 1rem 0;
}
}
form{
background-color: #98d0d9;
background-color: $lightblue;
display: grid;
padding: 0 0 5rem 0;
column-gap: 1rem;
@@ -67,6 +67,7 @@
column-gap: 1rem;
row-gap: 1rem;
grid-template-columns: calc(10% - 3em) repeat(3, 27.3%);
align-items: flex-start;
.views-col:first-child{
grid-column-start: 2;
}
@@ -83,14 +84,15 @@
}
}
background-color: rgb(255, 255, 255);
background-clip: content-box;
// background-clip: content-box;
width: 100% !important;
padding: .3rem;
.views-field:not(:first-child){
padding: 0 0 0 .4rem;
}
.views-field-field-image{
grid-row: 2 / span 2;
grid-row: 3 / span 2;
margin-top: -1.5rem;
}
@@ -102,12 +104,16 @@
display: inline-block;
width: auto;
color: white;
background: red;
padding: .15rem .3rem;
margin-bottom: 1rem;
}
}
.views-field-field-theme{
.field-content{
color:black;
}
}
.views-field-field-type-de-ressource{
text-transform: uppercase;
font-weight: 600;
@@ -136,6 +142,8 @@
}
}
}
.js-pager__items{

9
web/themes/custom/popsu/sass/pages/partials/_header_footer.scss
View File

@@ -1,4 +1,7 @@
//header
header{
margin-bottom: 2rem;
}
#header-top{
height: 3rem;
background: white;
@@ -53,7 +56,7 @@
}
}
.popsu-node-3{
.programme-3{
.views-field-title{
color: $col-eur;
&:hover{
@@ -62,7 +65,7 @@
}
}
}
.popsu-node-5{
.programme-5{
.views-field-title{
color: $col-mond;
&:hover{
@@ -71,7 +74,7 @@
}
}
}
.popsu-node-7{
.programme-7{
.views-field-title{
color: $col-met;
&:hover{

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

@@ -15,6 +15,10 @@ a{
color:inherit;
}
strong{
font-weight: 600;
}
//TEMP
iframe{
display: none;

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

@@ -8,6 +8,77 @@ $font-small: .45rem;
$col-met: red;
$col-eur: blue;
$col-mond: wheat;
$lightblue: #98d0d9;
//programmes values
.programme-2{
.views-field-field-programme{
.field-content{
background: $col-eur;
}
}
.views-field{
color: $col-eur;
}
}
.programme-3{
.views-field-field-programme{
.field-content{
background: $col-eur;
}
}
.views-field{
color: $col-eur;
}
}
.programme-4{
.views-field-field-programme{
.field-content{
background: $col-mond;
}
}
.views-field{
color: $col-mond;
}
}
.programme-5{
.views-field-field-programme{
.field-content{
background: $col-mond;
}
}
.views-field{
color: $col-mond;
}
}
.programme-7{
.views-field-field-programme{
.field-content{
background: $col-met;
}
}
.views-field{
color: $col-met;
}
}
.programme-6{
.views-field-field-programme{
.field-content{
background: $col-met;
}
}
.views-field{
color: $col-met;
}
}
@media (min-width: 48rem) {
:root {
font-size: calc(1rem + ((1vw - .48rem) * 1.389));