Start working on workout create page

Add variable to each page to determine with of "box" for form.
Add new workout create route.

5 files changed, 96 insertions, 29 deletions

diff --git a/app/templates/base/form.html b/app/templates/base/form.html
index 830afbe..440ea0e 100644
--- a/app/templates/base/form.html
+++ b/app/templates/base/form.html
@@ -1,33 +1,33 @@
 {% extends 'base/layout.html' %}
 
 {% block content %}
-	<div class="form">
-		<section class="hero is-primary is-fullheight-with-navbar">
-			<div class="hero-body">
-				<div class="container">
-					<div class="columns is-centered">
-						<div class="column is-5-tablet is-4-desktop is-3-widescreen">
-							<h1 class="title is-2">{% block title %}{% endblock %}</h1>
+<div class="form">
+    <section class="hero is-primary is-fullheight-with-navbar">
+        <div class="hero-body">
+            <div class="container">
+                <div class="columns is-centered">
+                    <div class="column {{ column_classes }}">
+                        <h1 class="title is-2">{% block title %}{% endblock %}</h1>
 
-							<!-- TODO: render errors -->
-							{% with messages = get_flashed_messages(with_categories=true) %}
-								{% if messages %}
-									{% for category, message in messages %}
-										<div class="notification is-{{ category }}">
-											{{ message }}
-										</div>
-									{% endfor %}
-								{% endif %}
-							{% endwith %}
+                        <!-- TODO: render errors -->
+                        {% with messages = get_flashed_messages(with_categories=true) %}
+                        {% if messages %}
+                        {% for category, message in messages %}
+                        <div class="notification is-{{ category }}">
+                            {{ message }}
+                        </div>
+                        {% endfor %}
+                        {% endif %}
+                        {% endwith %}
 
-							<form method="POST" class="box">
-								{{ form.csrf_token }}
-								{% block form %}{% endblock %}
-							</form>
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-	</div>
+                        <form method="POST" class="box">
+                            {{ form.csrf_token }}
+                            {% block form %}{% endblock %}
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
 {% endblock %}
diff --git a/app/templates/base/layout.html b/app/templates/base/layout.html
index 0d5fe1a..4393146 100644
--- a/app/templates/base/layout.html
+++ b/app/templates/base/layout.html
@@ -24,11 +24,11 @@
 	
 		<div id="navbarBasicExample" class="navbar-menu">
 			<div class="navbar-start">
-				<a class="navbar-item">
+				<a href="workout/create" class="navbar-item">
 					Start a Workout
 				</a>
 
-				<a class="navbar-item">
+				<a href="user/progress" class="navbar-item">
 					Progress
 				</a>
 	
diff --git a/app/templates/user/login.html b/app/templates/user/login.html
index f22391f..6f1a553 100644
--- a/app/templates/user/login.html
+++ b/app/templates/user/login.html
@@ -1,3 +1,4 @@
+{% set column_classes = 'is-5-tablet is-4-desktop is-3-widescreen' %}
 {% extends 'base/form.html' %}
 
 {% block title %}Login{% endblock %}
diff --git a/app/templates/user/register.html b/app/templates/user/register.html
index 74a6e5d..35e62ee 100644
--- a/app/templates/user/register.html
+++ b/app/templates/user/register.html
@@ -1,3 +1,4 @@
+{% set column_classes = 'is-5-tablet is-4-desktop is-3-widescreen' %}
 {% extends 'base/form.html' %}
 
 {% block title %}Sign Up{% endblock %}
diff --git a/app/templates/workout/create.html b/app/templates/workout/create.html
new file mode 100644
index 0000000..99f6f48
--- /dev/null
+++ b/app/templates/workout/create.html
@@ -0,0 +1,65 @@
+{% extends 'base/form.html' %}
+
+{% block title %}Create A Workout{% endblock %}
+
+{% block form %}
+<div class="field is-horizontal">
+    <div class="field-body">
+        <div class="field">
+            <p class="control is-expanded has-icons-left">
+            <input class="input" type="text" placeholder="Workout Name">
+            <span class="icon is-small is-left">
+                <i class="fas fa-user"></i>
+            </span>
+            </p>
+        </div>
+    </div>
+</div>
+<div class="field is-horizontal">
+    <div class="field-body">
+        <div class="field">
+            <p class="control is-expanded has-icons-left">
+            <input class="input" type="text" placeholder="Exercise Name">
+            <span class="icon is-small is-left">
+                <i class="fas fa-user"></i>
+            </span>
+            </p>
+        </div>
+        <div class="field">
+            <p class="control is-expanded has-icons-left has-icons-right">
+            <input class="input" type="number" placeholder="Reps" min="1" max="100">
+            <span class="icon is-small is-left">
+                <i class="fas fa-envelope"></i>
+            </span>
+            <span class="icon is-small is-right">
+                <i class="fas fa-check"></i>
+            </span>
+            </p>
+        </div>
+    </div>
+</div>
+<div class="field is-grouped is-grouped-right">
+    <p class="control">
+    <a class="button is-primary">
+        +
+    </a>
+    </p>
+    <p class="control">
+    <a class="button is-danger">
+        ✖
+    </a>
+    </p>
+</div>
+<div class="field is-grouped is-grouped-right">
+    <p class="control">
+    <a class="button is-primary">
+        Create Workout
+    </a>
+    </p>
+    <p class="control">
+    <a class="button is-danger">
+        Cancel
+    </a>
+    </p>
+</div>
+{% endblock %}