0001-general-add-possibility-to-turn-menu-cells-in-carrou.patch
help/fr/misc-scss.page | ||
---|---|---|
392 | 392 |
</table> |
393 | 393 |
</section> |
394 | 394 | |
395 |
<section> |
|
396 |
<title>Carrousels</title> |
|
397 | ||
398 |
<p> |
|
399 |
Une cellule menu prendra la forme « carrousel » si elle est définie avec |
|
400 |
« carrousel » comme slug. |
|
401 |
</p> |
|
402 | ||
403 |
<table shade="rows"> |
|
404 |
<tr> |
|
405 |
<td><p><code>$carrousel-height</code></p></td> |
|
406 |
<td><p>Hauteur du carrousel</p></td> |
|
407 |
<td><p><var>20rem</var></p></td> |
|
408 |
</tr> |
|
409 |
<tr> |
|
410 |
<td><p><code>$carrousel-links-position</code></p></td> |
|
411 |
<td><p>Position des liens permettant de passer d'un élément à l'autre du |
|
412 |
carrousel; les valeurs possibles sont top, right, bottom et left.</p></td> |
|
413 |
<td><p><var>bottom</var></p></td> |
|
414 |
</tr> |
|
415 |
<tr> |
|
416 |
<td><p><code>$carrousel-labels</code></p></td> |
|
417 |
<td><p>Détermine si les liens permettant de passer d'un élément à l'autre |
|
418 |
reprennent le nom de la page.</p></td> |
|
419 |
<td><p><var>false</var></p></td> |
|
420 |
</tr> |
|
421 |
</table> |
|
422 | ||
423 |
</section> |
|
424 | ||
395 | 425 |
</page> |
static/includes/_carrousel.scss | ||
---|---|---|
1 |
$carrousel-height: 20rem !default; |
|
2 | ||
3 |
/* $carrousel-links-position: position of links to go from entry to entry; |
|
4 |
* possible values are: top, right, bottom (default), left |
|
5 |
*/ |
|
6 |
$carrousel-links-position: bottom !default; |
|
7 | ||
8 |
/* $carrousel-labels: include or not page labels (boolean, default: true) */ |
|
9 |
$carrousel-labels: false !default; |
|
10 | ||
11 |
#carrousel > div { |
|
12 |
display: -ms-flexbox; |
|
13 |
display: flex; |
|
14 |
box-sizing: border-box; |
|
15 |
@if $carrousel-links-position == bottom or $carrousel-links-position == top { |
|
16 |
-ms-flex-direction: column; |
|
17 |
flex-direction: column; |
|
18 |
} |
|
19 |
ul.page-links { |
|
20 |
vertical-align: center; |
|
21 |
-ms-flex: 0 0 auto; |
|
22 |
flex: 0 0 auto; |
|
23 |
display: -ms-flexbox; |
|
24 |
display: flex; |
|
25 |
-ms-justify-content: center; |
|
26 |
justify-content: center; |
|
27 |
@if $carrousel-links-position == left or $carrousel-links-position == right { |
|
28 |
@if $carrousel-labels == false { |
|
29 |
width: 2rem; |
|
30 |
} @else { |
|
31 |
width: 20rem; |
|
32 |
} |
|
33 |
-ms-flex-direction: column; |
|
34 |
flex-direction: column; |
|
35 |
li { |
|
36 |
width: 100%; |
|
37 |
} |
|
38 |
} @else { |
|
39 |
li { |
|
40 |
margin: 0 0.5rem; |
|
41 |
} |
|
42 |
} |
|
43 |
@if $carrousel-links-position == left { |
|
44 |
margin-right: 1rem; |
|
45 |
} |
|
46 |
@if $carrousel-links-position == right { |
|
47 |
margin-left: 1rem; |
|
48 |
order: 1; |
|
49 |
} |
|
50 |
@if $carrousel-links-position == top { |
|
51 |
margin-bottom: 1rem; |
|
52 |
} |
|
53 |
@if $carrousel-links-position == bottom { |
|
54 |
margin-top: 1rem; |
|
55 |
order: 1; |
|
56 |
} |
|
57 |
@if $carrousel-labels == false { |
|
58 |
li a { |
|
59 |
outline: 0; |
|
60 |
text-indent: -10000px; |
|
61 |
position: relative; |
|
62 |
height: 0; |
|
63 |
text-align: center; |
|
64 |
border: 0; |
|
65 |
&::after { |
|
66 |
font-family: FontAwesome; |
|
67 |
content: "\f10c"; // circle-o |
|
68 |
position: absolute; |
|
69 |
top: 1ex; |
|
70 |
left: 0; |
|
71 |
width: 100%; |
|
72 |
text-indent: 0; |
|
73 |
} |
|
74 |
} |
|
75 |
} |
|
76 |
} |
|
77 |
ul.pictures { |
|
78 |
@if $carrousel-links-position == bottom or $carrousel-links-position == top { |
|
79 |
white-space: pre; |
|
80 |
} @else { |
|
81 |
height: $carrousel-height; |
|
82 |
} |
|
83 |
-ms-flex: 1 0 none; |
|
84 |
flex: 1 0 none; |
|
85 |
width: 100%; |
|
86 |
overflow: hidden; |
|
87 |
scroll-behavior: smooth; |
|
88 |
li { |
|
89 |
@if $carrousel-links-position == bottom or $carrousel-links-position == top { |
|
90 |
width: 100%; |
|
91 |
display: inline-block; |
|
92 |
} @else { |
|
93 |
display: block; |
|
94 |
} |
|
95 |
background-size: cover; |
|
96 |
height: $carrousel-height; |
|
97 |
a { |
|
98 |
margin: 0; |
|
99 |
padding: 0; |
|
100 |
border: 0; |
|
101 |
height: 100%; |
|
102 |
&:hover { |
|
103 |
background: none; |
|
104 |
div { |
|
105 |
background: rgba(255, 255, 255, 0.8); |
|
106 |
} |
|
107 |
} |
|
108 |
position: relative; |
|
109 |
div { |
|
110 |
transition: background ease 0.2s; |
|
111 |
background: rgba(255, 255, 255, 0.5); |
|
112 |
padding: 1rem; |
|
113 |
color: $font-color; |
|
114 |
position: absolute; |
|
115 |
bottom: 0; |
|
116 |
width: 100%; |
|
117 |
} |
|
118 |
} |
|
119 |
} |
|
120 |
} |
|
121 |
} |
static/includes/_publik.scss | ||
---|---|---|
10 | 10 |
@import 'wcs'; |
11 | 11 |
@import 'misc'; |
12 | 12 |
@import 'a11y'; |
13 |
@import 'carrousel'; |
|
13 | 14 |
@import 'library'; |
templates/combo/cells/carrousel/menu-cell.html | ||
---|---|---|
1 |
<ul class="page-links"> |
|
2 |
{% for menuitem in menuitems %} |
|
3 |
<li><a href="#carrousel-{{menuitem.page.slug}}">{{menuitem.page.title}}</a></li> |
|
4 |
{% endfor %} |
|
5 |
</ul> |
|
6 |
<ul class="pictures"> |
|
7 |
{% spaceless %} |
|
8 |
{% for menuitem in menuitems %} |
|
9 |
<li id="carrousel-{{menuitem.page.slug}}" style="background-image: url({{menuitem.page.picture.url}})"><a href="{{menuitem.page.get_online_url}}"><div>{% firstof menuitem.page.description menuitem.page.title %}</div></a></li> |
|
10 |
{% endfor %} |
|
11 |
{% endspaceless %} |
|
12 |
</ul> |
|
0 |
- |