Browse Source

Adds templates for auth and css

Jose Reyes 6 years ago
parent
commit
75dd4d709c

+ 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
+