Skip to content

Commit 3b28612

Browse files
giuliaghisinigiuliaghisini
authored
fix: megamenu styles and add megamenu-content class
1 parent 2832ca7 commit 3b28612

File tree

11 files changed

+260
-245
lines changed

11 files changed

+260
-245
lines changed

‎Gemfile.lock‎

Lines changed: 49 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
11
GEM
22
remote: https://rubygems.org/
33
specs:
4-
addressable (2.8.7)
5-
public_suffix (>= 2.0.2, < 7.0)
4+
addressable (2.8.9)
5+
public_suffix (>= 2.0.2, < 8.0)
66
base64 (0.3.0)
7-
bigdecimal (3.2.3)
7+
bigdecimal (4.0.1)
88
colorator (1.1.0)
9-
concurrent-ruby (1.3.5)
9+
concurrent-ruby (1.3.6)
1010
csv (3.3.5)
1111
em-websocket (0.5.3)
1212
eventmachine (>= 0.12.9)
1313
http_parser.rb (~> 0)
1414
ethon (0.15.0)
1515
ffi (>= 1.15.0)
1616
eventmachine (1.2.7)
17-
ffi (1.17.2-aarch64-linux-gnu)
18-
ffi (1.17.2-aarch64-linux-musl)
19-
ffi (1.17.2-arm-linux-gnu)
20-
ffi (1.17.2-arm-linux-musl)
21-
ffi (1.17.2-arm64-darwin)
22-
ffi (1.17.2-x86_64-darwin)
23-
ffi (1.17.2-x86_64-linux-gnu)
24-
ffi (1.17.2-x86_64-linux-musl)
17+
ffi (1.17.3-aarch64-linux-gnu)
18+
ffi (1.17.3-aarch64-linux-musl)
19+
ffi (1.17.3-arm-linux-gnu)
20+
ffi (1.17.3-arm-linux-musl)
21+
ffi (1.17.3-arm64-darwin)
22+
ffi (1.17.3-x86_64-darwin)
23+
ffi (1.17.3-x86_64-linux-gnu)
24+
ffi (1.17.3-x86_64-linux-musl)
2525
forwardable-extended (2.6.0)
26-
google-protobuf (4.32.0)
26+
google-protobuf (4.34.0)
2727
bigdecimal
28-
rake (>= 13)
29-
google-protobuf (4.32.0-aarch64-linux-gnu)
28+
rake (~> 13.3)
29+
google-protobuf (4.34.0-aarch64-linux-gnu)
3030
bigdecimal
31-
rake (>= 13)
32-
google-protobuf (4.32.0-aarch64-linux-musl)
31+
rake (~> 13.3)
32+
google-protobuf (4.34.0-aarch64-linux-musl)
3333
bigdecimal
34-
rake (>= 13)
35-
google-protobuf (4.32.0-arm64-darwin)
34+
rake (~> 13.3)
35+
google-protobuf (4.34.0-arm64-darwin)
3636
bigdecimal
37-
rake (>= 13)
38-
google-protobuf (4.32.0-x86_64-darwin)
37+
rake (~> 13.3)
38+
google-protobuf (4.34.0-x86_64-darwin)
3939
bigdecimal
40-
rake (>= 13)
41-
google-protobuf (4.32.0-x86_64-linux-gnu)
40+
rake (~> 13.3)
41+
google-protobuf (4.34.0-x86_64-linux-gnu)
4242
bigdecimal
43-
rake (>= 13)
44-
google-protobuf (4.32.0-x86_64-linux-musl)
43+
rake (~> 13.3)
44+
google-protobuf (4.34.0-x86_64-linux-musl)
4545
bigdecimal
46-
rake (>= 13)
46+
rake (~> 13.3)
4747
html-proofer (3.19.4)
4848
addressable (~> 2.3)
4949
mercenary (~> 0.3)
@@ -52,8 +52,8 @@ GEM
5252
rainbow (~> 3.0)
5353
typhoeus (~> 1.3)
5454
yell (~> 2.0)
55-
http_parser.rb (0.8.0)
56-
i18n (1.14.7)
55+
http_parser.rb (0.8.1)
56+
i18n (1.14.8)
5757
concurrent-ruby (~> 1.0)
5858
jekyll (4.4.1)
5959
addressable (~> 2.4)
@@ -85,15 +85,17 @@ GEM
8585
nokogiri (~> 1.11)
8686
jekyll-watch (2.2.1)
8787
listen (~> 3.0)
88-
json (2.13.2)
89-
kramdown (2.5.1)
90-
rexml (>= 3.3.9)
88+
json (2.18.1)
89+
kramdown (2.5.2)
90+
rexml (>= 3.4.4)
9191
kramdown-parser-gfm (1.1.0)
9292
kramdown (~> 2.0)
9393
liquid (4.0.4)
94-
listen (3.9.0)
94+
listen (3.10.0)
95+
logger
9596
rb-fsevent (~> 0.10, >= 0.10.3)
9697
rb-inotify (~> 0.9, >= 0.9.10)
98+
logger (1.7.0)
9799
mercenary (0.4.0)
98100
nokogiri (1.19.1-aarch64-linux-gnu)
99101
racc (~> 1.4)
@@ -114,38 +116,38 @@ GEM
114116
parallel (1.27.0)
115117
pathutil (0.16.2)
116118
forwardable-extended (~> 2.6)
117-
public_suffix (6.0.2)
119+
public_suffix (7.0.5)
118120
racc (1.8.1)
119121
rainbow (3.1.1)
120-
rake (13.3.0)
122+
rake (13.3.1)
121123
rb-fsevent (0.11.2)
122124
rb-inotify (0.11.1)
123125
ffi (~> 1.0)
124-
rexml (3.4.3)
125-
rouge (4.6.0)
126+
rexml (3.4.4)
127+
rouge (4.7.0)
126128
safe_yaml (1.0.5)
127-
sass-embedded (1.92.1-aarch64-linux-gnu)
129+
sass-embedded (1.97.3-aarch64-linux-gnu)
128130
google-protobuf (~> 4.31)
129-
sass-embedded (1.92.1-aarch64-linux-musl)
131+
sass-embedded (1.97.3-aarch64-linux-musl)
130132
google-protobuf (~> 4.31)
131-
sass-embedded (1.92.1-arm-linux-gnueabihf)
133+
sass-embedded (1.97.3-arm-linux-gnueabihf)
132134
google-protobuf (~> 4.31)
133-
sass-embedded (1.92.1-arm-linux-musleabihf)
135+
sass-embedded (1.97.3-arm-linux-musleabihf)
134136
google-protobuf (~> 4.31)
135-
sass-embedded (1.92.1-arm64-darwin)
137+
sass-embedded (1.97.3-arm64-darwin)
136138
google-protobuf (~> 4.31)
137-
sass-embedded (1.92.1-x86_64-darwin)
139+
sass-embedded (1.97.3-x86_64-darwin)
138140
google-protobuf (~> 4.31)
139-
sass-embedded (1.92.1-x86_64-linux-gnu)
141+
sass-embedded (1.97.3-x86_64-linux-gnu)
140142
google-protobuf (~> 4.31)
141-
sass-embedded (1.92.1-x86_64-linux-musl)
143+
sass-embedded (1.97.3-x86_64-linux-musl)
142144
google-protobuf (~> 4.31)
143145
terminal-table (3.0.2)
144146
unicode-display_width (>= 1.1.1, < 3)
145147
typhoeus (1.5.0)
146148
ethon (>= 0.9.0, < 0.16.0)
147149
unicode-display_width (2.6.0)
148-
webrick (1.9.1)
150+
webrick (1.9.2)
149151
yell (2.2.2)
150152

