0001-villeurbanne-2018-initial-theme-25259.patch
static/villeurbanne-2018/_custom.scss | ||
---|---|---|
1 |
@mixin bottom-border($max-width: 19rem) { |
|
2 |
&::after { |
|
3 |
display: block; |
|
4 |
margin: 1.5rem 0; |
|
5 |
content: ''; |
|
6 |
max-width: $max-width; |
|
7 |
width: 100%; |
|
8 |
height: 0.3125rem; |
|
9 |
background-color: $primary-color; |
|
10 |
} |
|
11 |
} |
|
12 | ||
13 |
%button { |
|
14 |
text-transform: uppercase; |
|
15 |
font-weight: 700; |
|
16 |
font-size: 0.87rem; |
|
17 |
padding: 5px 15px; |
|
18 |
line-height: 1rem; |
|
19 |
color: #ffffff; |
|
20 |
} |
|
21 | ||
22 |
div#nav { |
|
23 |
margin-top: 0; |
|
24 |
margin-bottom: 0; |
|
25 |
> ul { |
|
26 |
margin-top: 0; |
|
27 |
margin-bottom: 0; |
|
28 |
} |
|
29 |
} |
|
30 | ||
31 |
#main-content { |
|
32 |
background: white; |
|
33 |
padding: 10px; |
|
34 |
@media screen and (max-width: $mobile-limit) { |
|
35 |
padding: 0 0 10px 0; |
|
36 |
} |
|
37 |
} |
|
38 | ||
39 |
label { |
|
40 |
color: $primary-color; |
|
41 |
text-transform: uppercase; |
|
42 |
font-family: "Roboto Condensed", sans-serif; |
|
43 |
font-size: 1.125rem; |
|
44 |
margin-bottom: 20px; |
|
45 |
} |
|
46 | ||
47 |
input, select, textarea { |
|
48 |
box-shadow: 1px 2px 8px rgba(23, 23, 22, 0.2); |
|
49 |
height: 2.2rem; |
|
50 |
} |
|
51 | ||
52 |
div#rub_service { |
|
53 |
h2 { |
|
54 |
color: #000000; |
|
55 |
margin: 0; |
|
56 |
text-align: left; |
|
57 |
padding: 1ex; |
|
58 |
} |
|
59 |
> h2:first-child { |
|
60 |
@include bottom-border(100%); |
|
61 |
} |
|
62 |
div.back-home-button { |
|
63 |
margin-bottom: 3ex; |
|
64 |
a { |
|
65 |
@extend %button; |
|
66 |
background-color: $button-background; |
|
67 |
border-radius: $button-border-radius; |
|
68 |
&::before { |
|
69 |
content: '\f053'; /* chevron-left */ |
|
70 |
font-family: FontAwesome; |
|
71 |
margin-right: 0.5rem; |
|
72 |
} |
|
73 |
} |
|
74 |
} |
|
75 |
} |
|
76 | ||
77 | ||
78 |
.gru-content { |
|
79 |
div.cell, div.block, div.a2-block { |
|
80 |
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.28); |
|
81 |
padding-bottom: 0.1ex; |
|
82 |
margin-bottom: 1.4rem; |
|
83 |
h2:first-child { |
|
84 |
&::before { |
|
85 |
content: url("images/icon-pause.png"); |
|
86 |
position: absolute; |
|
87 |
left: 0; |
|
88 |
top: 30%; |
|
89 |
} |
|
90 |
} |
|
91 |
} |
|
92 |
button { |
|
93 |
@extend %button; |
|
94 |
} |
|
95 |
} |
|
96 | ||
97 |
div.cell { |
|
98 |
h2:first-child { |
|
99 |
&::before { |
|
100 |
content: url("images/icon-pause.png"); |
|
101 |
position: absolute; |
|
102 |
left: 0; |
|
103 |
} |
|
104 |
} |
|
105 |
&.trackingcodeinputcell { |
|
106 |
background-color: $primary-color; |
|
107 |
font-family: Roboto, serif; |
|
108 |
color: #ffffff; |
|
109 |
border-color: $primary-color; |
|
110 |
h2:first-child { |
|
111 |
color: #ffffff; |
|
112 |
font-size: 1.875rem; |
|
113 |
padding: 1ex; |
|
114 |
background-color: $primary-color; |
|
115 |
&::before { |
|
116 |
display: none; |
|
117 |
} |
|
118 |
} |
|
119 |
button { |
|
120 |
background: #ffffff; |
|
121 |
color: $primary-color; |
|
122 |
} |
|
123 |
#tracking-code { |
|
124 |
width: 13rem; |
|
125 |
padding: 0 1rem; |
|
126 |
color: $primary-color; |
|
127 |
height: 3.125rem; |
|
128 |
margin-right: 0.325rem; |
|
129 |
} |
|
130 |
} |
|
131 |
&.dashboard-title { |
|
132 |
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.28); |
|
133 |
h2:first-child { |
|
134 |
padding: 1ex; |
|
135 |
background-color: #eeeeee; |
|
136 |
font-size: 1.875rem; |
|
137 |
&::before { |
|
138 |
display: none; |
|
139 |
} |
|
140 |
} |
|
141 |
} |
|
142 |
&.dashboard { |
|
143 |
border: 0; |
|
144 |
padding: 1.5rem; |
|
145 |
background-color: #eeeeee; |
|
146 |
ul { |
|
147 |
li { |
|
148 |
a { |
|
149 |
font-weight: 700; |
|
150 |
font-size: 1.1rem; |
|
151 |
color: #a9aaac; |
|
152 |
border-bottom: 1px solid #a9aaac; |
|
153 |
&:hover { |
|
154 |
color: #00515e; |
|
155 |
text-decoration: underline; |
|
156 |
} |
|
157 |
} |
|
158 |
&.selected a { |
|
159 |
color: #00515e; |
|
160 |
text-decoration: underline; |
|
161 |
} |
|
162 |
@each $item in (profil, demandes, porte-document, alertes) { |
|
163 |
&.menu-#{$item} a { |
|
164 |
background-image: url('images/#{$item}.png'); |
|
165 |
background-size: auto 2.5em; |
|
166 |
background-repeat: no-repeat; |
|
167 |
padding: 1.5rem 0 1.5rem 3.5rem; |
|
168 |
background-position: left center; |
|
169 |
&:hover { |
|
170 |
background-image: url('images/#{$item}-active.png'); |
|
171 |
} |
|
172 |
} |
|
173 |
&.menu-#{$item}.selected a { |
|
174 |
background-image: url('images/#{$item}-active.png'); |
|
175 |
} |
|
176 |
} |
|
177 |
} |
|
178 |
} |
|
179 |
} |
|
180 |
} |
|
181 | ||
182 |
ul.account-management li { |
|
183 |
padding: 0; |
|
184 |
a { |
|
185 |
font-weight: 700; |
|
186 |
} |
|
187 |
} |
|
188 | ||
189 |
.field { |
|
190 |
margin-bottom: 0.95rem; |
|
191 |
.label { |
|
192 |
padding: 0; |
|
193 |
text-align: left; |
|
194 |
} |
|
195 |
.value { |
|
196 |
font-weight: 700; |
|
197 |
line-height: 1.125rem; |
|
198 |
} |
|
199 |
} |
|
200 | ||
201 |
div.block { |
|
202 |
flex-wrap: wrap; |
|
203 |
@media screen and (max-width: $mobile-limit) { |
|
204 |
padding: 0; |
|
205 |
} |
|
206 |
} |
|
207 | ||
208 |
div.login-actions { |
|
209 |
font-style: italic; |
|
210 |
font-size: 1.125rem; |
|
211 |
line-height: 1.25rem; |
|
212 |
color: #636361; |
|
213 |
margin-bottom: 1.25rem; |
|
214 |
} |
|
215 | ||
216 |
div#login-page { |
|
217 |
display: flex; |
|
218 |
justify-content: center; |
|
219 |
padding: 3.75rem 0; |
|
220 |
div.block { |
|
221 |
max-width: 26.25rem; |
|
222 |
box-sizing: border-box; |
|
223 |
width: 100%; |
|
224 |
background-color: #eeeeee; |
|
225 |
h2:first-child { |
|
226 |
background-color: #eeeeee; |
|
227 |
} |
|
228 |
} |
|
229 |
div#welcome-text { |
|
230 |
display: none; |
|
231 |
} |
|
232 |
p { |
|
233 |
margin-bottom: 1.875rem; |
|
234 |
} |
|
235 |
form { |
|
236 |
input { |
|
237 |
width: 100%; |
|
238 |
} |
|
239 |
@include bottom-border; |
|
240 |
} |
|
241 |
} |
|
242 | ||
243 |
div#fc-button { |
|
244 |
box-shadow: 0 0 0; |
|
245 |
@media screen and (max-width: $mobile-limit) { |
|
246 |
width: 220px; |
|
247 |
} |
|
248 |
a.button div { |
|
249 |
height: auto; |
|
250 |
} |
|
251 |
} |
|
252 |
div#fc-button-wrapper p { |
|
253 |
line-height: 1.4; |
|
254 |
font-size: 1.125rem; |
|
255 |
} |
|
256 | ||
257 |
div.cell.wcsformsofcategorycell { |
|
258 |
box-shadow: 0 0 10px 0 silver; |
|
259 |
ul { |
|
260 |
> li > a { |
|
261 |
border: 0; |
|
262 |
position: relative; |
|
263 |
padding-left: 2rem; |
|
264 |
&::before { |
|
265 |
position: absolute; |
|
266 |
content: '\f0da'; /* caret-right */ |
|
267 |
font-family: FontAwesome; |
|
268 |
margin-right: 0.5rem; |
|
269 |
color: #cccccc; |
|
270 |
left: 1rem; |
|
271 |
} |
|
272 |
} |
|
273 |
} |
|
274 |
} |
|
275 | ||
276 |
div#tracking-code { |
|
277 |
color: #ffffff; |
|
278 |
background-color: $primary-color; |
|
279 |
h3 { |
|
280 |
background-color: $primary-color; |
|
281 |
color: #ffffff; |
|
282 |
padding-left: 0.5ex; |
|
283 |
} |
|
284 |
a { |
|
285 |
color: #ffffff; |
|
286 |
font-size: 100%; |
|
287 |
} |
|
288 |
} |
|
289 | ||
290 |
div#steps ol { |
|
291 |
background-color: #eeeeee; |
|
292 |
padding: 0 1ex; |
|
293 |
li { |
|
294 |
display: flex; |
|
295 |
align-items: center; |
|
296 |
span.marker { |
|
297 |
font-size: 150%; |
|
298 |
font-weight: 700; |
|
299 |
} |
|
300 |
span.marker, span.label { |
|
301 |
color: #aaaaaa; |
|
302 |
white-space: wrap; |
|
303 |
text-align:left; |
|
304 |
white-space: normal; |
|
305 |
} |
|
306 |
&.current { |
|
307 |
border-bottom: 1px solid #ccc; |
|
308 |
@media screen and (max-width: $mobile-limit) { |
|
309 |
border-bottom: 0; |
|
310 |
} |
|
311 |
span.marker, span.label { |
|
312 |
color: $primary-color; |
|
313 |
} |
|
314 |
} |
|
315 |
} |
|
316 |
} |
|
317 | ||
318 |
div.widget { |
|
319 |
@include bottom-border; |
|
320 |
} |
|
321 | ||
322 |
div.buttons { |
|
323 |
div.widget::after { |
|
324 |
display: none; |
|
325 |
} |
|
326 |
> div { |
|
327 |
@media screen and (max-width: $mobile-limit) { |
|
328 |
float: none; |
|
329 |
} |
|
330 |
} |
|
331 |
div.submit-button { |
|
332 |
float: right; |
|
333 |
button::after { |
|
334 |
content: '\f054'; /* chevron-right */ |
|
335 |
font-family: FontAwesome; |
|
336 |
margin-left: 0.5rem; |
|
337 |
} |
|
338 |
} |
|
339 |
div.previous-button { |
|
340 |
float: right; |
|
341 |
button::before { |
|
342 |
content: '\f053'; /* chevron-left */ |
|
343 |
font-family: FontAwesome; |
|
344 |
margin-right: 0.5rem; |
|
345 |
} |
|
346 |
} |
|
347 |
div.cancel-button { |
|
348 |
float: left; |
|
349 |
@media screen and (max-width: $mobile-limit) { |
|
350 |
float: none; |
|
351 |
} |
|
352 |
} |
|
353 |
} |
|
354 | ||
355 |
div#summary { |
|
356 |
position: relative; |
|
357 |
h2 { |
|
358 |
@include bottom-border(73%); |
|
359 |
} |
|
360 |
a#disclose-dataview { |
|
361 |
background: $primary-color; |
|
362 |
position: absolute; |
|
363 |
right: 0; |
|
364 |
top: 30%; |
|
365 |
color: #ffffff; |
|
366 |
padding: 0.3rem 0.6rem; |
|
367 |
font-family: 'Bitter', sans-serif; |
|
368 |
font-weight: 700; |
|
369 |
&::after { |
|
370 |
content: '\f078'; /* chevron-down */ |
|
371 |
font-family: FontAwesome; |
|
372 |
margin-left: 0.5rem; |
|
373 |
} |
|
374 |
} |
|
375 |
div.dataview { |
|
376 |
div.page { |
|
377 |
h3 { |
|
378 |
font-family: 'Bitter', sans-serif; |
|
379 |
font-size: 1.875rem; |
|
380 |
font-weight: 700; |
|
381 |
} |
|
382 |
@include bottom-border; |
|
383 |
} |
|
384 |
span.label { |
|
385 |
color: $primary-color; |
|
386 |
text-transform: uppercase; |
|
387 |
font-family: "Roboto Condensed", sans-serif; |
|
388 |
margin-bottom: 0.625rem; |
|
389 |
font-size: 1.25rem; |
|
390 |
font-weight: 700; |
|
391 |
display: inline-block; |
|
392 |
padding: 0; |
|
393 |
} |
|
394 |
div.value, span.value { |
|
395 |
color: #636361; |
|
396 |
font-family: "Roboto", sans-serif; |
|
397 |
font-size: 1.25rem; |
|
398 |
font-weight: normal; |
|
399 |
margin: 0; |
|
400 |
} |
|
401 |
} |
|
402 |
} |
|
403 | ||
404 |
ul#evolutions, div#receipt-intro { |
|
405 |
font-size: 1.25rem; |
|
406 |
color: #636361; |
|
407 |
} |
|
408 | ||
409 |
ul#evolutions { |
|
410 |
li span.item { |
|
411 |
background: $primary-color !important; |
|
412 |
color: #ffffff !important; |
|
413 |
} |
|
414 |
&::after, li::after { |
|
415 |
background: $primary-color; |
|
416 |
} |
|
417 |
span.status { |
|
418 |
font-weight: normal; |
|
419 |
} |
|
420 |
div.evolution-metadata { |
|
421 |
padding-top: 15px; |
|
422 |
} |
|
423 |
} |
|
424 | ||
425 |
static/villeurbanne-2018/_vars.scss | ||
---|---|---|
1 |
$primary-color: #0094aa; |
|
2 | ||
3 |
$font-family: Roboto, sans-serif; |
|
4 |
$font-color: #222; |
|
5 |
$font-size: 16px; |
|
6 | ||
7 |
$width: 1230px; |
|
8 | ||
9 |
$border-radius: 0; |
|
10 | ||
11 |
$nav-background: $primary-color; |
|
12 |
$nav-color: white; |
|
13 |
$nav-active-color: lighten($primary-color, 10%); |
|
14 |
$nav-button-background: transparent; |
|
15 | ||
16 |
$footer-background: #636361; |
|
17 |
$link-color: $primary-color; |
|
18 | ||
19 |
$sidebar-width: 450px; |
|
20 | ||
21 |
$title-color: #636361; |
|
22 |
$title-weight: 700; |
|
23 |
$title-font-size: 1.5rem; |
|
24 |
$title-font-family: "Bitter", sans-serif; |
|
25 |
$title-padding: 1ex 1ex 1ex 3ex; |
|
26 |
$title-background: transparent; |
|
27 | ||
28 |
$cell-title-cover-border: false; |
|
29 |
$cell-entry-hover-effect: none; |
|
30 |
$cell-border: 0; |
|
31 | ||
32 |
$button-background: $primary-color; |
|
33 |
$button-border-radius: 1.8rem; |
|
34 | ||
35 |
$widget-border: 1px solid $primary-color; |
|
36 |
$widget-focus-background: #ffffff; |
static/villeurbanne-2018/style.scss | ||
---|---|---|
1 |
@charset "UTF-8"; |
|
2 | ||
3 |
@import 'vars'; |
|
4 |
@import '../includes/publik'; |
|
5 |
@import '../includes/font-bitter'; |
|
6 |
@import '../includes/font-roboto.scss'; |
|
7 |
@import 'custom'; |
templates/variants/villeurbanne-2018/prepare-template.py | ||
---|---|---|
1 |
#! /usr/bin/env python |
|
2 | ||
3 |
import os |
|
4 |
import subprocess |
|
5 |
import re |
|
6 |
import sys |
|
7 |
from lxml import etree |
|
8 |
from lxml.html import html_parser |
|
9 | ||
10 |
FILENAME = 'tmp.html' |
|
11 | ||
12 |
if os.path.exists(FILENAME): |
|
13 |
os.unlink(FILENAME) |
|
14 | ||
15 |
URL = 'https://perso.entrouvert.org/~smihai/villeurbanne/sample.php' |
|
16 |
subprocess.call(['wget', '--quiet', '-O', FILENAME, '--convert-links', URL]) |
|
17 | ||
18 |
content = open(FILENAME).read().strip() |
|
19 |
if len(content) < 500: |
|
20 |
sys.exit(0) |
|
21 | ||
22 |
root = etree.fromstring(content, parser=html_parser) |
|
23 | ||
24 |
for script in root.xpath('//script'): |
|
25 |
# remove all google related tags |
|
26 |
if script.text and 'google' in script.text or 'google' in script.attrib.get('src', ''): |
|
27 |
parent = script.getparent() |
|
28 |
parent.remove(script) |
|
29 | ||
30 |
# remove external undesired elements |
|
31 |
elements = ['container.css', 'font-awesome', 'fonts.googleapis.com'] |
|
32 |
for link in root.xpath('//link'): |
|
33 |
for element in elements: |
|
34 |
if element in link.attrib['href']: |
|
35 |
parent = link.getparent() |
|
36 |
parent.remove(link) |
|
37 | ||
38 | ||
39 |
# empty "content" container |
|
40 |
for content in root.xpath('//div[@class="main-content"]/div[@class="container"]'): |
|
41 |
content.clear() |
|
42 |
content.attrib['class'] ='publik-container' |
|
43 | ||
44 |
content = etree.tostring(root, method='html', pretty_print=True) |
|
45 | ||
46 |
# remove all references to downloaded temporary file |
|
47 |
content = content.replace(FILENAME, '') |
|
48 | ||
49 |
content = content.replace('<head>', '<head>{% block head %}{% endblock %}') |
|
50 | ||
51 |
content = content.replace('</head>', '<title>{% block global_title %}{% endblock %}</title>\n</head>') |
|
52 | ||
53 |
content = content.replace('<body', |
|
54 |
r'<body {% block bodyargs %}{% endblock %} ') |
|
55 | ||
56 |
content = content.replace('<div class="publik-container">', ''' |
|
57 |
<div class="publik-container"> |
|
58 |
{% block nav %}{% endblock %} |
|
59 |
{% block messages %} |
|
60 |
{% endblock %} |
|
61 |
{% block site-content %} |
|
62 |
{% endblock %}''') |
|
63 | ||
64 |
content = content.replace('</body>', ''' |
|
65 |
{% block tracking %} |
|
66 |
{% endblock %} |
|
67 |
</body> |
|
68 |
''') |
|
69 | ||
70 |
open('base-theme.html', 'w').write(content) |
templates/variants/villeurbanne-2018/theme.html | ||
---|---|---|
1 |
{% extends 'base-theme.html' %} |
|
2 |
{% load i18n static combo %} |
|
3 | ||
4 |
{% block global_title %} |
|
5 |
{% firstof global_title "Villeurbanne" %} {% block title %}{% endblock %} |
|
6 |
{% endblock %} |
|
7 | ||
8 |
{% block head %} |
|
9 |
{% if meta_robots %} |
|
10 |
<meta name="robots" content="{{ meta_robots }}" /> |
|
11 |
{% elif environment_label %} |
|
12 |
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, notranslate, noimageindex" /> |
|
13 |
{% endif %} |
|
14 |
{% if meta_description %} |
|
15 |
<meta name="description" content="{{ meta_description }}" /> |
|
16 |
{% endif %} |
|
17 |
{% if favicon %} |
|
18 |
<link rel="shortcut icon" href="{{site_base}}{% static "" %}{{favicon}}" /> |
|
19 |
{% endif %} |
|
20 |
{% block extra_top_head %} |
|
21 |
{% endblock %} |
|
22 |
{{ media }} |
|
23 |
<link rel="stylesheet" type="text/css" href="{{site_base}}{% static 'villeurbanne-2018/style.css' %}?{{statics_hash}}"> |
|
24 | ||
25 |
{% block extra_css %} |
|
26 |
{% endblock %} |
|
27 |
{% block extra_scripts %} |
|
28 |
{% endblock %} |
|
29 |
{% endblock %} |
|
30 | ||
31 |
{% block bodyargs %}class="touch-ok {% block bodyclasses %}{% endblock %}" {% block bodyattrs %}{% endblock %}{% endblock %} |
|
32 | ||
33 |
{% block user-info %} |
|
34 |
{% if user.is_authenticated %} |
|
35 |
<span class="logged-in"> |
|
36 |
{% if idp_account_url %}<a href="{{idp_account_url}}">{% endif %} |
|
37 |
<span class="connected-user">{{user.first_name}} {{user.last_name}}</span>{% if idp_account_url %}</a>{% endif %} |
|
38 |
<a accesskey="o" class="logout" href="{% url 'auth_logout' %}">Déconnexion</a> |
|
39 |
</span> |
|
40 |
{% else %} |
|
41 |
{% if idp_registration_url %} |
|
42 |
<span class="login"><a accesskey="2" href="{% url 'auth_login' %}">Connexion</a> <span class="sep">/</span> |
|
43 |
<a class="registration" href="{{idp_registration_url}}">Inscription</a></span> |
|
44 |
{% else %} |
|
45 |
<span class="login"><a accesskey="2" href="{% url 'auth_login' %}">Connexion <span class="sep">/</span> Inscription</a></span> |
|
46 |
{% endif %} |
|
47 |
{% endif %} |
|
48 |
{% endblock %} |
|
49 | ||
50 |
{% block nav %} |
|
51 |
<nav> |
|
52 |
<div id="nav" class="togglable"> |
|
53 |
{% block menu %} |
|
54 |
{% endblock %} |
|
55 |
</div> |
|
56 |
</nav> |
|
57 |
{% endblock %} |
|
58 | ||
59 |
{% block messages %} |
|
60 |
{% if messages %} |
|
61 |
<div id="messages"> |
|
62 |
<ul class="messages"> |
|
63 |
{% for message in messages %} |
|
64 |
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li> |
|
65 |
{% endfor %} |
|
66 |
</ul> |
|
67 |
</div> |
|
68 |
{% endif %} |
|
69 |
{% endblock %} |
|
70 | ||
71 |
{% block site-content %} |
|
72 |
<div id="main-content-wrapper"> |
|
73 |
<div id="main-content"> |
|
74 |
<div id="content" class="gru-content"> |
|
75 |
{% block content %} |
|
76 |
{% endblock %} |
|
77 |
</div> |
|
78 |
</div> |
|
79 |
{% endblock %} |
|
80 | ||
81 |
{% block tracking %} |
|
82 |
{% include "includes/tracking.html" %} |
|
83 |
{% endblock %} |
themes.json | ||
---|---|---|
575 | 575 |
"theme_color": "#01A0BE" |
576 | 576 |
} |
577 | 577 |
}, |
578 |
{"id": "villeurbanne-2018", |
|
579 |
"label": "Villeurbanne 2018", |
|
580 |
"variables": { |
|
581 |
"css_variant": "villeurbanne-2018", |
|
582 |
"no_extra_js": true, |
|
583 |
"theme_color": "#0094aa" |
|
584 |
} |
|
585 |
}, |
|
578 | 586 |
{"id": "minint", |
579 | 587 |
"label": "Ministère de l'Intérieur", |
580 | 588 |
"variables": { |
581 |
- |