Styling

oelgazzar · Jun 9, 2018 · 51cd394 · 51cd394
1 parent 01666df
commit 51cd394
Show file tree

Hide file tree

Showing 17 changed files with 141 additions and 63 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+__pycache__/*
diff --git a/__pycache__/blog.cpython-36.pyc b/__pycache__/blog.cpython-36.pyc
diff --git a/__pycache__/config.cpython-36.pyc b/__pycache__/config.cpython-36.pyc
diff --git a/app/__pycache__/__init__.cpython-36.pyc b/app/__pycache__/__init__.cpython-36.pyc
diff --git a/app/__pycache__/auth.cpython-36.pyc b/app/__pycache__/auth.cpython-36.pyc
diff --git a/app/__pycache__/models.cpython-36.pyc b/app/__pycache__/models.cpython-36.pyc
diff --git a/app/__pycache__/routes.cpython-36.pyc b/app/__pycache__/routes.cpython-36.pyc
diff --git a/app/auth.py b/app/auth.py
@@ -6,7 +6,7 @@
 bp = Blueprint('auth', __name__, url_prefix='/auth')
 
 
-@bp.route('/register', methods=['POST', 'GET'])
+@bp.route('/register', methods=['GET', 'POST'])
 def register():
  if request.method == 'POST':
  username = request.form['username']

diff --git a/app/static/css/style.css b/app/static/css/style.css
@@ -0,0 +1,18 @@
+footer .container {
+ margin-top: 100px;
+}
+
+.login {
+ padding: 10px 20px;
+ width: 40%;
+ margin: 30px auto;
+}
+
+.login img {
+ display: block;
+ margin: auto;
+}
+
+.login li {
+ color: red;
+}
diff --git a/app/static/images/feather.png b/app/static/images/feather.png
diff --git a/app/templates/auth/login.html b/app/templates/auth/login.html
@@ -1,17 +1,33 @@
-{%with messages = get_flashed_messages()%}
- {%if messages%}
- {%for message in messages%}
- <ul>{{message}}</ul>
- {%endfor%}
- {%endif%}
-{%endwith%}
-{{all_identical_users}}
+{% extends "base.html" %}
+
+{% block title %}Blog{% endblock %}
+{% block header %}{% endblock %}
+{% block content %}
+ <div class="login z-depth-2">
  <form method="POST">
- <label for="username">Username</label>
- <input name="username" id="username" required>
- <label for="password">Password</label>
- <input type="password" name="password" id="password" required>
- <input type="submit" name="Login">
-
- </form>
-
+ <a href={{ url_for('index') }}><img src="{{ url_for('static', filename='images/feather.png') }}"></a>
+ <div class="row">
+ <div class="input-field col s12">
+ <input type="text" name="username" id="username" required>
+ <label for="username">Username</label>
+ </div>
+ <div class="input-field col s12">
+ <input type="password" name="password" id="password" required>
+ <label for="password">Password</label>
+ </div>
+ <div class="input-field col s12">
+ <input type="submit" value="{% block button_label %}Login{%endblock %}" class="blue white-text btn">
+ </div>
+ </form> 
+ {%with messages = get_flashed_messages()%}
+ {%if messages%}
+ <ul>
+ {%for message in messages%}
+ <li>{{message}}</li>
+ {%endfor%}
+ </ul>
+ {%endif%}
+ {%endwith%}
+ </div>
+{% endblock %}
+{% block footer %}{% endblock %}
diff --git a/app/templates/auth/register.html b/app/templates/auth/register.html
@@ -1,14 +1,7 @@
-{%if error%}
- {{error}}
-{%endif%}
-
- {% block content %}
- <form method="POST">
- <label for="username">Username</label>
- <input name="username" id="username" required>
- <label for="password">Password</label>
- <input type="password" name="password" id="password">
- <input type="submit" name="Login"> 
- </form>
- {% endblock %}
-
+<!--
+{% extends "login.html" %}
+-->
+<!--
+{% block button_label %}Register{% endblock %}
+-->
+<h1>asdasdsa</h1>
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ {% block head %}
+ <title>{% block title %}{% endblock %}</title>
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+ <link rel="icon" href="{{ url_for('static', filename='images/feather.png') }}">
+ {% endblock %}
+</head>
+<body>
+ <div id="header"><div class="container">{% block header %}<a href={{ url_for('index') }}>
+ <img src="{{ url_for('static', filename='images/feather.png') }}"></a>{% endblock %}</div></div>
+ <div id="content"><div class="container">{% block content %}{% endblock %}</div></div>
+ <footer>
+ <div class="container">
+ {% block footer %}
+ <hr>
+ &copy; Copyright 2017
+ {% endblock %}
+ </div>
+ </footer>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
+</body>
+</html>
diff --git a/app/templates/detail.html b/app/templates/detail.html
@@ -1,6 +1,10 @@
-<a href="{{ url_for('index')}}">All posts</a>
-<h1>{{ post.title }}</h1>
-<h4>{{ post.date() }}</h4>
-<p>{{ post.body }}</p>
-<a href="{{ url_for('edit', post_id=post.id)}}">Edit</a>
-<hr>
+{% extends "base.html" %}
+
+{% block title %}{{ post.title }}{% endblock %}
+{% block content %}
+ <a href="{{ url_for('index')}}" class="waves-effect waves-light right">All posts<i class="material-icons right">chevron_right</i></a>
+ <h1>{{ post.title }}</h1>
+ <h4>{{ post.date() }}</h4>
+ <p>{{ post.body }}</p>
+ <a href="{{ url_for('edit', post_id=post.id) }}" class="waves-effect waves-light btn">Edit</a>
+{% endblock %}
diff --git a/app/templates/edit.html b/app/templates/edit.html
@@ -1,8 +1,5 @@
-<form method='POST'>
- <label>Title</label>
- <input type='text' name='title' value='{{ post.title }}'><br>
- <label>Body</label>
- <textarea rows='10' cols='50' name='body'>{{ post.body }}</textarea><br>
- <input type='submit' value='Submit'>
- <a href="{{ url_for('index') }}">cancel</a>
-</form>
+{% extends "new.html" %}
+
+{% block title %}{{ post.title }}{% endblock %}
+{% block post_title%}{{ post.title }}{% endblock %}
+{% block post_body%}{{ post.body }}{% endblock %}
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -1,10 +1,15 @@
-<a href="{{ url_for('new') }}">New post</a>
-{% if posts %}
- <ul>
- {% for post in posts %}
- <li><a href="{{ url_for('detail', post_id=post.id) }}">{{ post.title }}</a>&nbsp;{{ post.date() }}</li>
- {% endfor %}
- </ul>
-{% else %}
- <h3>No posts.</h3>
-{% endif %}
+{% extends "base.html" %}
+
+{% block title %}Blog{% endblock %}
+{% block content %}
+ <a href="{{ url_for('new') }}" class="waves-effect waves-light btn">New Post</a>
+ {% if posts %}
+ <div class="collection">
+ {% for post in posts %}
+ <a href="{{ url_for('detail', post_id=post.id) }}" class="collection-item">{{ post.title }}<span class="right">{{ post.date() }}</span></a>
+ {% endfor %}
+ </div>
+ {% else %}
+ <h3>No posts.</h3>
+ {% endif %}
+{% endblock %}
diff --git a/app/templates/new.html b/app/templates/new.html
@@ -1,8 +1,25 @@
-<form method='POST'>
- <label>Title</label>
- <input type='text' name='title'><br>
- <label>Body</label>
- <textarea rows='10' cols='50' name='body'></textarea><br>
- <input type='submit' value='Submit'>
- <a href="{{ url_for('index') }}">cancel</a>
-</form>
+{% extends "base.html" %}
+
+{% block title %}New Post{% endblock %}
+{% block content %}
+ <form method="POST">
+ <div class="row">
+ <div class="input-field col s4">
+ <input id="title" type="text" name="title" value="{% block post_title%}{% endblock %}">
+ <label for="title">Title</label>
+ </div>
+ </div>
+ <div class="row">
+ <div class="input-field col s12">
+ <textarea id="body" class="materialize-textarea">{% block post_body%}{% endblock %}</textarea>
+ <label for="body">Body</label>
+ </div>
+ </div>
+ <div class="row">
+ <div class="input-field col s12">
+ <input type="submit" value="Submit" class="btn">
+ <a href="{{ url_for('index') }}">cancel</a>
+ </div>
+ </div>
+ </form>
+{% endblock %}