Projet

Général

Profil

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

Serghei Mihai, 23 août 2018 17:47

Télécharger (43,9 ko)

Voir les différences:

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

 static/villeurbanne-2018/_custom.scss         | 418 ++++++++++++++++++
 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     |  80 ++++
 .../variants/villeurbanne-2018/theme.html     |  83 ++++
 themes.json                                   |   8 +
 15 files changed, 632 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: 0 0 10px 0 silver;
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
	&.trackingcodeinputcell {
99
		background-color: $primary-color;
100
		font-family: Roboto, serif;
101
		color: #ffffff;
102
		border-color: $primary-color;
103
		h2:first-child {
104
			color: #ffffff;
105
			font-size: 1.875rem;
106
			padding: 1ex;
107
			background-color: $primary-color;
108
			&::before {
109
				display: none;
110
			}
111
		}
112
		button {
113
			background: #ffffff;
114
			color: $primary-color;
115
		}
116
		#tracking-code {
117
			width: 13rem;
118
			padding: 0 1rem;
119
			color: $primary-color;
120
			height: 3.125rem;
121
			margin-right: 0.325rem;
122
		}
123
	}
124
	&.dashboard-title {
125
		box-shadow: 0 0 10px 0 silver;
126
		h2:first-child {
127
			padding: 1ex;
128
			background-color: #eeeeee;
129
			font-size: 1.875rem;
130
			&::before {
131
				display: none;
132
			}
133
		}
134
	}
135
	&.dashboard {
136
		border: 0;
137
		padding: 1.5rem;
138
		background-color: #eeeeee;
139
		ul {
140
			li {
141
				a {
142
					font-weight: 700;
143
					font-size: 1.1rem;
144
					color: #a9aaac;
145
					border-bottom: 1px solid #a9aaac;
146
					&:hover {
147
						color: #00515e;
148
						text-decoration: underline;
149
					}
150
				}
151
				&.selected a {
152
					color: #00515e;
153
					text-decoration: underline;
154
				}
155
				@each $item in (profil, demandes, porte-document, alertes) {
156
					&.menu-#{$item} a {
157
						background-image: url('images/#{$item}.png');
158
						background-size: auto 2.5em;
159
						background-repeat: no-repeat;
160
						padding: 1.5rem 0 1.5rem 3.5rem;
161
						background-position: left center;
162
						&:hover {
163
							background-image: url('images/#{$item}-active.png');
164
						}
165
					}
166
					&.menu-#{$item}.selected a {
167
						background-image: url('images/#{$item}-active.png');
168
					}
169
				}
170
			}
171
		}
172
	}
173
}
174

  
175
ul.account-management li {
176
	padding: 0;
177
	a {
178
		font-weight: 700;
179
	}
180
}
181

  
182
.field {
183
	margin-bottom: 0.95rem;
184
	.label {
185
		padding: 0;
186
		text-align: left;
187
	}
188
	.value {
189
		font-weight: 700;
190
		line-height: 1.125rem;
191
	}
192
}
193

  
194
div.block {
195
	flex-wrap: wrap;
196
	@media screen and (max-width: $mobile-limit) {
197
		padding: 0;
198
	}
199
}
200

  
201
div.login-actions {
202
	font-style: italic;
203
	font-size: 1.125rem;
204
	line-height: 1.25rem;
205
	color: #636361;
206
	margin-bottom: 1.25rem;
207
}
208

  
209
div#login-page {
210
	display: flex;
211
	justify-content: center;
212
	padding: 3.75rem 0;
213
	div.block {
214
		max-width: 26.25rem;
215
		box-sizing: border-box;
216
		width: 100%;
217
		background-color: #eeeeee;
218
		h2:first-child {
219
			background-color: #eeeeee;
220
		}
221
	}
222
	div#welcome-text {
223
		display: none;
224
	}
225
	p {
226
		margin-bottom: 1.875rem;
227
	}
228
	form {
229
		input {
230
			width: 100%;
231
		}
232
		@include bottom-border;
233
	}
234
}
235

  
236
div#fc-button {
237
	box-shadow: 0 0 0;
238
	@media screen and (max-width: $mobile-limit) {
239
		width: 220px;
240
	}
241
	a.button div {
242
		height: auto;
243
	}
244
}
245
div#fc-button-wrapper p {
246
	line-height: 1.4;
247
	font-size: 1.125rem;
248
}
249

  
250
div.cell.wcsformsofcategorycell {
251
	box-shadow: 0 0 10px 0 silver;
252
	ul {
253
		> li > a {
254
			border: 0;
255
			position: relative;
256
			padding-left: 2rem;
257
			&::before {
258
				position: absolute;
259
				content: '\f0da'; /* caret-right */
260
				font-family: FontAwesome;
261
				margin-right: 0.5rem;
262
				color: #cccccc;
263
				left: 1rem;
264
			}
265
		}
266
	}
267
}
268

  
269
div#tracking-code {
270
	color: #ffffff;
