Skip to content

Commit 47b007f

Browse files
wet-boew-botwet-boew-bot
committed
CD 17589952003: Update GCWeb compiled demos files
1 parent caa0198 commit 47b007f

File tree

4 files changed

+108
-166
lines changed

4 files changed

+108
-166
lines changed

‎_wetboew-demos/details-close/details-close-en.html‎

Lines changed: 52 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,67 @@
11
---
22
{
3-
"title": "Details closed on small views",
3+
"title": "Details closed",
44
"language": "en",
55
"category": "Plugins",
6-
"description": "Keep selected details elements closed on small view and down.",
6+
"description": "Keep selected details elements closed on defined viewport and under.",
77
"tag": "details-close",
88
"parentdir": "details-close",
99
"altLangPrefix": "details-close",
10-
"dateModified": "2021-11-29"
10+
"dateModified": "2025-08-27"
1111
}
1212
---
13-
<div class="alert alert-warning">
14-
<h2>Unstable feature</h2>
15-
<p>To be used at <strong>your own risk</strong>. This feature described below can be removed in any subsequent minor/major release</p>
16-
<p><small><a href="https://wet-boew.github.io/wet-boew-documentation/decision/7.html">Learn more about the design decision around provisional features.</a></small></p>
17-
<p><small><a href="../../docs/ref/provisional-en.html">Check other provisional features available.</a></small></p>
18-
</div>
13+
<div class="wb-prettify all-pre hide"></div>
1914

20-
<h2>Other example</h2>
21-
<ul>
22-
<li><a href="details-close-md-en.html">Medium viewport example</a></li>
23-
</ul>
24-
25-
<h2>Example of <code>details</code> element kept closed on small viewport and down (sm, xs and xxs)</h2>
15+
<h2>Example of <code>details</code> element kept closed on small viewport and down (lg, md, sm, xs and xxs)</h2>
2616
<p>Resize your browser to view the plugin at play.</p>
27-
<div class="row">
28-
<div class="col-md-6">
29-
<details class="provisional wb-details-close" open>
30-
<summary>I am closed on mobile (uses plugin)</summary>
31-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
32-
</details>
33-
</div>
34-
<div class="col-md-6">
35-
<details open>
36-
<summary>I am opened on mobile (regular)</summary>
37-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
38-
</details>
39-
</div>
40-
</div>
17+
<details class="provisional wb-details-close" open>
18+
<summary>I am closed on mobile (default)</summary>
19+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
20+
</details>
21+
<details class="wb-details-close" open data-breakpoint="lg">
22+
<summary>I am closed on large breakpoint</summary>
23+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
24+
</details>
25+
<details class="wb-details-close" open data-breakpoint="md">
26+
<summary>I am closed on medium breakpoint</summary>
27+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
28+
</details>
29+
<details class="wb-details-close" open data-breakpoint="sm">
30+
<summary>I am opened on small breakpoint</summary>
31+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
32+
</details>
33+
<details class="wb-details-close" open data-breakpoint="xs">
34+
<summary>I am closed on extra-small breakpoint</summary>
35+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
36+
</details>
37+
<details class="wb-details-close" open data-breakpoint="xxs">
38+
<summary>I am opened on extra-extra-small breakpoint</summary>
39+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
40+
</details>
4141

4242
<h3>Source code</h3>
43-
<pre><code>&lt;details class="provisional wb-details-close" open&gt;
44-
&lt;summary&gt;I am closed on mobile (uses plugin)&lt;/summary&gt;
45-
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.&lt;/p&gt;
43+
<pre><code>&lt;details class="wb-details-close" open&gt;
44+
&lt;summary&gt;I am closed on mobile (default)&lt;/summary&gt;
45+
&lt;p&gt;...&lt;/p&gt;
46+
&lt;/details&gt;
47+
&lt;details class="wb-details-close" open data-breakpoint="lg"&gt;
48+
&lt;summary&gt;I am closed on large breakpoint&lt;/summary&gt;
49+
&lt;p&gt;...&lt;/p&gt;
50+
&lt;/details&gt;
51+
&lt;details class="wb-details-close" open data-breakpoint="md"&gt;
52+
&lt;summary&gt;I am closed on medium breakpoint&lt;/summary&gt;
53+
&lt;p&gt;...&lt;/p&gt;
54+
&lt;/details&gt;
55+
&lt;details class="wb-details-close" open data-breakpoint="sm"&gt;
56+
&lt;summary&gt;I am closed on small breakpoint&lt;/summary&gt;
57+
&lt;p&gt;...&lt;/p&gt;
58+
&lt;/details&gt;
59+
&lt;details class="wb-details-close" open data-breakpoint="xs"&gt;
60+
&lt;summary&gt;I am closed on extra-small breakpoint&lt;/summary&gt;
61+
&lt;p&gt;...&lt;/p&gt;
62+
&lt;/details&gt;
63+
&lt;details class="wb-details-close" open data-breakpoint="xxs"&gt;
64+
&lt;summary&gt;I am closed on extra-extra-small breakpoint&lt;/summary&gt;
65+
&lt;p&gt;...&lt;/p&gt;
4666
&lt;/details&gt;
4767
</code></pre>

‎_wetboew-demos/details-close/details-close-fr.html‎

