Browse Source

style: improvements on forms and responsiveness

trophies
Lephe 3 months ago
parent
commit
9291855c87

+ 4
- 4
app/forms/login.py View File

@@ -3,7 +3,7 @@ from wtforms import StringField, PasswordField, BooleanField, SubmitField
3 3
 from wtforms.validators import DataRequired
4 4
 
5 5
 class LoginForm(FlaskForm):
6
-    username = StringField('Pseudonyme :', validators=[DataRequired()])
7
-    password = PasswordField('Mot de passe :', validators=[DataRequired()])
8
-    remember_me = BooleanField('Se souvenir de moi :')
9
-    submit = SubmitField('Connexion')
6
+    username = StringField('Identifiant', validators=[DataRequired()])
7
+    password = PasswordField('Mot de passe', validators=[DataRequired()])
8
+    remember_me = BooleanField('Se souvenir de moi')
9
+    submit = SubmitField('Connexion')

+ 0
- 1
app/static/css/container.css View File

@@ -24,6 +24,5 @@ section h2 {
24 24
 
25 25
 section .avatar {
26 26
 	display: block;
27
-	border-radius: 2px;
28 27
 	width: 128px; height: 128px;
29 28
 }

+ 9
- 2
app/static/css/form.css View File

@@ -24,10 +24,11 @@
24 24
 .form input[type='email'],
25 25
 .form input[type='date'],
26 26
 .form input[type='password'],
27
+.form input[type='search'],
27 28
 .form textarea {
28 29
 	display: block;
29 30
 	width: 100%; padding: 6px 8px;
30
-	border: 1px solid #c0c0c0;
31
+	border: 1px solid #c8c8c8;
31 32
 
32 33
 	/* Transitions when resizing with the mouse produces apparent lag */
33 34
 	transition: all .15s ease, width 0s, height 0s;
@@ -36,9 +37,15 @@
36 37
 .form input[type='email']:focus,
37 38
 .form input[type='date']:focus,
38 39
 .form input[type='password']:focus,
40
+.form input[type='search']:focus,
39 41
 .form textarea:focus {
40 42
 	border-color: #91bfef;
41
-  box-shadow: 0 0 0 3px rgba(87, 143, 228, 0.42);
43
+  box-shadow: 0 0 0 3px rgba(87, 143, 228, 0.4);
44
+}
45
+
46
+.form textarea {
47
+	max-width: 100%;
48
+	resize: vertical;
42 49
 }
43 50
 
44 51
 .form input[type="submit"] {

+ 2
- 2
app/static/css/global.css View File

@@ -32,11 +32,11 @@ a:focus {
32 32
 	outline: none;
33 33
 }
34 34
 
35
-p {
35
+section p {
36 36
 	line-height: 20px;
37 37
 }
38 38
 
39
-ul {
39
+section ul {
40 40
 	line-height: 24px;
41 41
 }
42 42
 

+ 24
- 19
app/static/css/header.css View File

@@ -8,14 +8,24 @@ header {
8 8
 
9 9
 	display: flex; align-items: center; justify-content: space-between;
10 10
 	flex-flow: row wrap;
11
-}
12
-@media screen and (max-width: 1000px) {
13
-  header {
14
-  	height: 75px;
15
-  }
16
-  header .title {
17
-  	page-break-after: always;
18
-  }
11
+
12
+  /* When the search field occupies the rightmost position, the calculated
13
+     position of the svg icon (on the right) might overflow from the header and
14
+     induce horizontal scrolling. */
15
+	overflow: hidden;
16
+}
17
+@media screen and (max-width: 1199px) {
18
+	#spotlight {
19
+		display: none;
20
+	}
21
+	header input[type="search"] {
22
+    width: 200px;
23
+	}
24
+}
25
+@media screen and (max-width: 849px) {
26
+	header .form {
27
+		display: none;
28
+	}
19 29
 }
20 30
 
21 31
 header .title a {
@@ -46,30 +56,25 @@ header a {
46 56
 	cursor: pointer;
47 57
 }
48 58
 
49
-header form {
59
+header .form {
50 60
 	/* The search icon is draws inside the input field but its space is allocated
51 61
 	   on the right. Apply a negative margin to compensate this:
52 62
 	     -24px for the search icon
53 63
 	     -2px for the spacing between the search icon and the field */
54 64
 	margin-right: -26px;
55 65
 }
56
-header input[type="search"] {
66
+header .form input[type="search"] {
57 67
 	display: inline-block; width: 250px;
58 68
 	padding: 5px 35px 5px 10px;
59
-	border: 0; border-radius: 1px;
60
-	font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif;
61
-	box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease;
69
+	border-color: #d8d8d8;
62 70
 }
63
-header input[type="search"] ~ a {
71
+header .form input[type="search"] ~ a {
64 72
 	position: relative; left: -33px;
65 73
 }
66
-header input[type="search"]:focus {
67
-	box-shadow: 0 0 4px rgba(0, 102, 255, .9);
68
-}
69
-header input[type="search"] ~ a > svg > path {
74
+header .form input[type="search"] ~ a > svg > path {
70 75
 	fill: #cccccc; transition: .15s ease;
71 76
 }
72
-header input[type="search"]:focus ~ a > svg > path {
77
+header .form input[type="search"]:focus ~ a > svg > path {
73 78
 	fill: #333333;
74 79
 }
75 80
 

+ 5
- 16
app/static/css/light.css View File

@@ -66,7 +66,6 @@
66 66
 #menu {
67 67
 	width: 100%; height: 0; overflow-x: hidden;
68 68
 	font-family: NotoSans; font-size: 12px;
69
-	background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
70 69
 	transition: .1s ease;
71 70
 	position: unset;
72 71
 	left: unset;
@@ -81,26 +80,15 @@
81 80
 	width: 100%;
82 81
 }
83 82
 #menu h2 {
84
-	margin: 10px 0 10px 40px;
85 83
 	font-size: 15px;
86 84
 }
87 85
 #menu h2 > svg {
88
-	width: 30px;
86
+	width: 24px;
89 87
 }
90 88
 
91
-#menu h3 {
92
-	margin: 10px 0 10px 40px;
93
-}
94
-#menu hr {
95
-	margin: 10px 15px 0 15px;
96
-}
97
-
98
-#menu > div > a,
99 89
 #menu span {
100
-	display: block; margin: 10px 15px;
101
-}
102
-#menu span {
103
-	/*font-style: italic;*/ color: #b8b8b8;
90
+	display: block;
91
+	color: #b8b8b8;
104 92
 	font-size: 10px;
105 93
 }
106 94
 #menu span > a {
@@ -110,7 +98,8 @@
110 98
 }
111 99
 #menu ul {
112 100
 	list-style: none;
113
-	margin: 10px 15px; padding: 0;
101
+	margin: 10px 0; padding: 0;
102
+	line-height: 20px;
114 103
 	color: #b8b8b8;
115 104
 }
116 105
 #menu li {

+ 19
- 29
app/static/css/navbar.css View File

@@ -94,8 +94,7 @@ nav a:focus {
94 94
 	left: -240px; width: 300px; /* left-to-right animation */
95 95
 	/*left: 60px; width: 0;*/ /* scroll animation */
96 96
 	height: 100%; overflow-x: hidden; overflow-y: auto;
97
-	font-family: NotoSans; font-size: 14px;
98
-	background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
97
+	background: #1c2124; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
99 98
 	transition: .15s ease;
100 99
 }
101 100
 
@@ -121,6 +120,7 @@ nav a:focus {
121 120
 
122 121
 #menu > div {
123 122
 	width: 300px;
123
+	padding: 16px;
124 124
 	display: none;
125 125
 }
126 126
 #menu > div.opened {
@@ -128,22 +128,20 @@ nav a:focus {
128 128
 }
129 129
 
130 130
 #menu h2 {
131
-	margin: 5% 0 20px 40px;
132
-	font-family: Cantarell; font-weight: normal; font-size: 19px;
131
+	margin: 0 0 20px 0;
132
+	font-family: Cantarell; font-weight: bold; font-size: 18px;
133 133
 	color: #ffffff;
134
+	display: flex; align-items: center;
134 135
 }
