From 1d4b00bdb3dc1b90d0bbce204e36269124be99f6 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 23 Jul 2024 16:52:58 +0200 Subject: [PATCH 1/9] feat: update first example --- .../liste-di-immagini.md | 34 ++++++------------- 1 file changed, 11 insertions(+), 23 deletions(-) diff --git a/docs/organizzare-i-contenuti/liste-di-immagini.md b/docs/organizzare-i-contenuti/liste-di-immagini.md index 92d1f41881..062a2759de 100644 --- a/docs/organizzare-i-contenuti/liste-di-immagini.md +++ b/docs/organizzare-i-contenuti/liste-di-immagini.md @@ -22,41 +22,29 @@ Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe `.i
From 65fc4eef8a1baead4c7781d80766e56b32541b15 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 23 Jul 2024 17:08:46 +0200 Subject: [PATCH 2/9] fix: image sizes --- docs/organizzare-i-contenuti/liste-di-immagini.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/organizzare-i-contenuti/liste-di-immagini.md b/docs/organizzare-i-contenuti/liste-di-immagini.md index 062a2759de..f294dea33c 100644 --- a/docs/organizzare-i-contenuti/liste-di-immagini.md +++ b/docs/organizzare-i-contenuti/liste-di-immagini.md @@ -23,7 +23,7 @@ Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe `.i @@ -32,7 +32,7 @@ Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe `.i
- Un'immagine generica segnaposto con angoli arrotondati in una figura. + Un'immagine generica segnaposto con angoli arrotondati in una figura.
Una didascalia per l'immagine sopra.
@@ -42,7 +42,7 @@ Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe `.i
- Un'immagine generica segnaposto con angoli arrotondati in una figura. + Un'immagine generica segnaposto con angoli arrotondati in una figura.
Una didascalia per l'immagine sopra.
From 372d7b5c82a86959ac66f1688d8c3799698d2868 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 23 Jul 2024 17:44:18 +0200 Subject: [PATCH 3/9] fix: restore icon --- docs/organizzare-i-contenuti/liste-di-immagini.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/organizzare-i-contenuti/liste-di-immagini.md b/docs/organizzare-i-contenuti/liste-di-immagini.md index f294dea33c..d347ec8a54 100644 --- a/docs/organizzare-i-contenuti/liste-di-immagini.md +++ b/docs/organizzare-i-contenuti/liste-di-immagini.md @@ -33,7 +33,9 @@ Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe `.i
Un'immagine generica segnaposto con angoli arrotondati in una figura. -
Una didascalia per l'immagine sopra.
+
Una didascalia per l'immagine sopra. + +
From d1a01eb23b6e711ce430dce39893cbfa1d7ea240 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 17 Oct 2024 17:51:48 +0200 Subject: [PATCH 4/9] fix: resolve figure caption overlay --- .../liste-di-immagini.md | 8 ++--- src/scss/custom/_gridlist.scss | 31 +++++++++++++++++++ 2 files changed, 35 insertions(+), 4 deletions(-) diff --git a/docs/organizzare-i-contenuti/liste-di-immagini.md b/docs/organizzare-i-contenuti/liste-di-immagini.md index d347ec8a54..490ada7c7c 100644 --- a/docs/organizzare-i-contenuti/liste-di-immagini.md +++ b/docs/organizzare-i-contenuti/liste-di-immagini.md @@ -43,10 +43,10 @@ Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe `.i diff --git a/src/scss/custom/_gridlist.scss b/src/scss/custom/_gridlist.scss index 8cfb7a8309..552e8f4115 100644 --- a/src/scss/custom/_gridlist.scss +++ b/src/scss/custom/_gridlist.scss @@ -1,24 +1,29 @@ //mobile .it-grid-item-wrapper { position: relative; + // img default proportion .img-responsive-wrapper { border-radius: $border-radius; + .img-responsive { padding-bottom: $grid-item-df-proportion; } } + // text .it-griditem-text-wrapper { display: flex; justify-content: space-between; padding: $v-gap; align-items: center; + .it-griditem-text { font-size: $grid-item-text-size-mob; color: $grid-item-text-color; font-weight: 600; } + .icon { flex-shrink: 0; position: relative; @@ -28,10 +33,14 @@ height: $grid-item-icon-mob-size; } } + // text overlay &.it-grid-item-overlay { position: relative; + .img-responsive-wrapper { + position: relative; + &:after { content: ''; display: block; @@ -43,6 +52,7 @@ height: 100%; } } + .it-griditem-text-wrapper { position: absolute; left: 0; @@ -59,7 +69,18 @@ fill: #fff; } } + + .figure-img { + margin-bottom: 0; + } + + .figure-caption { + position: absolute; + z-index: 10; + color: #fff; + } } + a { display: block; text-decoration: none; @@ -85,24 +106,29 @@ .it-grid-list-wrapper { padding-left: $grid-list-default-gap * 2; padding-right: $grid-list-default-gap * 2; + // grid changes div[class^='col-'] { padding: 0 $grid-list-default-gap $grid-list-default-gap * 2 $grid-list-default-gap; } + .grid-row { display: flex; margin-left: -$grid-list-default-gap; margin-right: -$grid-list-default-gap; flex-wrap: wrap; } + // grid with label &.it-image-label-grid { padding-left: $grid-list-text-gap * 2; padding-right: $grid-list-text-gap * 2; + // grid changes div[class^='col-'] { padding: 0 $grid-list-text-gap $grid-list-text-gap * 2 $grid-list-text-gap; } + .grid-row { margin-left: -(($grid-list-text-gap * 2) + ($grid-list-default-gap * 2)); margin-right: -(($grid-list-text-gap * 2) + ($grid-list-default-gap * 2)); @@ -117,12 +143,14 @@ .img-responsive { padding-bottom: initial; height: auto; + .img-wrapper { position: inherit; left: initial; right: initial; width: initial; height: initial; + img { height: auto; object-fit: initial; @@ -139,16 +167,19 @@ &.it-grid-item-overlay { .it-griditem-text-wrapper { padding: $v-gap * 2 $v-gap * 3; + .it-griditem-text { font-size: $grid-item-text-size; } } } + // text .it-griditem-text-wrapper { .it-griditem-text { font-size: $grid-item-text-size; } + .icon { width: $grid-item-icon-size-desk; height: $grid-item-icon-size-desk; From e837bb55c7e0c39d81a48301943c09de0cde13dc Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Fri, 18 Oct 2024 08:44:06 +0200 Subject: [PATCH 5/9] fix: update vars and styles --- src/scss/_variables.scss | 7 +++---- src/scss/custom/_figcaption.scss | 2 +- src/scss/custom/_gridlist.scss | 25 +++++-------------------- 3 files changed, 9 insertions(+), 25 deletions(-) diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 1512c30c50..6081f44080 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -551,16 +551,15 @@ $crs-landcape-bottom: 5px; // Gridlist ************** $grid-item-df-proportion: 66.81222707423581%; $grid-item-df-double-proportion: 33.4061135371179%; -$grid-item-text-size: 1rem; -$grid-item-text-size-mob: 0.8rem; +$grid-item-text-size: 0.75rem; $grid-item-text-color: $neutral-1 !default; // Missing in the UI kit - need more attention $grid-item-text-overlay-bg: $neutral-1-a10 !default; // Missing in the UI kit - need more attention $grid-list-default-gap: 2px; $grid-list-text-gap: $v-gap; $grid-item-sm-col: 50%; $grid-item-lg-col: 33.333333%; -$grid-item-icon-mob-size: 24px; -$grid-item-icon-size-desk: 32px; +$grid-item-icon-size: 24px; +$grid-item-overlay: hsla(210%, 54%, 20, 0.85); // list $list-font-size: 1rem; diff --git a/src/scss/custom/_figcaption.scss b/src/scss/custom/_figcaption.scss index 099a8ca7db..0dc694bcbd 100644 --- a/src/scss/custom/_figcaption.scss +++ b/src/scss/custom/_figcaption.scss @@ -1,3 +1,3 @@ .figure-caption { - font-size: 90%; + font-size: 0.75rem; } diff --git a/src/scss/custom/_gridlist.scss b/src/scss/custom/_gridlist.scss index 552e8f4115..d50adf1bea 100644 --- a/src/scss/custom/_gridlist.scss +++ b/src/scss/custom/_gridlist.scss @@ -15,22 +15,19 @@ .it-griditem-text-wrapper { display: flex; justify-content: space-between; - padding: $v-gap; align-items: center; .it-griditem-text { - font-size: $grid-item-text-size-mob; - color: $grid-item-text-color; - font-weight: 600; + font-size: $grid-item-text-size; + font-weight: $font-weight-semibold; } .icon { flex-shrink: 0; position: relative; - right: -$v-gap; fill: $primary; - width: $grid-item-icon-mob-size; - height: $grid-item-icon-mob-size; + width: $grid-item-icon-size; + height: $grid-item-icon-size; } } @@ -44,7 +41,7 @@ &:after { content: ''; display: block; - background: rgba(0, 0, 0, 0.5); + background: $grid-item-overlay; position: absolute; left: 0; top: 0; @@ -173,17 +170,5 @@ } } } - - // text - .it-griditem-text-wrapper { - .it-griditem-text { - font-size: $grid-item-text-size; - } - - .icon { - width: $grid-item-icon-size-desk; - height: $grid-item-icon-size-desk; - } - } } } From cbc0462dcb5b8bd6675f334d356baec188430050 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Fri, 18 Oct 2024 08:44:25 +0200 Subject: [PATCH 6/9] fix: update grid item template --- .../liste-di-immagini.md | 148 +++++++++--------- 1 file changed, 71 insertions(+), 77 deletions(-) diff --git a/docs/organizzare-i-contenuti/liste-di-immagini.md b/docs/organizzare-i-contenuti/liste-di-immagini.md index 490ada7c7c..a52e7dc37e 100644 --- a/docs/organizzare-i-contenuti/liste-di-immagini.md +++ b/docs/organizzare-i-contenuti/liste-di-immagini.md @@ -33,7 +33,8 @@ Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe `.i
Un'immagine generica segnaposto con angoli arrotondati in una figura. -
Una didascalia per l'immagine sopra. +
+ Testo didascalia
@@ -45,7 +46,10 @@ Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe `.i
Un'immagine generica segnaposto con angoli arrotondati in una figura. -
Una didascalia per l'immagine sopra.
+
+ Testo didascalia + +
@@ -145,90 +149,72 @@ Per la corretta formattazione degli spazi di questo tipo di griglia, occorre agg @@ -255,16 +241,18 @@ Per utilizzare l'immagine orizzontale, occorre aggiungere la classe `.it-grid-it
@@ -275,13 +263,15 @@ Per utilizzare l'immagine orizzontale, occorre aggiungere la classe `.it-grid-it
-
descrizione immagine
+
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
+ Testo didascalia + +
+
- - Didascalia - -
@@ -290,13 +280,15 @@ Per utilizzare l'immagine orizzontale, occorre aggiungere la classe `.it-grid-it
-
descrizione immagine
+
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
+ Testo didascalia + +
+
- - Didascalia - -
@@ -305,13 +297,15 @@ Per utilizzare l'immagine orizzontale, occorre aggiungere la classe `.it-grid-it
-
descrizione immagine
+
+ Un'immagine generica segnaposto con angoli arrotondati in una figura. +
+ Testo didascalia + +
+
- - Didascalia - -
From 2831e374a782eeadb98e8d333dff45ba6fe602f0 Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Tue, 5 Nov 2024 12:29:58 +0100 Subject: [PATCH 7/9] chore: add icon warnings --- .../liste-di-immagini.md | 63 ++++++++++++------- 1 file changed, 39 insertions(+), 24 deletions(-) diff --git a/docs/organizzare-i-contenuti/liste-di-immagini.md b/docs/organizzare-i-contenuti/liste-di-immagini.md index ecbf85a86f..92750a4904 100644 --- a/docs/organizzare-i-contenuti/liste-di-immagini.md +++ b/docs/organizzare-i-contenuti/liste-di-immagini.md @@ -16,6 +16,21 @@ Di seguito gli esempi di elemento singolo della lista di immagini: Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe `.it-grid-item-overlay` al div `.it-grid-item-wrapper`. +{% capture callout %} + +#### Utilizzo delle icone + +In caso di utilizzo delle icone si raccomanda di descriverne il senso ai lettori di schermo. Se sono solo decorative si può nasconderle con l'attributo `aria-hidden=true`. + +{% endcapture %}{% include callout.html content=callout type="warning" %} + +{% capture callout %} +Breaking feature dalla versione **2.11.0** + +Utilizzare i tag `
` e `
` per liste di immagini con didascalia. + +{% endcapture %}{% include callout.html content=callout type="danger" %} + {% comment %}Example name: Varianti didascalia{% endcomment %} {% capture example %}
@@ -35,7 +50,7 @@ Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe `.i Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia - + Significato icona
@@ -48,7 +63,7 @@ Per utilizzare la didascalia sovrapposta è sufficiente aggiungere la classe `.i Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia - + Significato icona
@@ -152,7 +167,7 @@ Per la corretta formattazione degli spazi di questo tipo di griglia, occorre agg
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia - + Significato icona
@@ -164,7 +179,7 @@ Per la corretta formattazione degli spazi di questo tipo di griglia, occorre agg
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia - + Significato icona
@@ -176,7 +191,7 @@ Per la corretta formattazione degli spazi di questo tipo di griglia, occorre agg
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia - + Significato icona
@@ -188,7 +203,7 @@ Per la corretta formattazione degli spazi di questo tipo di griglia, occorre agg
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia - + Significato icona
@@ -200,7 +215,7 @@ Per la corretta formattazione degli spazi di questo tipo di griglia, occorre agg
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia - + Significato icona
@@ -212,7 +227,7 @@ Per la corretta formattazione degli spazi di questo tipo di griglia, occorre agg
Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia - + Significato icona
@@ -248,7 +263,7 @@ Per utilizzare l'immagine orizzontale, occorre aggiungere la classe `.it-grid-it Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia - + Significato icona
@@ -267,7 +282,7 @@ Per utilizzare l'immagine orizzontale, occorre aggiungere la classe `.it-grid-it Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia - + Significato icona
@@ -284,7 +299,7 @@ Per utilizzare l'immagine orizzontale, occorre aggiungere la classe `.it-grid-it Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia - + Significato icona
@@ -301,7 +316,7 @@ Per utilizzare l'immagine orizzontale, occorre aggiungere la classe `.it-grid-it Un'immagine generica segnaposto con angoli arrotondati in una figura.
Testo didascalia - + Significato icona
@@ -337,7 +352,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e Didascalia - + Significato icona @@ -352,7 +367,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e Didascalia - + Significato icona @@ -367,7 +382,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e Didascalia - + Significato icona @@ -382,7 +397,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e Didascalia - + Significato icona @@ -397,7 +412,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e Didascalia - + Significato icona @@ -412,7 +427,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e Didascalia - + Significato icona @@ -427,7 +442,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e Didascalia - + Significato icona @@ -442,7 +457,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e Didascalia - + Significato icona @@ -457,7 +472,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e Didascalia - + Significato icona @@ -472,7 +487,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e Didascalia - + Significato icona @@ -487,7 +502,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e Didascalia - + Significato icona @@ -502,7 +517,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e Didascalia - + Significato icona From cfa9d8afa8d3ee252e402eb1a875be9bbb0cd3bf Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Tue, 5 Nov 2024 14:04:35 +0100 Subject: [PATCH 8/9] fix: masonry --- .../liste-di-immagini.md | 192 ++++++++---------- 1 file changed, 84 insertions(+), 108 deletions(-) diff --git a/docs/organizzare-i-contenuti/liste-di-immagini.md b/docs/organizzare-i-contenuti/liste-di-immagini.md index 92750a4904..d8c934cc26 100644 --- a/docs/organizzare-i-contenuti/liste-di-immagini.md +++ b/docs/organizzare-i-contenuti/liste-di-immagini.md @@ -345,180 +345,156 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e From 706f7163d31b24ea320f17c02a622abf046168a6 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 5 Nov 2024 15:25:41 +0100 Subject: [PATCH 9/9] fix: add figure-img class to masonry --- .../liste-di-immagini.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/organizzare-i-contenuti/liste-di-immagini.md b/docs/organizzare-i-contenuti/liste-di-immagini.md index d8c934cc26..2125a2d8fd 100644 --- a/docs/organizzare-i-contenuti/liste-di-immagini.md +++ b/docs/organizzare-i-contenuti/liste-di-immagini.md @@ -346,7 +346,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e
- descrizione immagine + descrizione immagine
Didascalia Significato icona @@ -359,7 +359,7 @@ Aggiungendo `data-bs-toggle="masonry"` al contenitore `row`, verrà attivato l'e