Lines changed: 56 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,67 @@
11
---
22
{
3-
"title": "Balise details fermée sur petits écrans",
3+
"title": "Balise details fermée",
44
"language": "fr",
55
"category": "Plugiciels",
6-
"description": "Garder les éléments details visés fermés sur petits écrans et moins.",
6+
"description": "Garder les éléments details visés fermés sur écran défini et moins.",
77
"tag": "details-close",
88
"parentdir": "details-close",
99
"altLangPrefix": "details-close",
10-
"dateModified": "2021-11-29"
10+
"dateModified": "2025-08-27"
1111
}
1212
---
13-
<div lang="en">
14-
<div class="alert alert-warning">
15-
<h2>Unstable feature</h2>
16-
<p>To be used at <strong>your own risk</strong>. This feature described below can be removed in any subsequent minor/major release</p>
17-
<p><small><a href="https://wet-boew.github.io/wet-boew-documentation/decision/7.html">Learn more about the design decision around provisional features.</a></small></p>
18-
<p><small><a href="../../docs/ref/provisional-en.html">Check other provisional features available.</a></small></p>
19-
</div>
13+
<div class="wb-prettify all-pre hide"></div>
2014

21-
<h2>Other example</h2>
22-
<ul>
23-
<li><a href="details-close-md-en.html">Medium viewport example</a></li>
24-
</ul>
15+
<h2>Exemple de l'élément <code>details</code> maintenu fermé sur un petit écran et moins (lg, md, sm, xs et xxs)</h2>
16+
<p>Redimensionnez votre navigateur pour voir le fonctionnement du plugiciel.</p>
17+
<details class="provisional wb-details-close" open>
18+
<summary>Je suis fermé sur mobile (par défaut)</summary>
19+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
20+
</details>
21+
<details class="wb-details-close" open data-breakpoint="lg">
22+
<summary>Je suis fermé sur un grand écran</summary>
23+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
24+
</details>
25+
<details class="wb-details-close" open data-breakpoint="md">
26+
<summary>Je suis fermé sur un écran moyen</summary>
27+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
28+
</details>
29+
<details class="wb-details-close" open data-breakpoint="sm">
30+
<summary>Je suis ouvert sur un petit écran</summary>
31+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
32+
</details>
33+
<details class="wb-details-close" open data-breakpoint="xs">
34+
<summary>Je suis fermé sur un écran très petit</summary>
35+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
36+
</details>
37+
<details class="wb-details-close" open data-breakpoint="xxs">
38+
<summary>Je suis ouvert sur un écran très très petit</summary>
39+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
40+
</details>
2541

26-
<h2>Example of <code>details</code> element kept closed on small viewport and down (sm, xs and xxs)</h2>
27-
<p>Resize your browser to view the plugin at play.</p>
28-
<div class="row">
29-
<div class="col-md-6">
30-
<details class="provisional wb-details-close" open>
31-
<summary>I am closed on mobile (uses plugin)</summary>
32-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
33-
</details>
34-
</div>
35-
<div class="col-md-6">
36-
<details open>
37-
<summary>I am opened on mobile (regular)</summary>
38-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
39-
</details>
40-
</div>
41-
</div>
42-
43-
<h3>Source code</h3>
44-
<pre><code>&lt;details class="provisional wb-details-close" open&gt;
45-
&lt;summary&gt;I am closed on mobile (uses plugin)&lt;/summary&gt;
46-
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.&lt;/p&gt;
47-
&lt;/details&gt;
48-
</code></pre>
49-
</div>
42+
<h3>Code source</h3>
43+
<pre><code>&lt;details class="wb-details-close" open&gt;
44+
&lt;summary&gt;Je suis fermé sur mobile (par défaut)&lt;/summary&gt;
45+
&lt;p&gt;...&lt;/p&gt;
46+
&lt;/details&gt;
47+
&lt;details class="wb-details-close" open data-breakpoint="lg"&gt;
48+
&lt;summary&gt;Je suis fermé sur un grand écran&lt;/summary&gt;
49+
&lt;p&gt;...&lt;/p&gt;
50+
&lt;/details&gt;
51+
&lt;details class="wb-details-close" open data-breakpoint="md"&gt;
52+
&lt;summary&gt;Je suis fermé sur un écran moyen&lt;/summary&gt;
53+
&lt;p&gt;...&lt;/p&gt;
54+
&lt;/details&gt;
55+
&lt;details class="wb-details-close" open data-breakpoint="sm"&gt;
56+
&lt;summary&gt;Je suis ouvert sur un petit écran&lt;/summary&gt;
57+
&lt;p&gt;...&lt;/p&gt;
58+
&lt;/details&gt;
59+
&lt;details class="wb-details-close" open data-breakpoint="xs"&gt;
60+
&lt;summary&gt;Je suis fermé sur un écran très petit&lt;/summary&gt;
61+
&lt;p&gt;...&lt;/p&gt;
62+
&lt;/details&gt;
63+
&lt;details class="wb-details-close" open data-breakpoint="xxs"&gt;
64+
&lt;summary&gt;Je suis ouvert sur un écran très très petit&lt;/summary&gt;
65+
&lt;p&gt;...&lt;/p&gt;
66+
&lt;/details&gt;
67+
</code></pre>

‎_wetboew-demos/details-close/details-close-md-en.html‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

0 commit comments

Comments
 (0)