0001-add-back-top-component-45145.patch
static/includes/_back-top.scss | ||
---|---|---|
1 |
// Back to top links |
|
2 |
$back-top-display: none !default; // mobile-only || block || inline |
|
3 |
$back-top-icon-character: "\f102" !default; // any content CSS property values |
|
4 |
$back-top-icon-size: 2.5em !default; |
|
5 |
$back-top-layout-direction: vertical !default; |
|
6 |
$back-top-layout-position: [static (right)] !default; |
|
7 |
$back-top-icon-label-space: .33em; |
|
8 | ||
9 |
// display options |
|
10 |
.back-top { |
|
11 |
@if $back-top-display == none { |
|
12 |
@include sr-only(); |
|
13 |
} @else if $back-top-display == mobile-only { |
|
14 |
@extend .mobile-only; |
|
15 |
} @else { |
|
16 |
display: $back-top-display; |
|
17 |
} |
|
18 |
} |
|
19 | ||
20 |
// Default link styles |
|
21 |
.back-top--link { |
|
22 |
display: inline-flex; |
|
23 |
align-items: center; |
|
24 |
// icon |
|
25 |
&::before { |
|
26 |
content: $back-top-icon-character; |
|
27 |
font-family: fontawesome, sans-serif; |
|
28 |
font-size: $back-top-icon-size; |
|
29 |
} |
|
30 |
} |
|
31 | ||
32 |
// |
|
33 |
// Layout options |
|
34 |
// |
|
35 | ||
36 |
// Layout direction |
|
37 |
@if ($back-top-layout-direction == vertical) { |
|
38 |
.back-top--link-label { |
|
39 |
margin-left: $back-top-icon-label-space; |
|
40 |
margin-right: $back-top-icon-label-space; |
|
41 |
} |
|
42 |
} @else if ($back-top-layout-direction == horizontal) { |
|
43 |
.back-top--link-label { |
|
44 |
margin-top: $back-top-icon-label-space; |
|
45 |
margin-bottom: $back-top-icon-label-space; |
|
46 |
} |
|
47 |
.back-top--link { |
|
48 |
flex-direction: column; |
|
49 |
} |
|
50 |
} |
|
51 | ||
52 |
// Layout Position |
|
53 |
// refere to CSS position property (static or fixed) |
|
54 |
$back-top-layout-position-type: nth($back-top-layout-position, 1); |
|
55 |
$back-top-layout-position-datas: false; |
|
56 |
@if (length($back-top-layout-position) > 1) { |
|
57 |
$back-top-layout-position-datas: nth($back-top-layout-position, 2); |
|
58 |
} |
|
59 | ||
60 |
.back-top--link { |
|
61 |
position: $back-top-layout-position-type; |
|
62 |
z-index: 1000; |
|
63 |
} |
|
64 | ||
65 |
@if ($back-top-layout-position-type == static) { |
|
66 |
.back-top { |
|
67 |
@if (type-of($back-top-layout-position-datas) == map) { |
|
68 |
@each $text-align, $padding-value in $back-top-layout-position-datas { |
|
69 |
text-align: $text-align; |
|
70 |
padding-#{$text-align}: $padding-value; |
|
71 |
} |
|
72 |
} @else if { |
|
73 |
text-align: $back-top-layout-position-datas; |
|
74 |
} |
|
75 |
} |
|
76 |
} |
|
77 | ||
78 |
@if ($back-top-layout-position-type == fixed) { |
|
79 |
.back-top--link { |
|
80 |
@if (type-of($back-top-layout-position-datas) == map) { |
|
81 |
@each $property, $value in $back-top-layout-position-datas { |
|
82 |
#{$property}: $value; |
|
83 |
} |
|
84 |
} @else if ( |
|
85 |
type-of($back-top-layout-position-datas) == list or |
|
86 |
type-of($back-top-layout-position-datas) == string |
|
87 |
) { |
|
88 |
@each $property in $back-top-layout-position-datas { |
|
89 |
#{$property}: 0; |
|
90 |
} |
|
91 |
} |
|
92 |
} |
|
93 |
} |
|
94 | ||
95 |
// Show/hide animation |
|
96 |
// if back_top_JS, JS add .back-top-scroll-Y |
|
97 |
// and a .[below | above]-scroll-position to component (when scroll goes a custom limit) |
|
98 |
@keyframes back-top-show { |
|
99 |
0% { |
|
100 |
opacity: 0; |
|
101 |
z-index: -1; |
|
102 |
} |
|
103 |
1% { |
|
104 |
z-index: 1000; |
|
105 |
} |
|
106 |
100% { |
|
107 |
opacity: 1; |
|
108 |
z-index: 1000; |
|
109 |
} |
|
110 |
} |
|
111 |
@keyframes back-top-hide { |
|
112 |
0% { |
|
113 |
opacity: 1; |
|
114 |
z-index: 1000; |
|
115 |
} |
|
116 |
99% { |
|
117 |
z-index: -1; |
|
118 |
} |
|
119 |
100% { |
|
120 |
opacity: 0; |
|
121 |
z-index: -1; |
|
122 |
} |
|
123 |
} |
|
124 |
.back-top-scroll-Y { |
|
125 |
animation-fill-mode: both; |
|
126 |
animation-duration: 600ms; |
|
127 |
&.below-scroll-limit { |
|
128 |
animation-name: back-top-show; |
|
129 |
} |
|
130 |
&.above-scroll-limit { |
|
131 |
animation-name: back-top-hide; |
|
132 |
} |
|
133 |
} |
static/includes/_publik.scss | ||
---|---|---|
12 | 12 |
@import 'misc'; |
13 | 13 |
@import 'a11y'; |
14 | 14 |
@import 'carrousel'; |
15 |
@import 'back-top'; |
|
15 | 16 |
@import 'library'; |
templates/combo/page_template.html | ||
---|---|---|
138 | 138 |
{% end_skeleton_extra_placeholder %} |
139 | 139 |
{% endblock %} |
140 | 140 | |
141 |
{% block back-top %} |
|
142 |
{% include 'includes/back-top.html' %} |
|
143 |
{% endblock %} |
|
144 | ||
141 | 145 |
{% block body-bottom %} |
142 | 146 |
{% skeleton_extra_placeholder service-worker %} |
143 | 147 |
{% if page.pk %} {# limit this to concrete pages on combo (ex: not 404) #} |
templates/includes/back-top.html | ||
---|---|---|
1 |
{% load i18n %} |
|
2 |
<div class="back-top"> |
|
3 |
<a class="back-top--link" href="#nav-skip" accesskey="t" aria-label="{% trans 'Back top of page' %}"> |
|
4 |
<span class="back-top--link-label"> |
|
5 |
{% block back-top-label %} |
|
6 |
{% trans 'Back top of page' %} |
|
7 |
{% endblock %} |
|
8 |
</span> |
|
9 |
</a> |
|
10 |
</div> |
|
11 | ||
12 |
{% if back_top_JS %} |
|
13 |
{% block back-top-script %} |
|
14 |
<script> |
|
15 |
var back_top_scrollY; |
|
16 |
$(function(){ |
|
17 |
var back_top_link = document.querySelector('.back-top--link'); |
|
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 |
</script> |
|
36 |
{% endblock %} |
|
37 |
{% endif %} |
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 |
- |