151153
PLATFORMS
@@ -170,7 +172,7 @@ DEPENDENCIES
170172
webrick (~> 1.7)
171173

172174
RUBY VERSION
173-
ruby 3.3.9p170
175+
ruby 3.3.10p183
174176

175177
BUNDLED WITH
176-
2.5.22
178+
2.5.22

‎docs/componenti/sticky.md‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ Puoi usare l'attributo `data-bs-toggle` con valore `sticky` per attivare la funz
2222

2323
{% comment %}Example name: Base{% endcomment %}
2424
{% capture example %}
25+
2526
<div class="it-header-slim-wrapper" data-bs-toggle="sticky">
2627
<div class="container">
2728
<div class="row">
@@ -44,6 +45,7 @@ Per facilitare il cambio di stile dell'elemento è possibile usare la proprietà
4445

4546
{% comment %}Example name: Con posizione fissa{% endcomment %}
4647
{% capture example %}
48+
4749
<div class="it-header-slim-wrapper it-header-sticky" data-bs-toggle="sticky" data-bs-position-type="fixed" data-bs-target="#stickyTrigger1" data-bs-sticky-class-name="is-sticky">
4850
<div class="container">
4951
<div class="row">
@@ -65,6 +67,7 @@ Se sono presenti più componenti sticky nella pagina, è possibile fare in modo
6567

