Projet

Général

Profil

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

Frédéric Péters, 01 mai 2018 18:50

Télécharger (5,64 ko)

Voir les différences: 

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
  
  
    
-