Projet

Général

Profil

0001-templates-add-back-top-component-45145.patch

Thomas Jund, 25 septembre 2020 11:41

Télécharger (9,56 ko)

Voir les différences: 

Subject: [PATCH] templates: add back-top component (#45145)


 help/fr/misc-scss.page             |  35 ++++++++
 static/includes/_back-top.scss     | 140 +++++++++++++++++++++++++++++
 static/includes/_publik.scss       |   1 +
 static/montpellier/style.scss      |   1 +
 templates/combo/page_template.html |   4 +
 templates/includes/back-top.html   |  37 ++++++++
 templates/theme.html               |   6 +-
 7 files changed, 222 insertions(+), 2 deletions(-)
 create mode 100644 static/includes/_back-top.scss
 create mode 100644 templates/includes/back-top.html
help/fr/misc-scss.page
914 914 
  <td><p><var>$title-transform</var></p></td>
915 915 
 </tr>
916 916 
</table>
917 
</section>
918 

  		




  
  919
  
    
<section>

  		




  
  920
  
    
  <title>Retour en haut</title>

  		




  917
  921
  
    

  		




  
  922
  
    
  <p>

  		




  
  923
  
    
    Bouton permettant de remonter en haut de page. Élément masqué par défaut. Si affiché, il le sera par défaut sous la forme d'un lien en fin de pied de page

  		




  
  924
  
    
  </p>

  		




  
  925
  
    

  		




  
  926
  
    
  <table shade="rows">

  		




  
  927
  
    
    <tr>

  		




  
  928
  
    
      <td><p><code>$back-top-display</code></p></td>

  		




  
  929
  
    
      <td><p>Condition d'affichage du bouton. Valeurs possibles: <var>mobile-only</var>, <var>block</var>, <var>inline</var>, <var>none</var>.</p></td>

  		




  
  930
  
    
      <td><p><var>none</var></p></td>

  		




  
  931
  
    
    </tr>

  		




  
  932
  
    
    <tr>

  		




  
  933
  
    
      <td><p><code>$back-top-icon-character</code></p></td>

  		




  
  934
  
    
      <td><p>Caractère UTF-8 de l'icône du bouton.</p></td>

  		




  
  935
  
    
      <td><p><var>"\f102"</var>(icone "angle-double-top")</p></td>

  		




  
  936
  
    
    </tr>

  		




  
  937
  
    
    <tr>

  		




  
  938
  
    
      <td><p><code>$back-top-icon-size</code></p></td>

  		




  
  939
  
    
      <td><p>Taille de l'icône.</p></td>

  		




  
  940
  
    
      <td><p><var>2.5em</var></p></td>

  		




  
  941
  
    
    </tr>

  		




  
  942
  
    
    <tr>

  		




  
  943
  
    
      <td><p><code>$back-top-icon-label-space</code></p></td>

  		




  
  944
  
    
      <td><p>Espace entre l'icône et le label du bouton</p></td>

  		




  
  945
  
    
      <td><p><var>0.33em</var></p></td>

  		




  
  946
  
    
    </tr>

  		




  
  947
  
    
    <tr>

  		




  
  948
  
    
      <td><p><code>$back-top-layout-direction</code></p></td>

  		




  
  949
  
    
      <td><p>Position de l'icône par rapport au label. Soit <var>vertical</var> : icône au dessus du label, soit <var>horizontal</var>: icône à côté du label</p></td>

  		




  
  950
  
    
      <td><p><var>vertical</var></p></td>

  		




  
  951
  
    
    </tr>

  		




  
  952
  
    
  </table>

  		




  918
  953
  
    

  		




  919
  954
  
    
</section>

  		




  920
  955
  
    

  		












  

    
      static/includes/_back-top.scss
    
  





  
  1
  
    
// Back to top link

  		




  
  2
  
    
$back-top-display: none !default; // `mobile-only || block || inline || none`

  		




  
  3
  
    
$back-top-icon-character: "\f102" !default; // any content CSS property values, default: fontawesome angle-double-up

  		




  
  4
  
    
$back-top-icon-size: 2.5em !default;

  		




  
  5
  
    
$back-top-icon-label-space: .33em;

  		




  
  6
  
    
$back-top-layout-direction: vertical !default; // horizontal || vertical

  		




  
  7
  
    
// layout position

  		




  
  8
  
    
// 	values: `static (options) || fixed (options)`

  		




  
  9
  
    
// 	static options values: `left: length || right: length`

  		




  
  10
  
    
//	fixed options values: one or more of

  		




  
  11
  
    
//		`left: length || right: length || top: length || bottom: length`

  		




  
  12
  
    
//		separated by comma

  		




  
  13
  
    
//	examples: `static (left: 2em)`, `fixed (right: 0, bottom: 20px)`

  		




  
  14
  
    
$back-top-layout-position: static (right) !default;

  		




  
  15
  
    

  		




  
  16
  
    
// display options

  		




  
  17
  
    
.back-top {

  		




  
  18
  
    
	@if $back-top-display == none {

  		




  
  19
  
    
		@include sr-only();

  		




  
  20
  
    
	} @else if $back-top-display == mobile-only {

  		




  
  21
  
    
		@extend .mobile-only;

  		




  
  22
  
    
	} @else {

  		




  
  23
  
    
		display: $back-top-display;

  		




  
  24
  
    
	}

  		




  
  25
  
    
}

  		




  
  26
  
    

  		




  
  27
  
    
// Default link styles

  		




  
  28
  
    
.back-top--link {

  		




  
  29
  
    
	display: inline-flex;

  		




  
  30
  
    
	align-items: center;

  		




  
  31
  
    
	// icon

  		




  
  32
  
    
	&::before {

  		




  
  33
  
    
		content: $back-top-icon-character;

  		




  
  34
  
    
		font-family: fontawesome, sans-serif;

  		




  
  35
  
    
		font-size: $back-top-icon-size;

  		




  
  36
  
    
	}

  		




  
  37
  
    
}

  		




  
  38
  
    

  		




  
  39
  
    
//

  		




  
  40
  
    
// Layout options

  		




  
  41
  
    
//

  		




  
  42
  
    

  		




  
  43
  
    
// Layout direction

  		




  
  44
  
    
@if ($back-top-layout-direction == vertical) {

  		




  
  45
  
    
	.back-top--link-label {

  		




  
  46
  
    
		margin-left: $back-top-icon-label-space;

  		




  
  47
  
    
		margin-right: $back-top-icon-label-space;

  		




  
  48
  
    
	}

  		




  
  49
  
    
} @else if ($back-top-layout-direction == horizontal) {

  		




  
  50
  
    
	.back-top--link-label {

  		




  
  51
  
    
		margin-top: $back-top-icon-label-space;

  		




  
  52
  
    
		margin-bottom: $back-top-icon-label-space;

  		




  
  53
  
    
	}

  		




  
  54
  
    
	.back-top--link {

  		




  
  55
  
    
		flex-direction: column;

  		




  
  56
  
    
	}

  		




  
  57
  
    
}

  		




  
  58
  
    

  		




  
  59
  
    
// Layout Position

  		




  
  60
  
    
// refere to CSS position property (static or fixed)

  		




  
  61
  
    
$back-top-layout-position-type: nth($back-top-layout-position, 1);

  		




  
  62
  
    
$back-top-layout-position-datas: false;

  		




  
  63
  
    
@if (length($back-top-layout-position) > 1) {

  		




  
  64
  
    
	$back-top-layout-position-datas: nth($back-top-layout-position, 2);

  		




  
  65
  
    
}

  		




  
  66
  
    

  		




  
  67
  
    
.back-top--link {

  		




  
  68
  
    
	position: $back-top-layout-position-type;

  		




  
  69
  
    
	z-index: 1000;

  		




  
  70
  
    
}

  		




  
  71
  
    

  		




  
  72
  
    
@if ($back-top-layout-position-type == static) {

  		




  
  73
  
    
	.back-top {

  		




  
  74
  
    
		@if (type-of($back-top-layout-position-datas) == map) {

  		




  
  75
  
    
			@each $text-align, $padding-value in $back-top-layout-position-datas {

  		




  
  76
  
    
				text-align: $text-align;

  		




  
  77
  
    
				padding-#{$text-align}: $padding-value;

  		




  
  78
  
    
			}

  		




  
  79
  
    
		} @else if {

  		




  
  80
  
    
			text-align: $back-top-layout-position-datas;

  		




  
  81
  
    
		}

  		




  
  82
  
    
	}

  		




  
  83
  
    
}

  		




  
  84
  
    

  		




  
  85
  
    
@if ($back-top-layout-position-type == fixed) {

  		




  
  86
  
    
	.back-top--link {

  		




  
  87
  
    
		@if (type-of($back-top-layout-position-datas) == map) {

  		




  
  88
  
    
			@each $property, $value in $back-top-layout-position-datas {

  		




  
  89
  
    
				#{$property}: $value;

  		




  
  90
  
    
			}

  		




  
  91
  
    
		} @else if (

  		




  
  92
  
    
			type-of($back-top-layout-position-datas) == list or

  		




  
  93
  
    
			type-of($back-top-layout-position-datas) == string

  		




  
  94
  
    
		) {

  		




  
  95
  
    
			@each $property in $back-top-layout-position-datas {

  		




  
  96
  
    
				#{$property}: 0;

  		




  
  97
  
    
			}

  		




  
  98
  
    
		}

  		




  
  99
  
    
	}

  		




  
  100
  
    
}

  		




  
  101
  
    

  		




  
  102
  
    
// Show/hide animation

  		




  
  103
  
    
// $back-top-layout-position-type == fixed, JS add .back-top-scroll-Y class

  		




  
  104
  
    
// and a .[below | above]-scroll-position to component (when scroll goes a custom limit)

  		




  
  105
  
    
@keyframes back-top-show {

  		




  
  106
  
    
	0% {

  		




  
  107
  
    
		opacity: 0;

  		




  
  108
  
    
		z-index: -1;

  		




  
  109
  
    
	}

  		




  
  110
  
    
	1% {

  		




  
  111
  
    
		z-index: 1000;

  		




  
  112
  
    
	}

  		




  
  113
  
    
	100% {

  		




  
  114
  
    
		opacity: 1;

  		




  
  115
  
    
		z-index: 1000;

  		




  
  116
  
    
	}

  		




  
  117
  
    
}

  		




  
  118
  
    
@keyframes back-top-hide {

  		




  
  119
  
    
	0% {

  		




  
  120
  
    
		opacity: 1;

  		




  
  121
  
    
		z-index: 1000;

  		




  
  122
  
    
	}

  		




  
  123
  
    
	99% {

  		




  
  124
  
    
		z-index: -1;

  		




  
  125
  
    
	}

  		




  
  126
  
    
	100% {

  		




  
  127
  
    
		opacity: 0;

  		




  
  128
  
    
		z-index: -1;

  		




  
  129
  
    
	}

  		




  
  130
  
    
}

  		




  
  131
  
    
.back-top-scrollY {

  		




  
  132
  
    
	animation-fill-mode: both;

  		




  
  133
  
    
	animation-duration: 600ms;

  		




  
  134
  
    
	&.below-scroll-limit  {

  		




  
  135
  
    
		animation-name: back-top-show;

  		




  
  136
  
    
	}

  		




  
  137
  
    
	&.above-scroll-limit {

  		




  
  138
  
    
		animation-name: back-top-hide;

  		




  
  139
  
    
	}

  		




  
  140
  
    
}

  		












  

    
      static/includes/_publik.scss
    
  





  12
  12
  
    
@import 'misc';

  		




  13
  13
  
    
@import 'a11y';

  		




  14
  14
  
    
@import 'carrousel';

  		




  
  15
  
    
@import 'back-top';

  		




  15
  16
  
    
@import 'library';

  		












  

    
      static/montpellier/style.scss
    
  





  13
  13
  
    
@import '../includes/misc';

  		




  14
  14
  
    
@import '../includes/a11y';

  		




  15
  15
  
    
@import '../includes/transitions/_ball_running_dots';

  		




  
  16
  
    
@import '../includes/back-top';

  		




  16
  17
  
    
@import 'custom';

  		












  

    
      templates/combo/page_template.html
    
  





  143
  143
  
    
{% end_skeleton_extra_placeholder %}

  		




  144
  144
  
    
{% endblock %}

  		




  145
  145
  
    

  		




  
  146
  
    
{% block back-top %}

  		




  
  147
  
    
  {% include 'includes/back-top.html' %}

  		




  
  148
  
    
{% endblock %}

  		




  
  149
  
    

  		




  146
  150
  
    
{% block body-bottom %}

  		




  147
  151
  
    
{% skeleton_extra_placeholder service-worker %}

  		




  148
  152
  
    
{% if page.pk %}  {# limit this to concrete pages on combo (ex: not 404) #}

  		












  

    
      templates/includes/back-top.html
    
  





  
  1
  
    
<div class="back-top">

  		




  
  2
  
    
  <a class="back-top--link" href="#nav-skip" accesskey="t" aria-label="Retour en haut de page">

  		




  
  3
  
    
    <span class="back-top--link-label">

  		




  
  4
  
    
      {% block back-top-label %}

  		




  
  5
  
    
        Retour

  		




  
  6
  
    
      {% endblock %}

  		




  
  7
  
    
    </span>

  		




  
  8
  
    
  </a>

  		




  
  9
  
    
</div>

  		




  
  10
  
    

  		




  
  11
  
    
{% block back-top-script %}

  		




  
  12
  
    
<script>

  		




  
  13
  
    
  var back_top_scrollY;

  		




  
  14
  
    
  $(function(){

  		




  
  15
  
    
    var back_top_link = document.querySelector('.back-top--link');

  		




  
  16
  
    
    var is_fixed = getComputedStyle(back_top_link, null).getPropertyValue("position") === "fixed";

  		




  
  17
  
    
    if (is_fixed) {

  		




  
  18
  
    
      back_top_link.classList.add('back-top-scrollY');

  		




  
  19
  
    
      back_top_scroll_Y = new ComboScrollY({

  		




  
  20
  
    
        limit: {% block back-top-scrollY-limit %}200{% endblock %},

  		




  
  21
  
    
        below: function(){

  		




  
  22
  
    
          {% block back-top-scrollY-below-callback %}

  		




  
  23
  
    
          back_top_link.classList.add('below-scroll-limit');

  		




  
  24
  
    
          back_top_link.classList.remove('above-scroll-limit');

  		




  
  25
  
    
          {% endblock %}

  		




  
  26
  
    
        },

  		




  
  27
  
    
        above: function(){

  		




  
  28
  
    
          {% block back-top-scrollY-above-callback %}

  		




  
  29
  
    
          back_top_link.classList.add('above-scroll-limit');

  		




  
  30
  
    
          back_top_link.classList.remove('below-scroll-limit');

  		




  
  31
  
    
          {% endblock %}

  		




  
  32
  
    
        }

  		




  
  33
  
    
      });

  		




  
  34
  
    
    }

  		




  
  35
  
    
  });

  		




  
  36
  
    
</script>

  		




  
  37
  
    
{% endblock %}

  		












  

    
      templates/theme.html
    
  





  148
  148
  
    
      {% block footer %}

  		




  149
  149
  
    
      <p id="legal">Copyright © 2005-2016 Entr'ouvert</p>

  		




  150
  150
  
    
      {% endblock %}

  		




  151
  
  
    
      {% block footer-bottom %}{% endblock %}

  		




  
  151
  
    
      {% block footer-bottom %}

  		




  
  152
  
    
          {% block back-top %}

  		




  
  153
  
    
          {% endblock %}

  		




  
  154
  
    
      {% endblock %}

  		




  152
  155
  
    
    </div>

  		




  153
  156
  
    
    </div>

  		




  154
  157
  
    
    {% block footer-post %}{% endblock %}

  		




  155
  158
  
    
   </footer>

  		




  156
  159
  
    
   </div> <!-- #page -->

  		




  157
  160
  
    
   {% if environment_label %}<span id="environment-label">{{ environment_label }}</span>{% endif %}

  		




  158
  
  
    
   <a style="display: none" href="#" accesskey="t">Retour en haut de page</a>

  		




  159
  161
  
    
   {% include "includes/tracking.html" %}

  		




  160
  162
  
    
   {% block body-bottom %}

  		




  161
  163
  
    
   {% endblock %}

  		




  162
  
  
    
-