135 136
 #menu h2 a {
136 137
 	margin: 0;
137
-	display: flex;
138
-	flex-direction: row;
139
-	align-items: center;
140 138
 	font-size: inherit; opacity: inherit;
141 139
 }
142 140
 #menu h2 > svg {
143
-	width: 42px; vertical-align: middle; margin-right: 8px;
141
+	width: 32px; vertical-align: middle; margin-right: 8px;
144 142
 }
145 143
 #menu h2 img {
146
-	width: 64px; border-radius: 2px; vertical-align: middle; margin-right: 10px;
144
+	height: 48px; vertical-align: middle; margin-right: 10px;
147 145
 }
148 146
 #menu h2 a:hover,
149 147
 #menu h2 a:focus {
@@ -151,14 +149,14 @@ nav a:focus {
151 149
 }
152 150
 
153 151
 #menu h3 {
154
-	margin: 20px 0 20px 40px;
155
-	font-family: Cantarell; font-weight: normal; font-size: 15px;
152
+	margin: 16px 0;
153
+	font-family: Cantarell; font-weight: bold; font-size: 15px;
156 154
 	color: #ffffff;
157 155
 }
158 156
 #menu hr {
159
-	margin: 15px;
157
+	margin: 15px 0;
160 158
 	border: none;
161
-	border-bottom: 1px solid rgba(0, 0, 0, .15);
159
+	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
162 160
 }
