bachir/drupal-reha
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design actus

Browse Source
This commit is contained in:
ouidade
2024-08-07 19:17:51 +02:00
parent 869db4c869
commit 1dc1b04302
6 changed files with 191 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/reha/dist/bundle.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
web/themes/custom/reha/dist/css/bundle.css
Vendored
+49 -31
View File
@@ -2544,72 +2544,78 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
margin: auto;
}
.block-views-blockactus-block-1 .view-id-actus .views-row {
width: 30vw !important;
width: 35vw !important;
margin-left: 1rem;
}
.block-views-blockactus-block-1 .view-id-actus .views-row:first-of-type {
padding-left: 15%;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite {
width: 84%;
display: flex;
flex-direction: column;
height: 100%;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite p.field__item {
display: none;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .image-actualite {
width: 80%;
height: 250px;
margin-left: 1rem;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .image-actualite .field--name-field-image {
height: 100%;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .image-actualite .field--name-field-image .field__items {
height: 100%;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .image-actualite .field--name-field-image .field__items .field__item {
width: 100%;
height: 100%;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .image-actualite .field--name-field-image .field__items .field__item img {
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu {
display: flex;
flex-direction: column;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu p.field__item {
display: none;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .image-actualite {
width: 75%;
height: 250px;
right: 10%;
position: relative;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .image-actualite .field--name-field-image {
height: 100%;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .image-actualite .field--name-field-image .field__items {
height: 100%;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .image-actualite .field--name-field-image .field__items .field__item {
width: 100%;
height: 100%;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .image-actualite .field--name-field-image .field__items .field__item img {
width: 100%;
height: auto;
object-fit: cover;
height: 100%;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content {
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .infos-content {
position: relative;
display: flex;
flex-direction: column;
border: solid #fdc300 1px;
background-color: rgb(255, 255, 255);
padding: 1rem;
width: 100%;
right: 0%;
height: auto;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content h2 {
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .infos-content h2 {
order: 2;
margin: 0;
font-size: 1.5rem;
font-weight: 600;
padding: 0;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content .field--name-field-sous-titre {
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .infos-content .field--name-field-sous-titre {
order: 3;
font-size: 1.3rem;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content .field--name-field-date {
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .infos-content .field--name-field-date {
order: 4;
font-weight: 900;
padding-bottom: 1rem;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content .field--name-field-type-d-actualite {
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .infos-content .field--name-field-type-d-actualite {
order: 1;
text-transform: uppercase;
font-size: 1.2rem;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content .field--name-field-site {
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .infos-content .field--name-field-site {
order: 5;
background-color: rgb(153, 147, 174);
color: white;
@@ -2617,18 +2623,18 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
width: fit-content;
padding: 0.2rem 0.9rem;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content .field--name-field-site .field__item {
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .infos-content .field--name-field-site .field__item {
display: inline;
color: white;
font-weight: 900;
font-size: 0.8rem;
vertical-align: top;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content ul.links {
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .infos-content ul.links {
order: 6;
display: none;
}
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .body-content {
.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .body-content {
display: none;
}
.block-views-blockactus-block-1 .view-id-actus .slick-dots {
@@ -3315,4 +3321,16 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
}
.page-mon-espace-de-travail .layout-content .js-form-type-textfield label {
margin-right: 1rem;
}
.page-actualites .node-type-actualite {
width: 30vw !important;
}
.page-actualites .node-type-actualite .entete_actu {
flex-direction: column;
}
.page-actualites .node-type-actualite .entete_actu .infos-content {
width: 100%;
height: 250px;
right: 0;
}
web/themes/custom/reha/js/reha.js
+45 -45
View File
@@ -135,13 +135,13 @@ jQuery(document).ready(function($){
$(document).ready(function(){
$('.view-id-actus.view-display-id-block_1 ').slick({
// slidesToShow: 1,
// slidesToScroll: 1,
slidesToShow: 1,
slidesToScroll: 1,
// dots: true,
arrows: true,
// centerMode: true,
draggable: true,
// centerPadding: '100px',
centerPadding: '100px',
responsive: [
{
breakpoint: 810,
@@ -188,53 +188,53 @@ jQuery(document).ready(function($){
// /////////////////
//// ancre dans texte au click parragraphe correspondant arrive en dessous du header
function adjustAnchor() {
var $anchor = $(window.location.hash); // Select the anchor element based on the hash in the URL
var fixedElementHeight = $('.block-region-first').outerHeight(); // Get the height of the sticky element
function adjustAnchor() {
var $anchor = $(window.location.hash); // Select the anchor element based on the hash in the URL
var fixedElementHeight = $('.block-region-first').outerHeight(); // Get the height of the sticky element
if ($anchor.length > 0) {
$('html, body').stop().animate({
scrollTop: $anchor.offset().top - fixedElementHeight // Adjust the scroll position to account for the sticky element height
}, 0);
}
}
// Call the function on page load if there's a hash
if (window.location.hash) {
adjustAnchor();
}
// Adjust the anchor on hash change
$(window).on('hashchange', function() {
adjustAnchor();
});
//////////////////////////////////////////
// menu ancre paragraphe quand actif
jQuery(function($) {
// Function to set the active class based on the current path
function setActiveLink() {
var path = window.location.href;
console.log(path);
$(".layout__region--first .block-region-first li a").each(function() {
if (this.href === path) {
$(this).closest('a').addClass('active');
}
});
if ($anchor.length > 0) {
$('html, body').stop().animate({
scrollTop: $anchor.offset().top - fixedElementHeight // Adjust the scroll position to account for the sticky element height
}, 0);
}
}
// Initially set the active link based on the current URL
setActiveLink();
// Call the function on page load if there's a hash
if (window.location.hash) {
adjustAnchor();
}
// Update the active link on click
$(".layout__region--first .block-region-first li a").on('click', function() {
$(".layout__region--first .block-region-first li a").removeClass('active');
$(this).addClass('active');
// Adjust the anchor on hash change
$(window).on('hashchange', function() {
adjustAnchor();
});
//////////////////////////////////////////
// menu ancre paragraphe quand actif
jQuery(function($) {
// Function to set the active class based on the current path
function setActiveLink() {
var path = window.location.href;
console.log(path);
$(".layout__region--first .block-region-first li a").each(function() {
if (this.href === path) {
$(this).closest('a').addClass('active');
}
});
}
// Initially set the active link based on the current URL
setActiveLink();
// Update the active link on click
$(".layout__region--first .block-region-first li a").on('click', function() {
$(".layout__region--first .block-region-first li a").removeClass('active');
$(this).addClass('active');
});
});
});
})(jQuery, window);
web/themes/custom/reha/scss/pages/home/home-view-actualites.scss
+81 -71
View File
@@ -16,92 +16,102 @@
width: 100%;
margin: auto;
.views-row{
width: 30vw !important;
width: 35vw !important;
margin-left: 1rem;
&:first-of-type{
padding-left: 15%;
}
.node-type-actualite{
width: 84%;
display: flex;
flex-direction: column;
width: 100%;
// display: flex;
// flex-direction: column;
height: 100%;
p.field__item{
display: none;
}
.image-actualite{
width: 80%;
height: 250px;
margin-left: 1rem;
.field--name-field-image{
height: 100%;
.field__items{
height: 100%;
.field__item{
width: 100%;
height: 100%;
img{
width: 100%;
height: auto;
object-fit: cover;
height: 100%;
}
}
}
}
}
.infos-content{
position: relative;
> .entete_actu{
display: flex;
flex-direction: column;
border: solid $yellow-puca 1px;
background-color: $white-button;
padding: 1rem;
h2{
order: 2;
margin: 0;
font-size: 1.5rem;
font-weight: 600;
padding: 0;;
p.field__item{
display: none;
}
.field--name-field-sous-titre {
order: 3;
font-size: 1.3rem;
.image-actualite{
width: 75%;
height: 250px;
right: 10%;
position: relative;
// margin-left: 1rem;
.field--name-field-image{
height: 100%;
.field__items{
height: 100%;
.field__item{
width: 100%;
height: 100%;
img{
width: 100%;
height: auto;
object-fit: cover;
height: 100%;
}
}
}
}
}
.field--name-field-date{
order: 4;
font-weight: 900;
padding-bottom: 1rem;
}
.field--name-field-type-d-actualite{
order: 1;
text-transform: uppercase;
font-size: 1.2rem;
}
.field--name-field-site{
order: 5;
background-color: $gris-violet;
color: white;
border-radius: 50px;
width: fit-content;
padding: 0.2rem 0.9rem;
.field__item{
display: inline;
color: white;
.infos-content{
position: relative;
display: flex;
flex-direction: column;
border: solid $yellow-puca 1px;
background-color: $white-button;
padding: 1rem;
width: 100%;
right: 0%;
height: auto;
h2{
order: 2;
margin: 0;
font-size: 1.5rem;
font-weight: 600;
padding: 0;;
}
.field--name-field-sous-titre {
order: 3;
font-size: 1.3rem;
}
.field--name-field-date{
order: 4;
font-weight: 900;
font-size: 0.8rem;
vertical-align: top;
}
padding-bottom: 1rem;
}
.field--name-field-type-d-actualite{
order: 1;
text-transform: uppercase;
font-size: 1.2rem;
}
.field--name-field-site{
order: 5;
background-color: $gris-violet;
color: white;
border-radius: 50px;
width: fit-content;
padding: 0.2rem 0.9rem;
.field__item{
display: inline;
color: white;
font-weight: 900;
font-size: 0.8rem;
vertical-align: top;
}
}
ul.links{
order: 6;
display: none;
}
}
ul.links{
order: 6;
.body-content{
display: none;
}
}
.body-content{
display: none;
}
}
}
.slick-dots{
web/themes/custom/reha/scss/pages/page-actualites.scss
+13
View File
@@ -0,0 +1,13 @@
.page-actualites{
.node-type-actualite{
width: 30vw !important;
.entete_actu{
flex-direction: column;
.infos-content{
width: 100%;
height: 250px;
right: 0;
}
}
}
}
web/themes/custom/reha/scss/reha.scss
+2 -1
View File
@@ -42,4 +42,5 @@
@import "pages/node-ressource";
@import "pages/actualites";
@import "pages/node-actualite";
@import "pages/page-mon-espace-de-travail";
@import "pages/page-mon-espace-de-travail";
@import "pages/page-actualites";