6668
{% comment %}Example name: Variante impilabile{% endcomment %}
6769
{% capture example %}
70+
6871
<div class="it-header-slim-wrapper" data-bs-toggle="sticky" data-bs-stackable="true">
6972
<div class="container">
7073
<div class="row">
@@ -99,6 +102,7 @@ In tal caso è necessario utilizzare l'attributo `data-bs-target`.
99102

100103
{% comment %}Example name: Attivabile con target{% endcomment %}
101104
{% capture example %}
105+
102106
<header class="it-header-wrapper" data-bs-toggle="sticky" data-bs-target="#stickyTrigger1">
103107
<div class="it-header-slim-wrapper">
104108
<div class="container">
@@ -154,7 +158,7 @@ In tal caso è necessario utilizzare l'attributo `data-bs-target`.
154158
<div class="row">
155159
<div class="col-12">
156160
<!--start nav-->
157-
<nav class="navbar navbar-expand-lg has-megamenu" aria-label="Navigazione principale">
161+
<nav class="navbar navbar-expand-lg" aria-label="Navigazione principale">
158162
<button class="custom-navbar-toggler" type="button" aria-controls="navC1" aria-label="Mostra/Nascondi la navigazione" data-bs-toggle="navbarcollapsible" data-bs-target="#navC1">
159163
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-burger"></use></svg>
160164
</button>
@@ -192,26 +196,26 @@ In tal caso è necessario utilizzare l'attributo `data-bs-target`.
192196
È possibile creare un'istanza con il constructor, ad esempio:
193197

194198
```js
195-
import { Sticky } from 'bootstrap-italia';
199+
import { Sticky } from 'bootstrap-italia'
196200

197-
const stickyElement = document.getElementById('sticky');
198-
const sticky = new Sticky(stickyElement, options);
201+
const stickyElement = document.getElementById('sticky')
202+
const sticky = new Sticky(stickyElement, options)
199203
```
200204

201205
#### Opzioni
202206

203207
Le opzioni possono essere passate tramite gli attributi data o tramite JavaScript. Per quanto riguarda gli attributi data, aggiungi il nome dell'opzione a `data-bs`, come in `data-bs-position-type=""`.
204208

205209
```js
206-
import { Sticky } from 'bootstrap-italia';
210+
import { Sticky } from 'bootstrap-italia'
207211

208-
const stickyElement = document.getElementById('sticky');
212+
const stickyElement = document.getElementById('sticky')
209213
const sticky = new Sticky(stickyElement, {
210214
positionType: 'sticky',
211215
stickyClassName: 'is-sticky',
212216
stackable: true,
213217
paddingTop: 0,
214-
});
218+
})
215219
```
216220

217221
<div class="table-responsive">
@@ -295,7 +299,7 @@ La classe `Sticky` di Bootstrap espone alcuni eventi per agganciare comportament
295299
</div>
296300