163 161
 
164 162
 #menu ul {
@@ -166,7 +164,7 @@ nav a:focus {
166 164
 }
167 165
 #menu a,
168 166
 #menu li {
169
-	display: block; margin: 10px 15px;
167
+	display: block; margin: 10px 0;
170 168
 	transition: opacity .15s ease;
171 169
 }
172 170
 #menu li {
@@ -175,6 +173,7 @@ nav a:focus {
175 173
 #menu li > a {
176 174
 	display: inline;
177 175
 	margin: 0; font-style: normal;
176
+	font-size: 13px;
178 177
 }
179 178
 #menu a > img {
180 179
 	vertical-align: middle;
@@ -186,32 +185,23 @@ nav a:focus {
186 185
 }
187 186
 
188 187
 #menu form {
189
-	padding: 0 5%;
188
+	padding: 0 8%;
190 189
 }
191 190
 #menu form input[type="text"],
192 191
 #menu form input[type="password"] {
193
-	display: block; width: 100%;
194
-	margin: 0; padding: 5px 2%;
192
+	margin: 3px 0 8px 0; padding: 5px 2%;
195 193
 	font-size: 14px; color: inherit;
196
-	background: #e8e8e8; transition: background .15s ease;
197
-	border: none;
194
+	border-color: #141719;
198 195
 }
199 196
 #menu form input[type="text"]:focus,
200 197
 #menu form input[type="password"]:focus {
201 198
 	background: #ffffff;
202
-}
203
-#menu form input[type="text"] {
204
-	border-top-left-radius: 5px;
205
-	border-top-right-radius: 5px;
206
-}
207
-#menu form input[type="password"] {
208
-	border-bottom-left-radius: 5px;
209
-	border-bottom-right-radius: 5px;
199
+  box-shadow: 0 0 0 3px rgba(87, 143, 228, 0.6);
200
+	border-color: #2d4b5f;
210 201
 }
211 202
 #menu form input[type="submit"] {
212 203
 	width: 100%;
213
-	margin-top: 10px; margin-bottom: 5px;
214
-	border-radius: 5px;
204
+	margin: 16px 0 5px 0;
215 205
 }
216 206
 #menu form label {
217 207
 	font-size: 13px; color: #FFFFFF; opacity: .7;

+ 6
- 5
app/static/css/responsive.css View File

@@ -27,18 +27,19 @@
27 27
 	#menu li {
28 28
 		font-size: 11px;
29 29
 	}
30
-	#menu a {
31
-		font-size: 14px;
32
-	}
33 30
 }
34 31
 
