From b71c901c5a19f1392f4fd27115342bb5b29c7a2a Mon Sep 17 00:00:00 2001 From: Miguel Grinberg Date: Tue, 26 Sep 2017 23:43:28 -0700 Subject: [PATCH] Chapter 11: Facelift (v0.11) --- app/templates/_post.html | 19 ++++-- app/templates/base.html | 78 +++++++++++++++-------- app/templates/bootstrap_wtf.html | 70 ++++++++++++++++++++ app/templates/edit_profile.html | 20 +----- app/templates/index.html | 33 +++++----- app/templates/login.html | 23 +------ app/templates/register.html | 34 +--------- app/templates/reset_password.html | 20 +----- app/templates/reset_password_request.html | 13 +--- app/templates/user.html | 31 +++++---- 10 files changed, 182 insertions(+), 159 deletions(-) create mode 100644 app/templates/bootstrap_wtf.html diff --git a/app/templates/_post.html b/app/templates/_post.html index a705b31..29caf6f 100644 --- a/app/templates/_post.html +++ b/app/templates/_post.html @@ -1,6 +1,17 @@ - - - - +
{{ post.author.username }} says:
{{ post.body }}
+ + +
+ + + + + + {{ post.author.username }} + + says: +
+ {{ post.body }} +
diff --git a/app/templates/base.html b/app/templates/base.html index bd9f6e1..303ae76 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -1,34 +1,58 @@ - - - {% if title %} - {{ title }} - Microblog - {% else %} - Welcome to Microblog - {% endif %} - - -
- Microblog: - Home - Explore + + + + + {% if title %} + {{ title }} - Microblog + {% else %} + Welcome to Microblog + {% endif %} + + + + +
+ {% with messages = get_flashed_messages() %} + {% if messages %} + {% for message in messages %} + + {% endfor %} + {% endif %} + {% endwith %} + {% block content %}{% endblock %} +
+ diff --git a/app/templates/bootstrap_wtf.html b/app/templates/bootstrap_wtf.html new file mode 100644 index 0000000..6bc02b9 --- /dev/null +++ b/app/templates/bootstrap_wtf.html @@ -0,0 +1,70 @@ +{% macro form_field(field, autofocus) %} + {%- if field.type == 'BooleanField' %} +
+ {{ field(class='form-check-input') }} + {{ field.label(class='form-check-label') }} +
+ {%- elif field.type == 'RadioField' %} + {{ field.label(class='form-label') }} + {%- for item in field %} +
+ {{ item(class='form-check-input') }} + {{ item.label(class='form-check-label') }} +
+ {%- endfor %} + {%- elif field.type == 'SelectField' %} + {{ field.label(class='form-label') }} + {{ field(class='form-select mb-3') }} + {%- elif field.type == 'TextAreaField' %} +
+ {{ field.label(class='form-label') }} + {% if autofocus %} + {{ field(class='form-control' + (' is-invalid' if field.errors else ''), autofocus=True) }} + {% else %} + {{ field(class='form-control' + (' is-invalid' if field.errors else '')) }} + {% endif %} + {%- for error in field.errors %} +
{{ error }}
+ {%- endfor %} +
+ {%- elif field.type == 'SubmitField' %} + {{ field(class='btn btn-primary mb-3') }} + {%- else %} +
+ {{ field.label(class='form-label') }} + {% if autofocus %} + {{ field(class='form-control' + (' is-invalid' if field.errors else ''), autofocus=True) }} + {% else %} + {{ field(class='form-control' + (' is-invalid' if field.errors else '')) }} + {% endif %} + {%- for error in field.errors %} +
{{ error }}
+ {%- endfor %} +
+ {%- endif %} +{% endmacro %} + +{% macro quick_form(form, action="", method="post", id="", novalidate=False) %} +
+ {{ form.hidden_tag() }} + {%- for field, errors in form.errors.items() %} + {%- if form[field].widget.input_type == 'hidden' %} + {%- for error in errors %} +
{{ error }}
+ {%- endfor %} + {%- endif %} + {%- endfor %} + + {% set ns = namespace(first_field=true) %} + {%- for field in form %} + {% if field.widget.input_type != 'hidden' -%} + {{ form_field(field, ns.first_field) }} + {% set ns.first_field = false %} + {%- endif %} + {%- endfor %} +
+{% endmacro %} diff --git a/app/templates/edit_profile.html b/app/templates/edit_profile.html index e2471ac..ef7ca75 100644 --- a/app/templates/edit_profile.html +++ b/app/templates/edit_profile.html @@ -1,23 +1,7 @@ {% extends "base.html" %} +{% import "bootstrap_wtf.html" as wtf %} {% block content %}

Edit Profile

-
- {{ form.hidden_tag() }} -

- {{ form.username.label }}
- {{ form.username(size=32) }}
- {% for error in form.username.errors %} - [{{ error }}] - {% endfor %} -

-

- {{ form.about_me.label }}
- {{ form.about_me(cols=50, rows=4) }}
- {% for error in form.about_me.errors %} - [{{ error }}] - {% endfor %} -

-

{{ form.submit() }}

