Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bannieres et triptyque charte istex #2266

Merged
merged 3 commits into from
Dec 13, 2024
Merged

bannieres et triptyque charte istex #2266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
858f63c
feat(theme istex banniere): baniere et triptyque charte istex
HeleneCreusot Dec 12, 2024
58f03c0
docs(doc bannieres et tryptique): ces blocs sont composés de bloc com…
HeleneCreusot Dec 12, 2024
422288c
docs(triptyque précision sur sa composition): class internes triptyqu…
HeleneCreusot Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 10 additions & 12 deletions src/app/custom/themes/istex/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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**
Expand All @@ -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

Expand Down
113 changes: 63 additions & 50 deletions src/app/custom/themes/istex/css/istex-internalclass.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand Down
8 changes: 7 additions & 1 deletion src/app/custom/themes/istex/css/istex-linksclass.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']) {
Expand All @@ -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']) {
Expand All @@ -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']) {
Expand Down
Loading