0001-templates-add-back-top-component-45145.patch
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 | ||
---|---|---|
146 | 146 |
{% block footer %} |
147 | 147 |
<p id="legal">Copyright © 2005-2016 Entr'ouvert</p> |
148 | 148 |
{% endblock %} |
149 |
{% block footer-bottom %}{% endblock %} |
|
149 |
{% block footer-bottom %} |
|
150 |
{% block back-top %} |
|
151 |
{% endblock %} |
|
152 |
{% endblock %} |
|
150 | 153 |
</div> |
151 | 154 |
</div> |
152 | 155 |
{% block footer-post %}{% endblock %} |
153 | 156 |
</footer> |
154 | 157 |
</div> <!-- #page --> |
155 | 158 |
{% if environment_label %}<span id="environment-label">{{ environment_label }}</span>{% endif %} |
156 |
<a style="display: none" href="#" accesskey="t">Retour en haut de page</a> |
|
157 | 159 |
{% include "includes/tracking.html" %} |
158 | 160 |
{% block body-bottom %} |
159 | 161 |
{% endblock %} |
160 |
- |