diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 3295b2d..4491558 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -4195,7 +4195,7 @@ main { #ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .views-field-body-1 { font-family: "gilroy-light"; } -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row p { +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .views-field-body-1 p { font-size: 0.5rem; } #ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .views-field-field-mots-clefs { @@ -4238,99 +4238,57 @@ main { #ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .views-field-field-documents { margin-top: 0.5rem; } -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-documentation .field_body, -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-documentation .field_field_images { - display: none; -} -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource { +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row { display: grid; grid-template-columns: 1fr 1.2fr; grid-template-rows: repeat(5 1fr); margin-top: 1rem; } -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource .field_field_images { +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-images, +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-video { grid-column: 1; grid-row: 1/span 5; padding: 0 1rem 1rem 1rem; } -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource .field_field_images img { - width: 100%; +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-images iframe, +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-video iframe { + width: 80%; height: auto; aspect-ratio: 1/1; - object-fit: cover; border-radius: 9px; } -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource .field_title, #ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource h2 { +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-title-1 { margin-top: 0; } -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource .field_title, -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource .field_field_sous_titre, -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource .field_field_author, -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource .field_field_date_ressource, -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource .field_body, -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource .field_field_mots_clefs, -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource .field_field_site, -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource .field_field_documents, -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource .field_field_liens { +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-title-1, +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-sous-titre-1, +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-author, +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-date-ressource, +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-body-1, +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-mots-clefs, +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-site, +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-documents, +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Podcast .views-row .views-field-field-liens { grid-column: 2; } -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-vidéo .content-ressource { +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Vidéo .views-row { + width: 43%; margin: 1rem; + justify-content: space-between; } -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-vidéo .field_body { - opacity: 1 !important; - transform: none !important; +@media (max-width: 810px) { + #ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Vidéo .views-row { + width: 100%; + } } -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-vidéo a img { +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Vidéo .views-row img { max-width: 100%; height: auto; object-fit: cover; border-radius: 9px; } -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource { - display: flex; - flex-direction: column; - align-items: center; - background-color: rgb(7, 50, 194); - color: white; - padding: 1rem 3rem; -} -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .field_title { - display: none; -} -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .field_field_sous_titre { - text-align: center; - font-size: 0.9rem; - font-family: "gilroy-light"; - color: white; -} -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .field_body { - text-align: center; - font-size: 0.7rem; - font-family: "gilroy-light"; -} -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .field_field_liens { - width: fit-content; -} -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .field_field_liens a { - display: flex; - flex-direction: row; - padding-left: 0.5rem; - display: inline-flex; - align-items: center; - color: white; - background: black; - text-transform: uppercase; - font-size: 0.6rem; -} -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .field_field_liens a svg { - display: none; -} -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .field_field_liens a::after { - display: inline-flex; - content: url("../img/noun-arrow-to-right.svg"); - padding-right: 0.2rem; - padding-left: 0.2rem; +#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Vidéo .views-row iframe { + border-radius: 9px; } #ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-podcast) { width: 50%; @@ -4348,18 +4306,16 @@ main { width: 50%; } } -#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-vidéo) { - width: 50%; -} -@media (max-width: 810px) { - #ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-vidéo) { - width: 100%; - } -} #ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-Kit-de-communication) { width: 100%; } +.type-documentation .views-field-body-1, +.type-documentation .views-field-field-images, +.type-documentation .views-field-field-video { + display: none; +} + #actualites main { background-color: white; padding-bottom: 0; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss index 2791f61..e7112d3 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss @@ -107,7 +107,6 @@ .views-row{ - // width: 30%; font-size: 0.5rem; margin-bottom: 1rem; .views-field-title-1, @@ -119,11 +118,8 @@ } .views-field-body-1{ font-family: "gilroy-light"; + p{font-size: 0.5rem;} } - - p{ - font-size: 0.5rem; - } .views-field-field-mots-clefs{ margin-top: 0.5rem; display: flex; @@ -176,117 +172,71 @@ } - .type-documentation{ - .field_body, - .field_field_images{ - display: none; + + } + &.type-Podcast{ + .views-row{ + display: grid; + grid-template-columns: 1fr 1.2fr; + grid-template-rows: repeat(5 1fr); + margin-top: 1rem; + .views-field-field-images, + .views-field-field-video { + grid-column: 1; + grid-row: 1 /span 5; + padding: 0 1rem 1rem 1rem; + iframe{ + width: 80%; + height: auto; + aspect-ratio: 1 / 1; + border-radius: 9px; + } + // img{ + // width: 100%; + // height: auto; + // aspect-ratio: 1 / 1; + // object-fit: cover; + // border-radius: 9px; + // } } + .views-field-title-1{ + margin-top: 0; + } + .views-field-title-1, + .views-field-field-sous-titre-1, + .views-field-field-author, + .views-field-field-date-ressource, + .views-field-body-1, + .views-field-field-mots-clefs, + .views-field-field-site, + .views-field-field-documents, + .views-field-field-liens{ + grid-column: 2; + + } + } - - - .type-podcast{ - .content-ressource{ - display: grid; - grid-template-columns: 1fr 1.2fr; - grid-template-rows: repeat(5 1fr); - margin-top: 1rem; - .field_field_images{ - grid-column: 1; - grid-row: 1 /span 5; - padding: 0 1rem 1rem 1rem; - img{ - width: 100%; - height: auto; - aspect-ratio: 1 / 1; - object-fit: cover; - border-radius: 9px; - } - } - .field_title, h2{ - margin-top: 0; - } - .field_title, - .field_field_sous_titre, - .field_field_author, - .field_field_date_ressource, - .field_body, - .field_field_mots_clefs, - .field_field_site, - .field_field_documents, - .field_field_liens{ - grid-column: 2; - - } - + + } + &.type-Vidéo{ + .views-row{ + width: 43%; + margin: 1rem; + justify-content: space-between; + @media(max-width: 810px){ + width: 100%; } - - } - .type-vidéo{ - .content-ressource{ - margin: 1rem; - } - .field_body{ - opacity: 1 !important; - transform: none !important; - } - a img{ + img{ max-width: 100%; height: auto; object-fit: cover; border-radius: 9px; } - } - .type-kit-de-communication{ - div.content-ressource{ - display: flex; - flex-direction: column; - align-items: center; - background-color: $blue_QDD; - color: white; - padding: 1rem 3rem; - - .field_title{ - display: none; - } - .field_field_sous_titre{ - text-align: center; - font-size: 0.9rem; - font-family: 'gilroy-light'; - color: white; - } - .field_body{ - text-align: center; - font-size: 0.7rem; - font-family: 'gilroy-light'; - } - .field_field_liens{ - width: fit-content; - a{ - display: flex; - flex-direction: row; - padding-left: 0.5rem; - display: inline-flex; - align-items: center; - color: white; - background: black; - text-transform: uppercase; - font-size: 0.6rem; - svg{ - display: none; - } - &::after{ - display: inline-flex; - content: url("../img/noun-arrow-to-right.svg"); - padding-right: 0.2rem; - padding-left: 0.2rem; - } - } - } + iframe{ + border-radius: 9px; } } } - - .views-row:has(.type-podcast){ width: 50%; @media(max-width: 810px){ @@ -299,11 +249,8 @@ width: 50%; } } - .views-row:has(.type-vidéo){ - width: 50%; - @media(max-width: 810px){ - width: 100%; - } + .type-vidéo{ + } .views-row:has(.type-Kit-de-communication){ width: 100%; @@ -320,3 +267,65 @@ } } } + + +.type-documentation{ + .views-field-body-1, + .views-field-field-images, + .views-field-field-video { + display: none; + } +} + + + + +// .type-kit-de-communication{ +// div.content-ressource{ +// display: flex; +// flex-direction: column; +// align-items: center; +// background-color: $blue_QDD; +// color: white; +// padding: 1rem 3rem; + +// .field_title{ +// display: none; +// } +// .field_field_sous_titre{ +// text-align: center; +// font-size: 0.9rem; +// font-family: 'gilroy-light'; +// color: white; +// } +// .field_body{ +// text-align: center; +// font-size: 0.7rem; +// font-family: 'gilroy-light'; +// } +// .field_field_liens{ +// width: fit-content; +// a{ +// display: flex; +// flex-direction: row; +// padding-left: 0.5rem; +// display: inline-flex; +// align-items: center; +// color: white; +// background: black; +// text-transform: uppercase; +// font-size: 0.6rem; +// svg{ +// display: none; +// } +// &::after{ +// display: inline-flex; +// content: url("../img/noun-arrow-to-right.svg"); +// padding-right: 0.2rem; +// padding-left: 0.2rem; +// } +// } +// } +// } +// } +