Merge pull request #2266 from Inist-CNRS/Istex-banniere-et-tryptique

bannieres et triptyque charte istex
Inist-CNRS · Dec 13, 2024 · 896845e · 896845e
2 parents edb698c + 422288c
commit 896845e
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 63 deletions.
diff --git 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,25 +62,26 @@ 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
 
--   **designHomeBanniereSimple** : istex texte sur img pleine page
+-   **designHomeBanniereSimple** : composé de **surtitre** **titre** **texte** et bouton (voir CI button) 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,...
+-   **designHomeTriptyque** bloc composé de trois blocs:
+    -- **tryptique1**, **tryptique2**, **tryptique3**
+    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
@@ -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
@@ -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,13 +232,15 @@ 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']) {
     background-color: var(--primary-main) !important;
     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']) {