271
	background-color: $primary-color;
272
	h3 {
273
		background-color: $primary-color;
274
		color: #ffffff;
275
		padding-left: 0.5ex;
276
	}
277
	a {
278
		color: #ffffff;
279
		font-size: 100%;
280
	}
281
}
282

  
283
div#steps ol {
284
	background-color: #eeeeee;
285
	padding: 0 1ex;
286
	li {
287
		display: flex;
288
		align-items: center;
289
		span.marker {
290
			font-size: 150%;
291
			font-weight: 700;
292
		}
293
		span.marker, span.label {
294
			color: #aaaaaa;
295
			white-space: wrap;
296
			text-align:left;
297
			white-space: normal;
298
		}
299
		&.current {
300
			border-bottom: 1px solid #ccc;
301
			@media screen and (max-width: $mobile-limit) {
302
				border-bottom: 0;
303
			}
304
			span.marker, span.label {
305
				color: $primary-color;
306
			}
307
		}
308
	}
309
}
310

  
311
div.widget {
312
	@include bottom-border;
313
}
314

  
315
div.buttons {
316
	div.widget::after {
317
		display: none;
318
	}
319
	> div {
320
		@media screen and (max-width: $mobile-limit) {
321
			float: none;
322
		}
323
	}
324
	div.submit-button {
325
		float: right;
326
		button::after {
327
			content: '\f054'; /* chevron-right */
328
			font-family: FontAwesome;
329
			margin-left: 0.5rem;
330
		}
331
	}
332
	div.previous-button {
333
		float: right;
334
		button::before {
335
			content: '\f053'; /* chevron-left */
336
			font-family: FontAwesome;
337
			margin-right: 0.5rem;
338
		}
339
	}
340
	div.cancel-button {
341
		float: left;
342
		@media screen and (max-width: $mobile-limit) {
343
			float: none;
344
		}
345
	}
346
}
347

  
348
div#summary {
349
	position: relative;
350
	h2 {
351
		@include bottom-border(73%);
352
	}
353
	a#disclose-dataview {
354
		background: $primary-color;
355
		position: absolute;
356
		right: 0;
357
		top: 30%;
358
		color: #ffffff;
359
		padding: 0.3rem 0.6rem;
360
		font-family: 'Bitter', sans-serif;
361
		font-weight: 700;
362
		&::after {
363
			content: '\f078'; /* chevron-down */
364
			font-family: FontAwesome;
365
			margin-left: 0.5rem;
366
		}
367
	}
368
	div.dataview {
369
		div.page {
370
			h3 {
371
				font-family: 'Bitter', sans-serif;
372
				font-size: 1.875rem;
373
				font-weight: 700;
374
			}
375
			@include bottom-border;
376
		}
377
		span.label {
378
			color: $primary-color;
379
			text-transform: uppercase;
380
			font-family: "Roboto Condensed", sans-serif;
381
			margin-bottom: 0.625rem;
382
			font-size: 1.25rem;
383
			font-weight: 700;
384
			display: inline-block;
385
			padding: 0;
386
		}
387
		div.value, span.value {
388
			color: #636361;
389
			font-family: "Roboto", sans-serif;
390
			font-size: 1.25rem;
391
			font-weight: normal;
392
			margin: 0;
393
		}
394
	}
395
}
396

  
397
ul#evolutions, div#receipt-intro {
398
	font-size: 1.25rem;
399
	color: #636361;
400
}
401

  
402
ul#evolutions {
403
	li span.item {
404
		background: $primary-color !important;
405
		color: #ffffff !important;
406
	}
407
	&::after, li::after {
408
		background: $primary-color;
409
	}
410
	span.status {
411
		font-weight: normal;
412
	}
413
	div.evolution-metadata {
414
		padding-top: 15px;
415
	}
416
}
417

  
418

  
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: 0.5em 0.5em 0.5em 1.5em;
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('<footer class="footer">', '''
65
    <div id="footer-wrapper">
66
    <div id="footer">
67
      {% block footer %}
68
      {% endblock %}
69
    </div>
70
    </div>
71
<footer class="footer">
72
''')
73

  
74
content = content.replace('</body>', '''
75
{% block tracking %}
76
{% endblock %}
77
</body>
78
''')
79

  
80
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
583 583
     "theme_color": "#01A0BE"
584 584
   }
585 585
  },
586
  {"id": "villeurbanne-2018",
587
   "label": "Villeurbanne 2018",
588
   "variables": {
589
     "css_variant": "villeurbanne-2018",
590
     "no_extra_js": true,
591
     "theme_color": "#0094aa"
592
   }
593
  },
586 594
  {"id": "minint",
587 595
   "label": "Ministère de l'Intérieur",
588 596
   "variables": {
589
-