35
-@media screen and (max-width: 1099px) {
32
+@media screen and (max-width: 1199px) {
36 33
 	.home-pinned-content article:nth-child(5) {
37 34
 		display: none;
38 35
 	}
36
+
37
+	section {
38
+		width: 90%;
39
+	}
39 40
 }
40 41
 
41
-@media screen and (max-width: 799px) {
42
+@media screen and (max-width: 849px) {
42 43
 	.home-pinned-content article:nth-child(4) {
43 44
 		display: none;
44 45
 	}

+ 4
- 2
app/templates/account.html View File

@@ -1,9 +1,11 @@
1 1
 {% extends "base/base.html" %}
2 2
 
3
+{% block title %}
4
+<h1>Gestion du compte</h1>
5
+{% endblock %}
6
+
3 7
 {% block content %}
4 8
 <section class="form">
5
-	<h1>Gestion du compte</h1>
6
-
7 9
 	<form action="{{ url_for('edit_account') }}" method="post" enctype="multipart/form-data">
8 10
 		{{ form.hidden_tag() }}
9 11
 

+ 1
- 11
app/templates/base/header.html View File

@@ -1,5 +1,5 @@
1 1
 <div class=spacer></div>
2
-<form action={{url_for('search')}} method="get">
2
+<form action={{url_for('search')}} method="get" class=form>
3 3
 	<input type="search" name="q" id="q" placeholder="{{search_form.label}}" />
4 4
 	<a role=button onclick="this.parentNode.submit();" href=#>
5 5
 		<svg viewBox="0 0 24 24">
@@ -8,16 +8,6 @@
8 8
 	</a>
9 9
 </form>
10 10
 
11
-{% if current_user.is_authenticated %}
12
-<div class=links>
13
-	<a href="{{ url_for('user', username=current_user.name) }}" role=button title='Mon compte'>
14
-		<svg viewBox="0 0 24 24">
15
-			<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path>
16
-		</svg>
17
-	</a>
18
-</div>
19
-{% endif %}
20
-
21 11
 <div id="spotlight">
22 12
 	<a href="#" class="button bg-red">Jeu du mois : février 2019</a>
23 13
 </div>

+ 6
- 4
app/templates/base/navbar/account.html View File

@@ -2,9 +2,9 @@
2 2
 <div>
3 3
 	<h2>
4 4
 		<a href="{{ url_for('user', username=current_user.name) }}">
5
-			<img src="{{ url_for('static', filename=current_user.avatar) }}">
6
-			<div>{{ current_user.name }}</div>
7
-		</a>
5
+			<img src="{{ url_for('static', filename=current_user.avatar) }}"></a>
6
+		<a href="{{ url_for('user', username=current_user.name) }}">
7
+			{{ current_user.name }}</a>
8 8
 	</h2>
9 9
 	<a href="#">
10 10
 		<svg viewBox="0 0 24 24">
@@ -43,9 +43,11 @@
43 43
 {% else %}
44 44
 <div>
45 45
 	<h2>Invité</h2>
46
-	<form method="post" action="{{url_for('login')}}" class="login">
46
+	<form method="post" action="{{url_for('login')}}" class="login form">
47 47
 		{{ login_form.hidden_tag() }}
48
+		{{ login_form.username.label }}
48 49
 		{{ login_form.username(size=32, placeholder="Identifiant") }}
50
+		{{ login_form.password.label }}
49 51
 		{{ login_form.password(size=32, placeholder="Mot de passe") }}
50 52
 		{{ login_form.submit(class_="bg-green") }}
51 53
 		{{ login_form.remember_me.label }} {{ login_form.remember_me() }}

+ 0
- 4
app/templates/base/navbar/programs.html View File

@@ -39,15 +39,11 @@
39 39
 	<ul>
40 40
 		<li><a href="#"><img src="{{ url_for('static', filename = 'images/fruit_ninja.gif') }}">Fruit Ninja</a></li>
41 41
 		<li><a href="#"><img src="{{ url_for('static', filename = 'images/clonelab.gif') }}">Clonelab</a></li>
42
-		<li><a href="#"><img src="{{ url_for('static', filename = 'images/gravity_duck.png') }}">Gravity Duck</a></li>
43
-		<li><a href="#"><img src="{{ url_for('static', filename = 'images/calcraft.gif') }}">Calcraft</a></li>
44 42
 	</ul>
45 43
 
46 44
 	<hr />
47 45
 	<h3>Coup de cœur</h3>
48 46
 	<ul>
49
-		<li><a href="#"><img src="{{ url_for('static', filename = 'images/fruit_ninja.gif') }}">Fruit Ninja</a></li>
50
-		<li><a href="#"><img src="{{ url_for('static', filename = 'images/clonelab.gif') }}">Clonelab</a></li>
51 47
 		<li><a href="#"><img src="{{ url_for('static', filename = 'images/gravity_duck.png') }}">Gravity Duck</a></li>
52 48
 		<li><a href="#"><img src="{{ url_for('static', filename = 'images/calcraft.gif')}}">Calcraft</a></li>
53 49
 	</ul>

Loading…
Cancel
Save