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

actus caroussel overflow....

This commit is contained in:
ouidade 2024-07-08 22:36:58 +02:00
parent 47dba3466b
commit 47792a44c0
8 changed files with 206 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

32
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -732,7 +732,7 @@ footer {
cursor: pointer;
background: transparent;
color: transparent;
top: -1rem;
top: -2rem;
-webkit-transform: translate(0, -1rem);
-ms-transform: translate(0, -1rem);
transform: translate(0, -1rem);
@ -977,7 +977,7 @@ footer {
#home * {
box-sizing: border-box;
}
#home .config_pages--type--deroulement {
#home .__container-deroulement {
background-color: #f3f5fc;
background-image: url(../../../dist/assets/img/pillier-1.svg);
background-repeat: no-repeat;
@ -985,14 +985,21 @@ footer {
background-position-x: -20%;
}
@media (max-width: 1090px) {
#home .config_pages--type--deroulement {
#home .__container-deroulement {
cursor: grab;
}
}
#home .__container-deroulement h2 {
width: fit-content;
margin: auto;
padding-top: 3rem;
font-size: 1.7rem;
font-weight: bold;
}
#home .timeline {
white-space: nowrap;
overflow: hidden;
padding-top: 10rem;
padding-top: 5rem;
padding-bottom: 4rem;
}
@media (max-width: 1090px) {
@ -1006,6 +1013,7 @@ footer {
margin: auto;
position: relative;
top: -115px;
padding-bottom: 2rem;
}
@media (max-width: 1090px) {
#home .timeline .__timeline-arrows {
@ -1020,9 +1028,6 @@ footer {
#home .timeline .__timeline-arrows button:hover {
opacity: 0.5;
}
#home .timeline .__timeline-arrows button svg {
padding: 0.5rem;
}
#home .timeline .__timeline-content {
width: 100vw;
padding-top: 7rem;
@ -1153,8 +1158,9 @@ footer {
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
font-size: 0.5rem;
font-weight: 800;
}
@media (max-width: 10900px) {
@media (max-width: 1090px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
font-size: 1rem;
}
@ -1176,10 +1182,11 @@ footer {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 3rem;
}
#actus-caroussel h2 {
width: fit-content;
padding-bottom: 0.6rem;
padding-bottom: 0.4rem;
margin-top: 3rem;
margin-bottom: 3rem;
font-size: 1.7rem;
@ -1193,7 +1200,7 @@ footer {
}
#actus-caroussel .content-actus .views-row {
width: 500px !important;
padding: 1rem;
padding: 2rem;
}
@media (max-width: 550px) {
#actus-caroussel .content-actus .views-row {
@ -1248,6 +1255,7 @@ footer {
color: red;
display: inline-flex;
align-items: center;
font-size: 0.6rem;
}
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_date::before {
content: url("../img/date-actu.svg");
@ -1261,6 +1269,10 @@ footer {
font-size: 0.8rem;
color: rgb(7, 50, 194);
}
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_body {
opacity: 1 !important;
transform: none !important;
}
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_body p {
margin: 0;
}

18
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@ -276,7 +276,23 @@ document.addEventListener('DOMContentLoaded', function() {
// slideshow home
/////////////////// caracteres body actus/////////////////////////
document.addEventListener('DOMContentLoaded', function() {
// Maximum number of characters to display
const maxChars = 140; // Adjust this value as needed
document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {
let text = paragraph.textContent.trim();
if (text.length > maxChars) {
let truncatedText = text.slice(0, maxChars) + '...';
paragraph.textContent = truncatedText;
}
});
});
//////////// slideshow home //////////////////////////
$(document).ready(function(){
$('.content-actus .view').slick({

1
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss
View File

@ -1,5 +1,4 @@
#page-node{
// .node-id-11{
.content_container{
width: 60%;
display: flex;

11
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
View File

@ -2,9 +2,10 @@
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 3rem;
h2{
width: fit-content;
padding-bottom: 0.6rem;
padding-bottom: 0.4rem;
margin-top: 3rem;
margin-bottom: 3rem;
font-size: 1.7rem;
@ -20,10 +21,10 @@
}
.views-row{
width: 500px !important;
padding: 2rem;
@media(max-width: 550px){
width: 296px !important;
}
padding: 1rem;
article.node-type-actualite{
display: flex;
flex-direction: column;
@ -68,6 +69,7 @@
color: red;
display: inline-flex;
align-items: center;
font-size: 0.6rem;
&::before{
content: url('../img/date-actu.svg');
padding-right: 0.2rem;
@ -86,7 +88,9 @@
}
}
.field_body{
// visibility: visible;
opacity: 1 !important;
transform: none !important;
p{
margin: 0;
}
@ -99,5 +103,6 @@
top: 60px;
}
}
}

2
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
View File

@ -76,7 +76,7 @@ $slick-opacity-not-active: 0.25 !default;
cursor: pointer;
background: transparent;
color: transparent;
top: -1rem;
top: -2rem;
-webkit-transform: translate(0, -1rem);
-ms-transform: translate(0, -1rem);
transform: translate(0, -1rem);

21
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@ -4,7 +4,7 @@
#home{
* { box-sizing: border-box; }
.config_pages--type--deroulement{
.__container-deroulement{
background-color: #f3f5fcff;
background-image: url(../../../dist/assets/img/pillier-1.svg);
background-repeat: no-repeat;
@ -13,12 +13,19 @@
@media(max-width:1090px){
cursor:grab;
}
h2{
width: fit-content;
margin: auto;
padding-top: 3rem;
font-size: 1.7rem;
font-weight: bold;
}
}
.timeline {
white-space: nowrap;
overflow: hidden;
padding-top: 10rem;
padding-top: 5rem;
padding-bottom: 4rem;
@media(max-width:1090px){
padding-top: 18rem;
@ -29,6 +36,7 @@
margin: auto;
position: relative;
top: -115px;
padding-bottom: 2rem;
@media(max-width:1090px){
top: -211px;
display: none;
@ -39,10 +47,10 @@
&:hover{
opacity: 0.5;
}
svg{
padding: 0.5rem;
// svg{
// padding: 0.5rem;
}
// }
}
}
.__timeline-content{
@ -179,7 +187,8 @@
min-width: 65%;
.field_field_titre{
font-size: 0.5rem;
@media(max-width:10900px){
font-weight: 800;
@media(max-width:1090px){
font-size: 1rem;
}
}

40
web/themes/custom/quartiers_de_demain/templates/block--config-pages--deroulement.html.twig Normal file
View File

@ -0,0 +1,40 @@
{#
/**
* @file
* Default theme implementation to display a block.
*
* Available variables:
* - plugin_id: The ID of the block implementation.
* - label: The configured label of the block if visible.
* - configuration: A list of the block's configuration values.
* - label: The configured label for the block.
* - label_display: The display settings for the label.
* - provider: The module or other provider that provided this block plugin.
* - Block plugin specific settings will also be stored here.
* - in_preview: Whether the plugin is being rendered in preview mode.
* - content: The content of this block.
* - attributes: array of HTML attributes populated by modules, intended to
* be added to the main container tag of this template.
* - id: A valid HTML ID and guaranteed unique.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* @see template_preprocess_block()
*
* @ingroup themeable
*/
#}
<div class="__container-deroulement"{{ attributes }}>
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
</div>