297301
```js
298-
var stickyElement = document.getElementById('sticky');
302+
var stickyElement = document.getElementById('sticky')
299303
stickyElement.addEventListener('on.bs.sticky', () => {
300304
// do something...
301305
})
@@ -304,8 +308,9 @@ stickyElement.addEventListener('on.bs.sticky', () => {
304308
## Breaking changes
305309

306310
{% capture callout %}
307-
La navbar presente nel markup dell'esempio "Attivabile con target", quando aperta in versione mobile o a forte ingrandimento, è stata reimplementata come modale per migliorare l'accessibilità con le combinazioni principali di lettori di schermo, sistema operativo e browser. Modifiche principali:
308-
- struttura: la navbar ora utilizza un pattern dialog con backdrop
311+
La navbar presente nel markup dell'esempio "Attivabile con target", quando aperta in versione mobile o a forte ingrandimento, è stata reimplementata come modale per migliorare l'accessibilità con le combinazioni principali di lettori di schermo, sistema operativo e browser. Modifiche principali:
312+
313+
- struttura: la navbar ora utilizza un pattern dialog con backdrop
309314
- gerarchia visiva: la gestione `z-index` è allineata al componente modale
310315
- gestione del focus: implementato `focus-trap.js` per utenti da tastiera e lettori di schermo, e gestione inert
311316
- il comportamento è diverso se implementata dentro o fuori dall'elemento `main` di pagina (se presente)

‎docs/esempi/header/header-light.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
<div class="row">
108108
<div class="col-12">
109109
<!--start nav-->
110-
<nav class="navbar navbar-expand-lg has-megamenu" aria-label="Navigazione principale">
110+
<nav class="navbar navbar-expand-lg" aria-label="Navigazione principale">
111111
<button class="custom-navbar-toggler" type="button" aria-controls="navC1" aria-expanded="false" aria-label="Mostra/Nascondi la navigazione" data-bs-toggle="navbarcollapsible" data-bs-target="#navC1">
112112
<svg class="icon">
113113
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-burger"></use>
@@ -154,12 +154,12 @@
154154
<span>Megamenu</span><svg role="img" class="icon icon-xs ms-1"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-expand"></use></svg>
155155
</button>
156156
<div class="dropdown-menu shadow-lg" role="region" aria-labelledby="megamenu-5">
157-
<div class="megamenu pb-5 pt-3 py-lg-0">
157+
<div class="megamenu-content">
158158
<div class="row">
159159
<div class="col-xs-12 col-lg-4 px-0">
160160
<div class="row">
161161
<div class="col-12 it-vertical it-description pb-lg-3">
162-
<div class="description-content ps-4 ps-sm-5 ms-3">
162+
<div class="description-content px-4 ps-sm-5 ms-3">
163163
<div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
164164
<figure class="figure">
165165
<img src="https://placehold.co/560x240/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded" alt="Segnaposto">
@@ -242,4 +242,4 @@
242242
</div>
243243
</div>
244244
</div>
245-
</header>
245+
</header>

‎docs/esempi/header/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
<div class="row">
107107
<div class="col-12">
108108
<!--start nav-->
109-
<nav class="navbar navbar-expand-lg has-megamenu" aria-label="Navigazione principale">
109+
<nav class="navbar navbar-expand-lg" aria-label="Navigazione principale">
110110
<button class="custom-navbar-toggler" type="button" aria-controls="navC1" aria-expanded="false" aria-label="Mostra/Nascondi la navigazione" data-bs-toggle="navbarcollapsible" data-bs-target="#navC1">
111111
<svg class="icon">
112112
<use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-burger"></use>
@@ -153,11 +153,11 @@
153153
<span>Megamenu</span><svg role="img" class="icon icon-xs"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-expand"></use></svg>
154154
</button>
155155
<div class="dropdown-menu shadow-lg" role="region" aria-labelledby="megamenu-5">
156-
<div class="megamenu">
156+
<div class="megamenu-content">
157157
<div class="row">
158158
<div class="col-xs-12 col-lg-4">
159159
<div class="it-vertical it-description">
160-
<div class="description-content">
160+
<div class="description-content px-4 ps-sm-5 ms-3">
161161
<div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
162162
<figure class="figure">
163163
<img src="https://placehold.co/560x240/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded" alt="Segnaposto">

‎docs/esempi/navscroll/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@
122122
<div class="row">
123123
<div class="col-12">
124124
<!--start nav-->
125-
<nav class="navbar navbar-expand-lg has-megamenu" aria-label="Navigazione principale">
125+
<nav class="navbar navbar-expand-lg" aria-label="Navigazione principale">
126126
<button class="custom-navbar-toggler" type="button" aria-controls="navC1"
127127
aria-label="Mostra/Nascondi la navigazione" data-bs-toggle="navbarcollapsible" data-bs-target="#navC1">
128128
<svg class="icon">
@@ -175,12 +175,12 @@
175175
</svg>
176176
</button>
177177
<div class="dropdown-menu shadow-lg" role="region" aria-labelledby="megamenu-5">
178-
<div class="megamenu pb-5 pt-3 py-lg-0">
178+
<div class="megamenu-content">
179179
<div class="row">
180180
<div class="col-xs-12 col-lg-4 px-0">
181181
<div class="row">
182182
<div class="col-12 it-vertical it-description pb-lg-3">
183-
<div class="description-content ps-4 ps-sm-5 ms-3">
183+
<div class="description-content px-4 ps-sm-5 ms-3">
184184
<div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
185185
<figure class="figure">
186186
<img src="https://placehold.co/560x240/ebebeb/808080/?text=Immagine"

‎docs/esempi/sticky-target/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ <h2>Esempio Componente Sticky: trigger tramite elemento target</h2>
7272
<div class="row">
7373
<div class="col-12">
7474
<!--start nav-->
75-
<nav class="navbar navbar-expand-lg has-megamenu" aria-label="Navigazione principale">
75+
<nav class="navbar navbar-expand-lg" aria-label="Navigazione principale">
7676
<button
7777
class="custom-navbar-toggler"
7878
type="button"

0 commit comments

Comments
 (0)