Skip to content

Commit 55a6aa2

Browse files
toddbirchardtoddbirchard
committed
Metadata, error styles.
1 parent e21da70 commit 55a6aa2

File tree

7 files changed

+141
-87
lines changed

7 files changed

+141
-87
lines changed

‎flask_wtforms_tutorial/forms.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
"""Form class declaration."""
1+
"""Form object declaration."""
22
from flask_wtf import FlaskForm, RecaptchaField
33
from wtforms import (
44
DateField,

‎flask_wtforms_tutorial/routes.py‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"""Routing."""
12
from flask import current_app as app
23
from flask import redirect, render_template, url_for
34

@@ -6,12 +7,17 @@
67

78
@app.route("/")
89
def home():
9-
return render_template("index.jinja2", template="home-template")
10+
"""Landing page."""
11+
return render_template(
12+
"index.jinja2",
13+
template="home-template",
14+
title="Flask-WTF tutorial"
15+
)
1016

1117

1218
@app.route("/contact", methods=["GET", "POST"])
1319
def contact():
14-
"""Standard `contact` form, typically used to send emails."""
20+
"""Standard `contact` form."""
1521
form = ContactForm()
1622
if form.validate_on_submit():
1723
return redirect(url_for("success"))
@@ -37,7 +43,7 @@ def signup():
3743

3844
@app.route("/success", methods=["GET", "POST"])
3945
def success():
40-
"""Generic success page displayed when users submit a valid forms."""
46+
"""Generic success page upon form submission."""
4147
return render_template(
4248
"success.jinja2",
4349
template="success-template"

‎flask_wtforms_tutorial/static/css/forms.css‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@ form {
1515
justify-content: space-around;
1616
}
1717

18+
@media(max-width: 500px) {
19+
.container {
20+
padding: 0;
21+
}
22+
}
23+
1824
.title {
1925
font-size: 1.7rem;
2026
color: #5f6988;
@@ -106,6 +112,7 @@ button:hover {
106112
cursor: pointer;
107113
background: white;
108114
color: #5eb9d7;
115+
padding: 13px !important;
109116
}
110117

111118
.success-wrapper {
@@ -116,31 +123,34 @@ button:hover {
116123
}
117124

118125
.errors {
119-
list-style: none;
120-
margin: 10px auto;
121-
position: absolute;
122-
z-index: 10;
123-
right: -222px;
124-
top: 0;
125-
bottom: 0;
126-
background: #fae7ea;
127-
padding: 9px 15px;
128-
border-radius: 3px;
129-
border: 1px solid #e1c5c5;
130-
color: #8d7575;
131-
width: 182px;
132-
text-align: center;
133-
height: fit-content;
126+
list-style: none;
127+
margin: -15px 0 20px;
128+
font-size: .8em;
129+
text-align: left;
130+
width: -webkit-fill-available;
131+
width: -moz-available;
132+
background: #fae7ea;
133+
padding: 9px 15px;
134+
border-radius: 0 0 3px 3px;
135+
border-top: 0;
136+
border: 1px solid #e1c5c5;
137+
color: #8d7575;
138+
height: fit-content;
139+
}
140+
141+
.error {
142+
margin-bottom: 5px;
143+
}
144+
145+
.error:last-of-type {
146+
margin-bottom: 0;
134147
}
135148

136149
i {
137-
position: absolute;
138-
margin: auto;
139-
top: 4px;
140-
bottom: 0;
141-
right: 16px;
142-
color: grey;
143150
height: 15px;
151+
color: #8d7575;
152+
margin-right: 5px;
153+
font-size: .9em;
144154
}
145155

146156
.g-recaptcha div {

‎flask_wtforms_tutorial/static/css/style.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
body {
22
background: #e1eaf5;
33
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
4+
margin: 0;
45
}
56

67
h1 {
@@ -17,6 +18,3 @@ a {
1718
text-decoration: none;
1819
}
1920

20-
li {
21-
text-align: center;
22-
}

‎flask_wtforms_tutorial/templates/contact.jinja2‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,30 +18,36 @@
1818
<fieldset class="form-field">{{ form.name.label }} {{ form.name(size=20) }}
1919
{% if form.name.errors %}
2020
<ul class="errors">
21-
{% for error in form.name.errors %}
22-
<li>{{ error }}</li>
23-
{% endfor %}
24-
</ul>
21+
{% for error in form.email.errors %}
22+
<li class="error">
23+
<i class="fas fa-exclamation"></i> <span class="error-message">{{ error }}</span>
24+
</li>
25+
{% endfor %}
26+
</ul>
2527
{% endif %}
2628
</fieldset>
2729

2830
<fieldset class="form-field">{{ form.email.label }} {{ form.email }}
2931
{% if form.email.errors %}
3032
<ul class="errors">
31-
{% for error in form.email.errors %}
32-
<li>{{ error }}</li>
33-
{% endfor %}
34-
</ul>
33+
{% for error in form.email.errors %}
34+
<li class="error">
35+
<i class="fas fa-exclamation"></i> <span class="error-message">{{ error }}</span>
36+
</li>
37+
{% endfor %}
38+
</ul>
3539
{% endif %}
3640
</fieldset>
3741

3842
<fieldset class="form-field">{{ form.body.label }} {{ form.body }}
3943
{% if form.body.errors %}
4044
<ul class="errors">
41-
{% for error in form.body.errors %}
42-
<li>{{ error }}</li>
43-
{% endfor %}
44-
</ul>
45+
{% for error in form.email.errors %}
46+
<li class="error">
47+
<i class="fas fa-exclamation"></i> <span class="error-message">{{ error }}</span>
48+
</li>
49+
{% endfor %}
50+
</ul>
4551
{% endif %}
4652
</fieldset>
4753

‎flask_wtforms_tutorial/templates/layout.jinja2‎

Lines changed: 58 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,63 @@
22

33
<html lang="en">
44

5-
<head>
6-
<meta charset="utf-8"/>
7-
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
8-
<title>{{ title }}</title>
9-
<meta name="HandheldFriendly" content="True"/>
10-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
11-
<meta name="theme-color" content="#5eb9d7"/>
12-
<link rel="shortcut icon" href="{{ url_for('static', filename='dist/img/favicon.png') }}" type="image/x-icon"/>
13-
{% block styles %}{% endblock %}
14-
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" type="text/css">
15-
<script src="https://kit.fontawesome.com/e3deaeba31.js" crossorigin="anonymous"></script>
16-
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,500" rel="stylesheet">
17-
</head>
18-
19-
<body class="{{ template }}">
20-
21-
<div class="container">
22-
{% block content %}{% endblock %}
23-
</div>
24-
25-
<script type="text/javascript">
26-
var _gauges = _gauges || [];
27-
(function() {
28-
var t = document.createElement('script');
29-
t.type = 'text/javascript';
30-
t.async = true;
31-
t.id = 'gauges-tracker';
32-
t.setAttribute('data-site-id', '5eb6bab25292fb79acffe181');
33-
t.setAttribute('data-track-path', 'https://track.gaug.es/track.gif');
34-
t.src = 'https://d2fuc4clr7gvcn.cloudfront.net/track.js';
35-
var s = document.getElementsByTagName('script')[0];
36-
s.parentNode.insertBefore(t, s);
37-
})();
38-
</script>
39-
40-
</body>
5+
<head>
6+
<meta charset="utf-8"/>
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
8+
<title>{{ title }} - Hackers and Slackers</title>
9+
<meta name="HandheldFriendly" content="True"/>
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
11+
<meta name="theme-color" content="#5eb9d7" >
12+
<link rel="canonical" href="https://flaskwtf.hackersandslackers.app/" />
13+
<link rel="shortcut icon" href="{{ url_for('static', filename='dist/img/favicon.png') }}" type="image/x-icon"/>
14+
15+
{# OpenGraph #}
16+
<meta property="og:site_name" content={{ title }} />
17+
<meta property="og:type" content="website" />
18+
<meta property="og:title" content={{ title }} />
19+
<meta property="og:description" content={{ description }} />
20+
<meta property="og:url" content="https://flaskwtf.hackersandslackers.app/" />
21+
<meta property="og:image" content="/.github/flask-wtforms-tutorial@2x.jpg" />
22+
<meta property="og:image:width" content="1000" />
23+
<meta property="og:image:height" content="523" />
24+
25+
{# Twitter #}
26+
<meta name="twitter:title" content={{ title }}/>
27+
<meta name="twitter:description" content={{ description }}/>
28+
<meta name="twitter:url" content="https://flaskwtf.hackersandslackers.app/" />
29+
<meta name="twitter:site" content="https://twitter.com/hackersslackers" />
30+
<meta name="twitter:creator" content="@toddrbirchard" />
31+
<meta name="twitter:card" content="summary_large_image" />
32+
<meta name="twitter:image" content="/.github/flask-wtforms-tutorial@2x.jpg" />
33+
34+
{# Styles #}
35+
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css">
36+
<script src="https://kit.fontawesome.com/e3deaeba31.js" crossorigin="anonymous"></script>
37+
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,500" rel="stylesheet">
38+
{% block styles %}{% endblock %}
39+
</head>
40+
41+
<body class="{{ template }}">
42+
43+
<div class="container">
44+
{% block content %}{% endblock %}
45+
</div>
46+
47+
<script type="text/javascript">
48+
var _gauges = _gauges || [];
49+
(function () {
50+
var t = document.createElement('script');
51+
t.type = 'text/javascript';
52+
t.async = true;
53+
t.id = 'gauges-tracker';
54+
t.setAttribute('data-site-id', '5eb6bab25292fb79acffe181');
55+
t.setAttribute('data-track-path', 'https://track.gaug.es/track.gif');
56+
t.src = 'https://d2fuc4clr7gvcn.cloudfront.net/track.js';
57+
var s = document.getElementsByTagName('script')[0];
58+
s.parentNode.insertBefore(t, s);
59+
})();
60+
</script>
61+
62+
</body>
4163

4264
</html>

‎flask_wtforms_tutorial/templates/signup.jinja2‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@
2222
{% if form.email.errors %}
2323
<ul class="errors">
2424
{% for error in form.email.errors %}
25-
<li>{{ error }}</li>
25+
<li class="error">
26+
<i class="fas fa-exclamation"></i> <span class="error-message">{{ error }}</span>
27+
</li>
2628
{% endfor %}
2729
</ul>
2830
{% endif %}
@@ -31,8 +33,10 @@
3133
<fieldset class="form-field">{{ form.password.label }} {{ form.password }}
3234
{% if form.password.errors %}
3335
<ul class="errors">
34-
{% for error in form.password.errors %}
35-
<li>{{ error }}</li>
36+
{% for error in form.email.errors %}
37+
<li class="error">
38+
<i class="fas fa-exclamation"></i> <span class="error-message">{{ error }}</span>
39+
</li>
3640
{% endfor %}
3741
</ul>
3842
{% endif %}
@@ -41,8 +45,10 @@
4145
<fieldset class="form-field">{{ form.confirmPassword.label }} {{ form.confirmPassword }}
4246
{% if form.confirmPassword.errors %}
4347
<ul class="errors">
44-
{% for error in form.confirmPassword.errors %}
45-
<li>{{ error }}</li>
48+
{% for error in form.email.errors %}
49+
<li class="error">
50+
<i class="fas fa-exclamation"></i> <span class="error-message">{{ error }}</span>
51+
</li>
4652
{% endfor %}
4753
</ul>
4854
{% endif %}
@@ -52,8 +58,10 @@
5258
<i class="fas fa-caret-down"></i>
5359
{% if form.title.errors %}
5460
<ul class="errors">
55-
{% for error in form.title.errors %}
56-
<li>{{ error }}</li>
61+
{% for error in form.email.errors %}
62+
<li class="error">
63+
<i class="fas fa-exclamation"></i> <span class="error-message">{{ error }}</span>
64+
</li>
5765
{% endfor %}
5866
</ul>
5967
{% endif %}
@@ -62,8 +70,10 @@
6270
<fieldset class="form-field">{{ form.website.label }} {{ form.website }}
6371
{% if form.website.errors %}
6472
<ul class="errors">
65-
{% for error in form.website.errors %}
66-
<li>{{ error }}</li>
73+
{% for error in form.email.errors %}
74+
<li class="error">
75+
<i class="fas fa-exclamation"></i> <span class="error-message">{{ error }}</span>
76+
</li>
6777
{% endfor %}
6878
</ul>
6979
{% endif %}
@@ -72,8 +82,10 @@
7282
<fieldset class="form-field">{{ form.birthday.label }} {{ form.birthday }}
7383
{% if form.birthday.errors %}
7484
<ul class="errors">
75-
{% for error in form.birthday.errors %}
76-
<li>{{ error }}</li>
85+
{% for error in form.email.errors %}
86+
<li class="error">
87+
<i class="fas fa-exclamation"></i> <span class="error-message">{{ error }}</span>
88+
</li>
7789
{% endfor %}
7890
</ul>
7991
{% endif %}

0 commit comments

Comments
 (0)