Projet

Général

Profil

0001-villeurbanne-2018-initial-theme-25259.patch

Serghei Mihai, 21 août 2018 15:38

Télécharger (43,9 ko)

Voir les différences:

Subject: [PATCH] villeurbanne-2018: initial theme (#25259)

 static/villeurbanne-2018/_custom.scss         | 425 ++++++++++++++++++
 static/villeurbanne-2018/_vars.scss           |  36 ++
 .../images/alertes-active.png                 | Bin 0 -> 3922 bytes
 static/villeurbanne-2018/images/alertes.png   | Bin 0 -> 2193 bytes
 .../images/demandes-active.png                | Bin 0 -> 1609 bytes
 static/villeurbanne-2018/images/demandes.png  | Bin 0 -> 1609 bytes
 .../villeurbanne-2018/images/icon-pause.png   | Bin 0 -> 445 bytes
 .../images/porte-document-active.png          | Bin 0 -> 4088 bytes
 .../images/porte-document.png                 | Bin 0 -> 2244 bytes
 .../images/profil-active.png                  | Bin 0 -> 2456 bytes
 static/villeurbanne-2018/images/profil.png    | Bin 0 -> 2456 bytes
 static/villeurbanne-2018/style.scss           |   7 +
 .../villeurbanne-2018/prepare-template.py     |  70 +++
 .../variants/villeurbanne-2018/theme.html     |  83 ++++
 themes.json                                   |   8 +
 15 files changed, 629 insertions(+)
 create mode 100644 static/villeurbanne-2018/_custom.scss
 create mode 100644 static/villeurbanne-2018/_vars.scss
 create mode 100644 static/villeurbanne-2018/images/alertes-active.png
 create mode 100644 static/villeurbanne-2018/images/alertes.png
 create mode 100644 static/villeurbanne-2018/images/demandes-active.png
 create mode 100644 static/villeurbanne-2018/images/demandes.png
 create mode 100644 static/villeurbanne-2018/images/icon-pause.png
 create mode 100644 static/villeurbanne-2018/images/porte-document-active.png
 create mode 100644 static/villeurbanne-2018/images/porte-document.png
 create mode 100644 static/villeurbanne-2018/images/profil-active.png
 create mode 100644 static/villeurbanne-2018/images/profil.png
 create mode 100644 static/villeurbanne-2018/style.scss
 create mode 100644 templates/variants/villeurbanne-2018/prepare-template.py
 create mode 100644 templates/variants/villeurbanne-2018/theme.html
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&eacute;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
-