From 858f63ce9789d69a9eecfa03811e467f0eb30cae Mon Sep 17 00:00:00 2001 From: HeleneCreusot Date: Thu, 12 Dec 2024 15:32:35 +0100 Subject: [PATCH 1/3] feat(theme istex banniere): baniere et triptyque charte istex --- src/app/custom/themes/istex/Readme.md | 14 +-- .../themes/istex/css/istex-internalclass.css | 113 ++++++++++-------- .../themes/istex/css/istex-linksclass.css | 8 +- 3 files changed, 75 insertions(+), 60 deletions(-) diff --git a/src/app/custom/themes/istex/Readme.md b/src/app/custom/themes/istex/Readme.md index f63b4feaf..62ffc37f6 100644 --- a/src/app/custom/themes/istex/Readme.md +++ b/src/app/custom/themes/istex/Readme.md @@ -15,8 +15,6 @@ ![Capture d’écran 2024-12-09 154944](https://github.com/user-attachments/assets/0ba1d554-081c-4cb0-98bf-2424f74fb933) - - # Class css internes : Usage Les class internes permettent de jouer la charte Istex sur les éléments Lodex. @@ -55,7 +53,6 @@ Ressource principale ![Clipboard01](https://github.com/user-attachments/assets/075525a1-52a8-4ba6-bb0c-6efc541cbd1f) - #### le bloc de présentation du site - **designHomeContentSidebar** @@ -65,15 +62,14 @@ Ce bloc _designHomeContentSidebar_ est composé de deux blocs : - **designHomeContent** contenant lui-même - - **ListePave : affichage en bloc cliquable des données de syndication ou autres (liste arks) + + - **ListePave** : affichage en bloc cliquable des données de syndication ou autres (liste arks) + ![image](https://github.com/user-attachments/assets/b09fe55c-e4d0-467e-a046-879e30e9e019) + - **designHomeSidebar** contenant lui-même - **designHomeCompteur** : compteur nb outils - **designfilter** : filtre bleuté sur img licence - -**ListePave** dans HomeContent -![image](https://github.com/user-attachments/assets/b09fe55c-e4d0-467e-a046-879e30e9e019) - #### les bannières et le triptyque @@ -83,7 +79,7 @@ Ce bloc _designHomeContentSidebar_ est composé de deux blocs : - **designHomeTriptyque** : ce bloc est composé de trois blocs qui eux même sont composés des éléments bloc icone, texte, nombre, titre,... -##Insertion capture +-> voir les bannières (en developpement) sur [design-istex.fr](http://viwp4.intra.inist.fr:40260/bannieres/) ### Ressource principale diff --git a/src/app/custom/themes/istex/css/istex-internalclass.css b/src/app/custom/themes/istex/css/istex-internalclass.css index b184597ea..e19693e1a 100644 --- a/src/app/custom/themes/istex/css/istex-internalclass.css +++ b/src/app/custom/themes/istex/css/istex-internalclass.css @@ -196,89 +196,105 @@ div[class*='HomeCompteur'] div.content { /* Home bottom */ /* bannieres */ /*******************/ +.dataset-characteristics div.property[class*='Banniere'] { + position: relative; + width: 100% !important; +} +/*si elle est en fin de homepage*/ +.dataset-characteristics div.property[class*='Banniere']:last-child { + margin: 0 0 !important; +} +/*si elle vient après homecontentsidebar*/ +.dataset-characteristics + > div + > div.property[class*='HomeContentSidebar'] + + div + + div.property[class*='Banniere'] { + margin-top: -1.5rem !important; +} +div.property[class*='Banniere'] > .property_value_container div.MuiBox-root { + padding: 0 0 !important; +} +div.property[class*='Banniere'] + > .property_value_container + > div.MuiBox-root + > div + > div { + flex-direction: column !important; + height: 25rem; + padding: 3rem; +} +div[class*='Banniere'] div.MuiBox-root > div * { + margin: 0 auto; + color: var(--secondary-contrast-text); +} /*******************/ /* BanniereSimple */ /* img full screen */ /*******************/ -div[class*='designHomeBanniereSimple'] { - width: 100vw !important; +div[class*='BanniereSimple'] { background-image: var(--banniereSimpleUrl); background-position: center 27%; background-size: cover; background-repeat: no-repeat; - margin: 0 0 !important; -} -div[class*='designHomeBanniereSimple'] div.MuiBox-root { - margin: 0 0 !important; - padding: 0 0 !important; -} -div[class*='designHomeBanniereSimple'] div.MuiBox-root > div { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 0 auto 1rem; } -div[class*='designHomeBanniereSimple'] > .property_value_container { - width: 100%; - height: 25rem; +div[class*='BanniereSimple'] div.MuiBox-root { max-width: var(--maxWidth); - margin: 0 auto; + margin: 0 auto !important; + padding: 0 0 !important; } -div[class*='designHomeBanniereSimple'] .property { - margin: 0 0 !important; +div[class*='BanniereSimple'] div.MuiBox-root > div * { + text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); } -div[class*='designHomeBanniereSimple'] * { - color: var(--secondary-contrast-text) !important; - margin: 0; +div.property[class*='Banniere'] + > .property_value_container + > div.MuiBox-root + > div + > div { + justify-content: space-around; } -div[class*='designHomeBanniereSimple'] h2 { +#content div[class*='BanniereSimple'] h2 { color: var(--info-main) !important; margin-bottom: 0 !important; + text-align: center !important; + text-shadow: 0px 0px 1px rgba(256, 256, 256, 1); } -/* a est un bouton secondaire*/ +/* a est un bouton primaire*/ /*******************/ /* BanniereDouble */ /* img + texte */ /*******************/ -div.property[class*='designHomeBanniereDoubleImageTexte'] { +div.property[class*='BanniereDouble'] { background-color: var(--primary-main); - margin-top: -1.5rem; - width: 100%; background-image: var(--banniereDoubleUrl); background-size: 50%; background-position: left; background-repeat: no-repeat; } -div.property[class*='designHomeBanniereDoubleImageTexte'] - div:is(.property_value_container, .property, .MuiBox-root) { - margin: 0 auto !important; - padding: 0 0 !important; -} -div.property[class*='designHomeBanniereDoubleImageTexte'] +div.property[class*='BanniereDouble'] > .property_value_container > div.MuiBox-root > div - > div.property_value { - float: right; + > div { max-width: 600px !important; width: 50%; - padding: 4rem; - color: var(--contrast-light) !important; + margin: 0 0 0 auto; + background-color: var(--primary-main); + justify-content: flex-start; } -div.property[class*='designHomeBanniereDoubleImageTexte'] .property_value h2 { +div.property[class*='BanniereDouble'] .property_value h2 { color: var(--contrast-light) !important; + margin-bottom: 2rem !important; } /**************/ /* triptyque */ /**************/ -#content - #home-page - .dataset-characteristics - div.property[class*='designHomeTryptique'] - div { +div.property[class*='Tryptique'] { + transform: translateY(-5.5rem); +} +div.property[class*='Tryptique'] div.MuiBox-root { margin: 0 0; padding: 0 0; } @@ -290,24 +306,22 @@ div.property[class*='designHomeBanniereDoubleImageTexte'] .property_value h2 { > div.MuiBox-root > div > div { - position: relative; z-index: 1000; - top: -10rem; display: flex; justify-content: center; align-items: flex-start; - width: 1200px; + max-width: var(--maxWidth); } div.property[class*='designHomeTryptique'] .property[class*='compose'] { width: 33.3%; max-width: 400px; - height: auto; color: var(--contrast-light); - height: 250px; + height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; + padding: 24px; } div.property[class*='designHomeTryptique'] .property[class*='Triptyque1'] { background-color: var(--primary-main); @@ -404,7 +418,6 @@ div[class*='Exergue'] { box-shadow: 0px 0px 20px var(--neutral-main); padding: 3rem 3rem; margin: 2rem 0; - } div[class*='Exergue'] p { margin: 0 auto 1.5rem; diff --git a/src/app/custom/themes/istex/css/istex-linksclass.css b/src/app/custom/themes/istex/css/istex-linksclass.css index 58be6249f..87f79d450 100644 --- a/src/app/custom/themes/istex/css/istex-linksclass.css +++ b/src/app/custom/themes/istex/css/istex-linksclass.css @@ -219,6 +219,10 @@ div[class*='ButtonPrimary'] } /* Bouton Secondaire lodex - MODAL */ + +/*page search 'voir plus de résultats*/ +/*MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-fullWidth MuiButtonBase-root css-1y2dusp-MuiButtonBase-root-MuiButton-root*/ +button.css-1y2dusp-MuiButtonBase-root-MuiButton-root, div[class*='ButtonSecondary'] div[class*='property_value'] :is(button, a):not([class*='HomeSidebar']) { @@ -228,6 +232,7 @@ div[class*='ButtonSecondary'] box-shadow: none !important; text-decoration: none; } +button.css-1y2dusp-MuiButtonBase-root-MuiButton-root:is(:hover, :focus), div[class*='ButtonSecondary'] div[class*='property_value'] :is(button, a):is(:hover, :focus):not([class*='HomeSidebar']) { @@ -235,6 +240,7 @@ div[class*='ButtonSecondary'] color: var(--contrast-main) !important; border: 1px solid transparent !important; } +button.css-1y2dusp-MuiButtonBase-root-MuiButton-root:is(:active), div[class*='ButtonSecondary'] div[class*='property_value'] :is(button, a):is(:active):not([class*='HomeSidebar']) { @@ -247,7 +253,7 @@ div[class*='ButtonSecondary'] button[class*='css-m9dicq'] { margin: 0 0.5rem; } -buttonbutton:is([class*='css-w9y1zr'], [class*='css-m9dicq']), +button:is([class*='css-w9y1zr'], [class*='css-m9dicq'], [class*='css-z37ji6']), div[class*='ButtonShadow'] div[class*='property_value'] :is(button, a):not([class*='HomeSidebar']) { From 58f03c092cccf8bc52b453cd0a2516dd10267acf Mon Sep 17 00:00:00 2001 From: HeleneCreusot Date: Thu, 12 Dec 2024 15:39:28 +0100 Subject: [PATCH 2/3] =?UTF-8?q?docs(doc=20bannieres=20et=20tryptique):=20c?= =?UTF-8?q?es=20blocs=20sont=20compos=C3=A9s=20de=20bloc=20compos=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/custom/themes/istex/Readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/custom/themes/istex/Readme.md b/src/app/custom/themes/istex/Readme.md index 62ffc37f6..c36aed316 100644 --- a/src/app/custom/themes/istex/Readme.md +++ b/src/app/custom/themes/istex/Readme.md @@ -73,9 +73,9 @@ Ce bloc _designHomeContentSidebar_ est composé de deux blocs : #### les bannières et le triptyque -- **designHomeBanniereSimple** : istex texte sur img pleine page +- **designHomeBanniereSimple** : composé de surtitre titre texte et bouton sur img pleine page -- **designHomeBanniereDouble** : istex img + texte à droite +- **designHomeBanniereDouble** : bloc avec bg img composé d'un titre d'une description et éventuellement d'un bouton - **designHomeTriptyque** : ce bloc est composé de trois blocs qui eux même sont composés des éléments bloc icone, texte, nombre, titre,... From 422288c93ea64f9a1da91548d5b24270316be50d Mon Sep 17 00:00:00 2001 From: HeleneCreusot Date: Thu, 12 Dec 2024 15:44:05 +0100 Subject: [PATCH 3/3] =?UTF-8?q?docs(triptyque=20pr=C3=A9cision=20sur=20sa?= =?UTF-8?q?=20composition):=20class=20internes=20triptyque1=20triptyque2?= =?UTF-8?q?=20triptyque3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/custom/themes/istex/Readme.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/custom/themes/istex/Readme.md b/src/app/custom/themes/istex/Readme.md index c36aed316..03b99e68d 100644 --- a/src/app/custom/themes/istex/Readme.md +++ b/src/app/custom/themes/istex/Readme.md @@ -73,11 +73,13 @@ Ce bloc _designHomeContentSidebar_ est composé de deux blocs : #### les bannières et le triptyque -- **designHomeBanniereSimple** : composé de surtitre titre texte et bouton sur img pleine page +- **designHomeBanniereSimple** : composé de **surtitre** **titre** **texte** et bouton (voir CI button) sur img pleine page -- **designHomeBanniereDouble** : bloc avec bg img composé d'un titre d'une description et éventuellement d'un bouton +- **designHomeBanniereDouble** : bloc avec bg img composé d'un **titre** d'une **description** et éventuellement d'un bouton -- **designHomeTriptyque** : ce bloc est composé de trois blocs qui eux même sont composés des éléments bloc icone, texte, nombre, titre,... +- **designHomeTriptyque** bloc composé de trois blocs: + -- **tryptique1**, **tryptique2**, **tryptique3** + qui eux même sont composés des éléments bloc icone, texte, nombre, titre,... -> voir les bannières (en developpement) sur [design-istex.fr](http://viwp4.intra.inist.fr:40260/bannieres/)