jose.reyes46
/
flask-tutorial
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Adds templates for auth and css

Jose Reyes 6 years ago
parent
15deba2011
commit
75dd4d709c
4 changed files with 84 additions and 0 deletions
Split View Show Diff Stats
  1. 27
    0
      flaskr/static/style.css
  2. 16
    0
      flaskr/templates/auth/login.html
  3. 16
    0
      flaskr/templates/auth/register.html
  4. 25
    0
      flaskr/templates/base.html

+ 27
- 0
flaskr/static/style.css View File 

@@ -0,0 +1,27 @@
1 
+html { font-family: sans-serif; background: #eee; padding: 1rem; }
2 
+body { max-width: 960px; margin: 0 auto; background: white; }
3 
+h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
4 
+a { color: #377ba8; }
5 
+hr { border: none; border-top: 1px solid lightgray; }
6 
+nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }
7 
+nav h1 { flex: auto; margin: 0; }
8 
+nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
9 
+nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
10 
+nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
11 
+.content { padding: 0 1rem 1rem; }
12 
+.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
13 
+.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
14 
+.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
15 
+.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
16 
+.post > header > div:first-of-type { flex: auto; }
17 
+.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
18 
+.post .about { color: slategray; font-style: italic; }
19 
+.post .body { white-space: pre-line; }
20 
+.content:last-child { margin-bottom: 0; }
21 
+.content form { margin: 1em 0; display: flex; flex-direction: column; }
22 
+.content label { font-weight: bold; margin-bottom: 0.5em; }
23 
+.content input, .content textarea { margin-bottom: 1em; }
24 
+.content textarea { min-height: 12em; resize: vertical; }
25 
+input.danger { color: #cc2f2e; }
26 
+input[type=submit] { align-self: start; min-width: 10em; }
27 
+

+ 16
- 0
flaskr/templates/auth/login.html View File 

@@ -0,0 +1,16 @@
1 
+{% extends 'base.html' %}
2 
+
3 
+{% block header %}
4 
+    <h1>{% block title %}Log In{% endblock %}</h1>
5 
+{% endblock %}
6 
+
7 
+{% block content %}
8 
+    <form method="post">
9 
+        <label for="username">Username</label>
10 
+        <input name="username" id="username" required>
11 
+        <label for="password">Password</label>
12 
+        <input type="password" name="password" id="password" required>
13 
+        <input type="submit" value="Log In">
14 
+    </form>
15 
+{% endblock %}
16 
+

+ 16
- 0
flaskr/templates/auth/register.html View File 

@@ -0,0 +1,16 @@
1 
+{% extends 'base.html' %}
2 
+
3 
+{% block header %}
4 
+    <h1>{% block title %}Register{% endblock %}</h1>
5 
+{% endblock %}
6 
+
7 
+{% block content %}
8 
+    <form method="post">
9 
+        <label for="username">Username</label>
10 
+        <input name="username" id="username" required>
11 
+        <label for="password">Password</label>
12 
+        <input type="password" name="password" id="password" required>
13 
+        <input type="submit" value="Register">
14 
+    </form>
15 
+{% endblock %}
16 
+

+ 25
- 0
flaskr/templates/base.html View File 

@@ -0,0 +1,25 @@
1 
+<!doctype html>
2 
+<title>{% block title %}{% endblock %} - Flaskr</title>
3 
+<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
4 
+<nav>
5 
+    <h1>Flaskr</h1>
6 
+    <ul>
7 
+        {% if g.user %}
8 
+            <li><span>{{ g.user['username'] }}</span>
9 
+            <li><a href="{{ url_for('auth.logout') }}">Log Out</a>
10 
+        {% else %}
11 
+            <li><a href="{{ url_for('auth.register') }}">Register</a>
12 
+            <li><a href="{{ url_for('auth.login') }}">Log In</a>
13 
+        {% endif %}
14 
+    </ul>
15 
+</nav>
16 
+<section class="content">
17 
+    <header>
18 
+        {% block header %}{% endblock %}
19 
+    </header>
20 
+    {% for message in get_flashed_messages() %}
21 
+        <div class="flash">{{ message }}</div>
22 
+    {% endfor %}
23 
+    {% block content %}{% endblock %}
24 
+</section>
25 
+