Project

General

Profile

0001-general-add-possibility-to-turn-menu-cells-in-carrou.patch

Frédéric Péters, 01 May 2018 06:50 PM

Download (5.64 KB)

View differences:

Subject: [PATCH] general: add possibility to turn menu cells in carrousels
 (#23520)

 help/fr/misc-scss.page                        |  30 +++++
 static/includes/_carrousel.scss               | 121 ++++++++++++++++++
 static/includes/_publik.scss                  |   1 +
 .../combo/cells/carrousel/menu-cell.html      |  12 ++
 4 files changed, 164 insertions(+)
 create mode 100644 static/includes/_carrousel.scss
 create mode 100644 templates/combo/cells/carrousel/menu-cell.html
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
-