From 97d600d2a91d89fb9f2157cc89fb686f7005346b Mon Sep 17 00:00:00 2001 From: Miguel Grinberg <miguel.grinberg@gmail.com> Date: Tue, 26 Sep 2017 23:43:28 -0700 Subject: [PATCH] Chapter 11: Facelift (v0.11) --- app/__init__.py | 2 + app/templates/404.html | 2 +- app/templates/500.html | 2 +- app/templates/_post.html | 19 +++++-- app/templates/base.html | 69 ++++++++++++++--------- app/templates/edit_profile.html | 26 +++------ app/templates/index.html | 36 ++++++------ app/templates/login.html | 30 +++------- app/templates/register.html | 40 +++---------- app/templates/reset_password.html | 26 +++------ app/templates/reset_password_request.html | 19 +++---- app/templates/user.html | 29 ++++++---- 12 files changed, 135 insertions(+), 165 deletions(-) diff --git a/app/__init__.py b/app/__init__.py index 95f8c6c..f814d28 100644 --- a/app/__init__.py +++ b/app/__init__.py @@ -6,6 +6,7 @@ from flask_sqlalchemy import SQLAlchemy from flask_migrate import Migrate from flask_login import LoginManager from flask_mail import Mail +from flask_bootstrap import Bootstrap from config import Config app = Flask(__name__) @@ -15,6 +16,7 @@ migrate = Migrate(app, db) login = LoginManager(app) login.login_view = 'login' mail = Mail(app) +bootstrap = Bootstrap(app) if not app.debug: if app.config['MAIL_SERVER']: diff --git a/app/templates/404.html b/app/templates/404.html index 2308820..f2e1cee 100644 --- a/app/templates/404.html +++ b/app/templates/404.html @@ -1,6 +1,6 @@ {% extends "base.html" %} -{% block content %} +{% block app_content %} <h1>Not Found</h1> <p><a href="{{ url_for('index') }}">Back</a></p> {% endblock %} diff --git a/app/templates/500.html b/app/templates/500.html index 660c3a1..2e8a06e 100644 --- a/app/templates/500.html +++ b/app/templates/500.html @@ -1,6 +1,6 @@ {% extends "base.html" %} -{% block content %} +{% block app_content %} <h1>An unexpected error has occurred</h1> <p>The administrator has been notified. Sorry for the inconvenience!</p> <p><a href="{{ url_for('index') }}">Back</a></p> 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 @@ - <table> - <tr valign="top"> - <td><img src="{{ post.author.avatar(36) }}"></td> - <td><a href="{{ url_for('user', username=post.author.username) }}">{{ post.author.username }}</a> says:<br>{{ post.body }}</td> + <table class="table table-hover"> + <tr> + <td width="70px"> + <a href="{{ url_for('user', username=post.author.username) }}"> + <img src="{{ post.author.avatar(70) }}" /> + </a> + </td> + <td> + <a href="{{ url_for('user', username=post.author.username) }}"> + {{ post.author.username }} + </a> + says: + <br> + {{ post.body }} + </td> </tr> </table> diff --git a/app/templates/base.html b/app/templates/base.html index 42a98ce..053e93b 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -1,33 +1,50 @@ -<html> - <head> - {% if title %} - <title>{{ title }} - Microblog</title> - {% else %} - <title>Welcome to Microblog</title> - {% endif %} - </head> - <body> - <div> - Microblog: - <a href="{{ url_for('index') }}">Home</a> - <a href="{{ url_for('explore') }}">Explore</a> - {% if current_user.is_anonymous %} - <a href="{{ url_for('login') }}">Login</a> - {% else %} - <a href="{{ url_for('user', username=current_user.username) }}">Profile</a> - <a href="{{ url_for('logout') }}">Logout</a> - {% endif %} +{% extends 'bootstrap/base.html' %} + +{% block title %} + {% if title %}{{ title }} - Microblog{% else %}Welcome to Microblog{% endif %} +{% endblock %} + +{% block navbar %} + <nav class="navbar navbar-default"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="{{ url_for('index') }}">Microblog</a> + </div> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> + <ul class="nav navbar-nav"> + <li><a href="{{ url_for('index') }}">Home</a></li> + <li><a href="{{ url_for('explore') }}">Explore</a></li> + </ul> + <ul class="nav navbar-nav navbar-right"> + {% if current_user.is_anonymous %} + <li><a href="{{ url_for('login') }}">Login</a></li> + {% else %} + <li><a href="{{ url_for('user', username=current_user.username) }}">Profile</a></li> + <li><a href="{{ url_for('logout') }}">Logout</a></li> + {% endif %} + </ul> + </div> </div> - <hr> + </nav> +{% endblock %} + +{% block content %} + <div class="container"> {% with messages = get_flashed_messages() %} {% if messages %} - <ul> {% for message in messages %} - <li>{{ message }}</li> + <div class="alert alert-info" role="alert">{{ message }}</div> {% endfor %} - </ul> {% endif %} {% endwith %} - {% block content %}{% endblock %} - </body> -</html> + + {# application content needs to be provided in the app_content block #} + {% block app_content %}{% endblock %} + </div> +{% endblock %} diff --git a/app/templates/edit_profile.html b/app/templates/edit_profile.html index e2471ac..72cacda 100644 --- a/app/templates/edit_profile.html +++ b/app/templates/edit_profile.html @@ -1,23 +1,11 @@ {% extends "base.html" %} +{% import 'bootstrap/wtf.html' as wtf %} -{% block content %} +{% block app_content %} <h1>Edit Profile</h1> - <form action="" method="post"> - {{ form.hidden_tag() }} - <p> - {{ form.username.label }}<br> - {{ form.username(size=32) }}<br> - {% for error in form.username.errors %} - <span style="color: red;">[{{ error }}]</span> - {% endfor %} - </p> - <p> - {{ form.about_me.label }}<br> - {{ form.about_me(cols=50, rows=4) }}<br> - {% for error in form.about_me.errors %} - <span style="color: red;">[{{ error }}]</span> - {% endfor %} - </p> - <p>{{ form.submit() }}</p> - </form> + <div class="row"> + <div class="col-md-4"> + {{ wtf.quick_form(form) }} + </div> + </div> {% endblock %} diff --git a/app/templates/index.html b/app/templates/index.html index eb3f876..baf91d8 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -1,27 +1,27 @@ {% extends "base.html" %} +{% import 'bootstrap/wtf.html' as wtf %} -{% block content %} +{% block app_content %} <h1>Hi, {{ current_user.username }}!</h1> {% if form %} - <form action="" method="post"> - {{ form.hidden_tag() }} - <p> - {{ form.post.label }}<br> - {{ form.post(cols=32, rows=4) }}<br> - {% for error in form.post.errors %} - <span style="color: red;">[{{ error }}]</span> - {% endfor %} - </p> - <p>{{ form.submit() }}</p> - </form> + {{ wtf.quick_form(form) }} + <br> {% endif %} {% for post in posts %} {% include '_post.html' %} {% endfor %} - {% if prev_url %} - <a href="{{ prev_url }}">Newer posts</a> - {% endif %} - {% if next_url %} - <a href="{{ next_url }}">Older posts</a> - {% endif %} + <nav aria-label="..."> + <ul class="pager"> + <li class="previous{% if not prev_url %} disabled{% endif %}"> + <a href="{{ prev_url or '#' }}"> + <span aria-hidden="true">←</span> Newer posts + </a> + </li> + <li class="next{% if not next_url %} disabled{% endif %}"> + <a href="{{ next_url or '#' }}"> + Older posts <span aria-hidden="true">→</span> + </a> + </li> + </ul> + </nav> {% endblock %} diff --git a/app/templates/login.html b/app/templates/login.html index 2a54187..5b8d1b8 100644 --- a/app/templates/login.html +++ b/app/templates/login.html @@ -1,26 +1,14 @@ -{% extends "base.html" %} +{% extends 'base.html' %} +{% import 'bootstrap/wtf.html' as wtf %} -{% block content %} +{% block app_content %} <h1>Sign In</h1> - <form action="" method="post" novalidate> - {{ form.hidden_tag() }} - <p> - {{ form.username.label }}<br> - {{ form.username(size=32) }}<br> - {% for error in form.username.errors %} - <span style="color: red;">[{{ error }}]</span> - {% endfor %} - </p> - <p> - {{ form.password.label }}<br> - {{ form.password(size=32) }}<br> - {% for error in form.password.errors %} - <span style="color: red;">[{{ error }}]</span> - {% endfor %} - </p> - <p>{{ form.remember_me() }} {{ form.remember_me.label }}</p> - <p>{{ form.submit() }}</p> - </form> + <div class="row"> + <div class="col-md-4"> + {{ wtf.quick_form(form) }} + </div> + </div> + <br> <p>New User? <a href="{{ url_for('register') }}">Click to Register!</a></p> <p> Forgot Your Password? diff --git a/app/templates/register.html b/app/templates/register.html index 37b7ac5..c87955c 100644 --- a/app/templates/register.html +++ b/app/templates/register.html @@ -1,37 +1,11 @@ {% extends "base.html" %} +{% import 'bootstrap/wtf.html' as wtf %} -{% block content %} +{% block app_content %} <h1>Register</h1> - <form action="" method="post"> - {{ form.hidden_tag() }} - <p> - {{ form.username.label }}<br> - {{ form.username(size=32) }}<br> - {% for error in form.username.errors %} - <span style="color: red;">[{{ error }}]</span> - {% endfor %} - </p> - <p> - {{ form.email.label }}<br> - {{ form.email(size=64) }}<br> - {% for error in form.email.errors %} - <span style="color: red;">[{{ error }}]</span> - {% endfor %} - </p> - <p> - {{ form.password.label }}<br> - {{ form.password(size=32) }}<br> - {% for error in form.password.errors %} - <span style="color: red;">[{{ error }}]</span> - {% endfor %} - </p> - <p> - {{ form.password2.label }}<br> - {{ form.password2(size=32) }}<br> - {% for error in form.password2.errors %} - <span style="color: red;">[{{ error }}]</span> - {% endfor %} - </p> - <p>{{ form.submit() }}</p> - </form> + <div class="row"> + <div class="col-md-4"> + {{ wtf.quick_form(form) }} + </div> + </div> {% endblock %} diff --git a/app/templates/reset_password.html b/app/templates/reset_password.html index 92f0c8e..19d5bbf 100644 --- a/app/templates/reset_password.html +++ b/app/templates/reset_password.html @@ -1,23 +1,11 @@ {% extends "base.html" %} +{% import 'bootstrap/wtf.html' as wtf %} -{% block content %} +{% block app_content %} <h1>Reset Your Password</h1> - <form action="" method="post"> - {{ form.hidden_tag() }} - <p> - {{ form.password.label }}<br> - {{ form.password(size=32) }}<br> - {% for error in form.password.errors %} - <span style="color: red;">[{{ error }}]</span> - {% endfor %} - </p> - <p> - {{ form.password2.label }}<br> - {{ form.password2(size=32) }}<br> - {% for error in form.password2.errors %} - <span style="color: red;">[{{ error }}]</span> - {% endfor %} - </p> - <p>{{ form.submit() }}</p> - </form> + <div class="row"> + <div class="col-md-4"> + {{ wtf.quick_form(form) }} + </div> + </div> {% endblock %} diff --git a/app/templates/reset_password_request.html b/app/templates/reset_password_request.html index 18bb0ae..a5f7d22 100644 --- a/app/templates/reset_password_request.html +++ b/app/templates/reset_password_request.html @@ -1,16 +1,11 @@ {% extends "base.html" %} +{% import 'bootstrap/wtf.html' as wtf %} -{% block content %} +{% block app_content %} <h1>Reset Password</h1> - <form action="" method="post"> - {{ form.hidden_tag() }} - <p> - {{ form.email.label }}<br> - {{ form.email(size=64) }}<br> - {% for error in form.email.errors %} - <span style="color: red;">[{{ error }}]</span> - {% endfor %} - </p> - <p>{{ form.submit() }}</p> - </form> + <div class="row"> + <div class="col-md-4"> + {{ wtf.quick_form(form) }} + </div> + </div> {% endblock %} diff --git a/app/templates/user.html b/app/templates/user.html index bcb0626..753b973 100644 --- a/app/templates/user.html +++ b/app/templates/user.html @@ -1,9 +1,9 @@ {% extends "base.html" %} -{% block content %} - <table> - <tr valign="top"> - <td><img src="{{ user.avatar(128) }}"></td> +{% block app_content %} + <table class="table table-hover"> + <tr> + <td width="256px"><img src="{{ user.avatar(256) }}"></td> <td> <h1>User: {{ user.username }}</h1> {% if user.about_me %}<p>{{ user.about_me }}</p>{% endif %} @@ -19,14 +19,21 @@ </td> </tr> </table> - <hr> {% for post in posts %} {% include '_post.html' %} {% endfor %} - {% if prev_url %} - <a href="{{ prev_url }}">Newer posts</a> - {% endif %} - {% if next_url %} - <a href="{{ next_url }}">Older posts</a> - {% endif %} + <nav aria-label="..."> + <ul class="pager"> + <li class="previous{% if not prev_url %} disabled{% endif %}"> + <a href="{{ prev_url or '#' }}"> + <span aria-hidden="true">←</span> Newer posts + </a> + </li> + <li class="next{% if not next_url %} disabled{% endif %}"> + <a href="{{ next_url or '#' }}"> + Older posts <span aria-hidden="true">→</span> + </a> + </li> + </ul> + </nav> {% endblock %}