-
+ {{ wtf.quick_form(form) }} {% endblock %} diff --git a/app/templates/index.html b/app/templates/index.html index eb3f876..047f33f 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -1,27 +1,26 @@ {% extends "base.html" %} +{% import "bootstrap_wtf.html" as wtf %} {% block content %}

Hi, {{ current_user.username }}!

{% if form %} -
- {{ form.hidden_tag() }} -

- {{ form.post.label }}
- {{ form.post(cols=32, rows=4) }}
- {% for error in form.post.errors %} - [{{ error }}] - {% endfor %} -

-

{{ form.submit() }}

-
+ {{ wtf.quick_form(form) }} {% endif %} {% for post in posts %} {% include '_post.html' %} {% endfor %} - {% if prev_url %} - Newer posts - {% endif %} - {% if next_url %} - Older posts - {% endif %} + {% endblock %} diff --git a/app/templates/login.html b/app/templates/login.html index 2a54187..63439b5 100644 --- a/app/templates/login.html +++ b/app/templates/login.html @@ -1,26 +1,9 @@ -{% extends "base.html" %} +{% extends 'base.html' %} +{% import "bootstrap_wtf.html" as wtf %} {% block content %}

Sign In

-
- {{ form.hidden_tag() }} -

- {{ form.username.label }}
- {{ form.username(size=32) }}
- {% for error in form.username.errors %} - [{{ error }}] - {% endfor %} -

-

- {{ form.password.label }}
- {{ form.password(size=32) }}
- {% for error in form.password.errors %} - [{{ error }}] - {% endfor %} -

-

{{ form.remember_me() }} {{ form.remember_me.label }}

-

{{ form.submit() }}

-
+ {{ wtf.quick_form(form) }}

New User? Click to Register!

Forgot Your Password? diff --git a/app/templates/register.html b/app/templates/register.html index 37b7ac5..26db864 100644 --- a/app/templates/register.html +++ b/app/templates/register.html @@ -1,37 +1,7 @@ {% extends "base.html" %} +{% import "bootstrap_wtf.html" as wtf %} {% block content %}

Register

-
- {{ form.hidden_tag() }} -

- {{ form.username.label }}
- {{ form.username(size=32) }}
- {% for error in form.username.errors %} - [{{ error }}] - {% endfor %} -

-

- {{ form.email.label }}
- {{ form.email(size=64) }}
- {% for error in form.email.errors %} - [{{ error }}] - {% endfor %} -

-

- {{ form.password.label }}
- {{ form.password(size=32) }}
- {% for error in form.password.errors %} - [{{ error }}] - {% endfor %} -

-

- {{ form.password2.label }}
- {{ form.password2(size=32) }}
- {% for error in form.password2.errors %} - [{{ error }}] - {% endfor %} -

-

{{ form.submit() }}

-
+ {{ wtf.quick_form(form) }} {% endblock %} diff --git a/app/templates/reset_password.html b/app/templates/reset_password.html index 92f0c8e..bd5ccc2 100644 --- a/app/templates/reset_password.html +++ b/app/templates/reset_password.html @@ -1,23 +1,7 @@ {% extends "base.html" %} +{% import "bootstrap_wtf.html" as wtf %} {% block content %}

Reset Your Password

-
- {{ form.hidden_tag() }} -

- {{ form.password.label }}
- {{ form.password(size=32) }}
- {% for error in form.password.errors %} - [{{ error }}] - {% endfor %} -

-

- {{ form.password2.label }}
- {{ form.password2(size=32) }}
- {% for error in form.password2.errors %} - [{{ error }}] - {% endfor %} -

-

{{ form.submit() }}

-
+ {{ wtf.quick_form(form) }} {% endblock %} diff --git a/app/templates/reset_password_request.html b/app/templates/reset_password_request.html index 18bb0ae..d60b1b5 100644 --- a/app/templates/reset_password_request.html +++ b/app/templates/reset_password_request.html @@ -1,16 +1,7 @@ {% extends "base.html" %} +{% import "bootstrap_wtf.html" as wtf %} {% block content %}

Reset Password

-
- {{ form.hidden_tag() }} -

- {{ form.email.label }}
- {{ form.email(size=64) }}
- {% for error in form.email.errors %} - [{{ error }}] - {% endfor %} -

-

{{ form.submit() }}

-
+ {{ wtf.quick_form(form) }} {% endblock %} diff --git a/app/templates/user.html b/app/templates/user.html index af77ea2..a48e7c3 100644 --- a/app/templates/user.html +++ b/app/templates/user.html @@ -1,9 +1,9 @@ {% extends "base.html" %} {% block content %} - - - +
+ +

User: {{ user.username }}

{% if user.about_me %}

{{ user.about_me }}

{% endif %} @@ -15,28 +15,35 @@

{{ form.hidden_tag() }} - {{ form.submit(value='Follow') }} + {{ form.submit(value='Follow', class_='btn btn-primary') }}

{% else %}

{{ form.hidden_tag() }} - {{ form.submit(value='Unfollow') }} + {{ form.submit(value='Unfollow', class_='btn btn-primary') }}

{% endif %}
-
{% for post in posts %} {% include '_post.html' %} {% endfor %} - {% if prev_url %} - Newer posts - {% endif %} - {% if next_url %} - Older posts - {% endif %} + {% endblock %}