Add footer for displaying specs

src/humulus/static/style.css

@@ -31,3 +31,7 @@
 body {
   padding-top: 5rem;
 }
+
+.above-footer {
+  padding-bottom: 12rem;
+}

src/humulus/templates/_base.html

@@ -65,6 +65,7 @@
       {% block body %}{% endblock %}
     </main><!-- /.container -->
 
+    <footer class="fixed-bottom">{% block footer %}{% endblock %}</footer>
 
     <!-- Bootstrap JS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

src/humulus/templates/recipes/_macros.html

@@ -29,32 +29,6 @@
     <div class="col-sm-3">{{ render_field_with_errors(form.efficiency, 'ingredient-field') }}</div>
     <div class="col-sm-3">{{ render_field_with_errors(form.volume, 'ingredient-field') }}</div>
   </div>
-  {#-
-    Recipe specifications
-  -#}
-  <div class="row"><div class="col"><h3>Estimated Specifications</h3></div></div>
-  <div class="row">
-    <div class="col">
-      <dl>
-        <dt>Original Gravity</dt>
-        <dd id="estimated-og"></dd>
-        <dt>Final Gravity</dt>
-        <dd id="estimated-fg"></dd>
-        <dt>Alcohol</dt>
-        <dd id="estimated-abv"></dd>
-      </dl>
-    </div>
-    <div class="col">
-      <dl>
-        <dt>Bitterness</dt>
-        <dd id="estimated-ibu"></dd>
-        <dt>Bitterness Ratio</dt>
-        <dd id="estimated-iburatio"></dd>
-        <dt>Color</dt>
-        <dd id="estimated-srm"></dd>
-      </dl>
-    </div>
-  </div>
   {#-
     Fermentable Ingredients
   -#}
@@ -154,3 +128,32 @@
 </form>
 <script src="{{ url_for('static', filename='recipes.js') }}"></script>
 {% endmacro %}
+
+{% macro render_footer() %}
+<div class="bg-info text-white">
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <dl>
+          <dt>Original Gravity</dt>
+          <dd id="estimated-og"></dd>
+          <dt>Final Gravity</dt>
+          <dd id="estimated-fg"></dd>
+          <dt>Alcohol</dt>
+          <dd id="estimated-abv"></dd>
+        </dl>
+      </div>
+      <div class="col">
+        <dl>
+          <dt>Bitterness</dt>
+          <dd id="estimated-ibu"></dd>
+          <dt>Bitterness Ratio</dt>
+          <dd id="estimated-iburatio"></dd>
+          <dt>Color</dt>
+          <dd id="estimated-srm"></dd>
+        </dl>
+      </div>
+    </div>
+  </div>
+</div>
+{% endmacro %}

src/humulus/templates/recipes/create.html

@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 -#}
-{% from "recipes/_macros.html" import render_recipe_form %}
+{% from "recipes/_macros.html" import render_recipe_form, render_footer %}
 
 {% extends '_base.html' %}
 {% block title %}Create Recipe{% endblock %}
@@ -21,5 +21,13 @@
 {% block body %}
 <div class="row"><h1>Create a new recipe</h1></div>
 {{ render_recipe_form(form, url_for('recipes.create'), 'Create recipe') }}
-<a href="{{ url_for('recipes.index')}}" class="mt-2 btn btn-secondary btn-sm">Back to recipe list</a>
+<div class="row above-footer">
+  <div class="col">
+    <a href="{{ url_for('recipes.index')}}" class="mt-2 btn btn-secondary btn-sm">Back to recipe list</a>
+  </div>
+</div>
+{% endblock %}
+
+{% block footer %}
+{{ render_footer() }}
 {% endblock %}

src/humulus/templates/recipes/update.html

@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 -#}
-{% from "recipes/_macros.html" import render_recipe_form %}
+{% from "recipes/_macros.html" import render_recipe_form, render_footer %}
 
 {% extends '_base.html' %}
 {% block title %}Update | {{ form.name.data }}{% endblock %}
@@ -21,5 +21,13 @@
 {% block body %}
 <div class="row"><h1>{{ form.name.data }}</h1></div>
 {{ render_recipe_form(form, url_for('recipes.update', id=id, rev=rev), 'Update recipe') }}
-<a href="{{ url_for('recipes.info', id=id)}}" class="mt-2 btn btn-secondary btn-sm">Cancel</a>
+<div class="row above-footer">
+  <div class="col">
+    <a href="{{ url_for('recipes.info', id=id)}}" class="mt-2 btn btn-secondary btn-sm">Cancel</a>
+  </div>
+</div>
+{% endblock %}
+
+{% block footer %}
+{{ render_footer() }}
 {% endblock %}