Getting interface ready for modals.

beer/templates/beer/recipe.html

@@ -10,6 +10,11 @@ input, label {
 .container-beer {
     background: {{ recipe.srm_hex }};
 }
+
+p.smaller {
+font-size: .8em;
+}
+
 {% endblock %}
 
 {% block title %}Recipes{% endblock %}
@@ -33,8 +38,14 @@ input, label {
         </dl>
     </div>
     <div class="col-lg-4" style="border:1px solid #cecece; margin-right:.5em; margin-left:.5em">
-
+      <div class="d-flex justify-content-between bg-dark text-white">
-      <div class="text-truncate">Equipment: {{ recipe.equipment.name }}</div>
+        <div class="text-truncate ms-1 my-1">{{ recipe.equipment.name }}</div>
+        <div>
+          <button type="button" class="btn btn-dark btn-sm"><i class="fas fa-scale-unbalanced-flip"></i></button>
+          <button type="button" class="btn btn-dark btn-sm"><i class="fas fa-arrow-right-arrow-left"></i></button>
+          <button type="button" class="btn btn-dark btn-sm"><i class="fas fa-pen-to-square"></i></button>
+        </div>
+      </div>
 <!--
       <b>Batch Size:</b> {{ recipe.batch_size }} gal <b>Actual Volume:</b> {{ recipe.final_volume|floatformat:2 }}<br>
       <b>Mash Efficiency:</b> {{ recipe.efficiency|floatformat:2 }} %
@@ -64,11 +75,28 @@ input, label {
       <!-- Fermentables -->
       <div class="col-md">
         <div class="container-fluid">
-          <div class="container-fluid bg-dark text-white">Fermentables ({{ fermentable_weight|floatformat:2 }} lbs)</div>
+          <div class="d-flex justify-content-between bg-dark text-white">
-          <table class="table table-sm ">
+            <div class="ms-2 my-1">Fermentables ({{ fermentable_weight|floatformat:2 }} lbs)</div>
+            <div>
+              <button type="button" class="btn btn-dark btn-sm"><b>%</b></button>
+              <button type="button" class="btn btn-dark btn-sm"><b>OG</b></button>
+              <button type="button" class="btn btn-dark btn-sm"><i class="fa fa-plus"></i><b>ADD</b></button>
+            </div>
+          </div>
+
+          <table class="table table-sm table-hover">
+
+            <caption>
+            <p class="text-end smaller">
+            Pre-Boil Gravity: <b>{{ recipe.pre_boil_sg }}</b><br>
+            Original Gravity: <b>{{ recipe.original_sg }}</b><br>
+            Color: <b>{{ recipe.srm|floatformat:0 }} SRM</b>
+            </p>
+            </caption>
+
             <tbody>
               {% for f in recipe.recipefermentable_set.all %}
-                <tr>
+                <tr onclick="window.location='{% url 'beer:update_fermentable' f.fermentable.id %}';">
                   <td>{{ f.quantity|floatformat:2 }} lb</td>
                   <td>{{ f.fermentable.name }}<br>
                       <span class="text-muted">{{ f.fermentable.get_fermentable_type_display }} {{ f.srm }} SRM</span>
@@ -78,11 +106,7 @@ input, label {
               {% endfor %}
             </tbody>
           </table>
-            <p class="text-end small">
+
-            Pre-Boil Gravity: <b>{{ recipe.pre_boil_sg }}</b><br>
-            Original Gravity: <b>{{ recipe.original_sg }}</b><br>
-            Color: <b>{{ recipe.srm|floatformat:0 }} SRM</b>
-            </p>
         </div>
       </div>
 
@@ -90,11 +114,24 @@ input, label {
       <!-- Hops -->
       <div class="col-md">
         <div class="container-fluid">
-          <div class="container-fluid bg-dark text-white">Hops ({{ hop_weight|floatformat:2 }} oz)</div>
+          <div class="d-flex justify-content-between bg-dark text-white">
-          <table class="table table-sm ">
+            <div class="ms-2 my-1">Hops ({{ hop_weight|floatformat:2 }} oz)</div>
+            <div>
+              <button type="button" class="btn btn-dark btn-sm"><b>IBU</b></button>
+              <button type="button" class="btn btn-dark btn-sm"><i class="fa fa-plus"></i><b>ADD</b></button>
+            </div>
+          </div>
+          <table class="table table-sm table-hover">
+            <caption>
+              <p class="text-end smaller">
+              Total IBU: <b>{{ recipe.ibu_tinseth|floatformat:1 }}</b><br>
+              BU/GU: <b>{{ recipe.bu_gu|floatformat:2 }}</b><br>
+              RBR: <b>{{ recipe.rbr|floatformat:2 }}</b>
+              </p>
+            </caption>
             <tbody>
               {% for h in recipe.recipehop_set.all %}
-                <tr>
+                <tr onclick="window.location='{% url 'beer:update_hop' h.hop.id %}';">
                   <td>{{ h.quantity|floatformat:2 }} oz</td>
                   <td>{{ h.hop.name }} {{ h.hop.alpha|floatformat:1 }} %<br>
                       <span class="text-muted">{{ h.hop.get_hop_type_display }} {{ h.ibu_tinseth|floatformat:1 }} IBU</span>
@@ -103,11 +140,7 @@ input, label {
               {% endfor %}
             </tbody>
           </table>
-            <p class="text-end small">
+
-            Total IBU: <b>{{ recipe.ibu_tinseth|floatformat:1 }}</b><br>
-            BU/GU: <b>{{ recipe.bu_gu|floatformat:2 }}</b><br>
-            RBR: <b>{{ recipe.rbr|floatformat:2 }}</b>
-            </p>
         </div>
       </div>
 
@@ -118,7 +151,12 @@ input, label {
         <!-- Misc -->
         <div class="col-md">
           <div class="container-fluid">
-            <div class="container-fluid bg-dark text-white">Misc.</div>
+            <div class="d-flex justify-content-between bg-dark text-white">
+              <div class="ms-2 my-1">Misc.</div>
+              <div>
+                <button type="button" class="btn btn-dark btn-sm"><i class="fa fa-plus"></i><b>ADD</b></button>
+              </div>
+            </div>
             <table class="table table-sm">
               <tbody>
                 {% for m in recipe.recipemisc_set.all %}
@@ -131,7 +169,12 @@ input, label {
         <!-- Yeast -->
         <div class="col-md">
           <div class="container-fluid">
-            <div class="container-fluid bg-dark text-white">Yeast</div>
+            <div class="d-flex justify-content-between bg-dark text-white">
+              <div class="ms-2 my-1">Yeast</div>
+              <div>
+                <button type="button" class="btn btn-dark btn-sm"><i class="fa fa-plus"></i><b>ADD</b></button>
+              </div>
+            </div>
             <table class="table table-sm">
               <tbody>
                 {% for y in recipe.recipeyeast_set.all %}
@@ -149,7 +192,13 @@ input, label {
         <!-- Mash -->
         <div class="col-md">
           <div class="container-fluid">
-            <div class="container-fluid bg-dark text-white">Mash Profile {{ recipe.mash.name }}</div>
+            <div class="d-flex justify-content-between bg-dark text-white">
+              <div class="ms-2 my-1">Mash Profile: {{ recipe.mash.name }}</div>
+              <div>
+                <button type="button" class="btn btn-dark btn-sm"><i class="fas fa-arrow-right-arrow-left"></i></button>
+                <button type="button" class="btn btn-dark btn-sm"><i class="fas fa-pen-to-square"></i></button>
+              </div>
+            </div>
             <table class="table table-sm ">
               <tbody>
                 {% for step in recipe.mash.mashstep_set.all %}
@@ -165,14 +214,13 @@ input, label {
         <!-- Fermentation -->
         <div class="col-md">
           <div class="container-fluid">
-            <div class="container-fluid bg-dark text-white">Fermentation Profile</div>
+            <div class="d-flex justify-content-between bg-dark text-white">
-            <table class="table table-sm">
+              <div class="ms-2 my-1">Fermentation Profile</div>
-              <tbody>
+              <div>
-                <!-- {% for y in recipe.recipeyeast_set.all %} -->
+                <button type="button" class="btn btn-dark btn-sm"><i class="fas fa-arrow-right-arrow-left"></i></button>
-                  <!-- <tr><td>{{ y.yeast.name }}</td></tr> -->
+                <button type="button" class="btn btn-dark btn-sm"><i class="fas fa-pen-to-square"></i></button>
-                <!-- {% endfor %} -->
+              </div>
-              </tbody>
+            </div>
-            </table>
           </div>
         </div>
 

beer/templates/beer/update_fermentable.html

@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+{% load mathfilters %}
+{% load funcs %}
+{% load static %}
+
+
+
+{% block title %}Recipes{% endblock %}
+
+{% block jumbotron %}{{ data.name }}{% endblock %}
+
+{% block jumbotronsub %}
+{{ data.potential }}
+{% endblock %}

beer/templates/beer/update_hop.html

@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+{% load mathfilters %}
+{% load funcs %}
+{% load static %}
+
+
+
+{% block title %}Recipes{% endblock %}
+
+{% block jumbotron %}{{ data.name }}{% endblock %}
+
+{% block jumbotronsub %}
+{{ data.alpha }} %
+{% endblock %}

beer/urls.py

@@ -1,10 +1,13 @@
 from django.urls import path
 from django.conf import settings
 from django.conf.urls.static import static
-from .views import home, view_recipe
+from .views import home, view_recipe, update_ferm, update_hop
 
 
 urlpatterns = [
     path('', home, name='home'),
     path('recipes/<int:recipe_id>/', view_recipe, name='recipe'),
+    path('ingredients/fermentables/<int:ferm_id>',
+         update_ferm, name='update_fermentable'),
+    path('ingredients/hops/<int:hop_id>', update_hop, name='update_hop'),
 ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

beer/views.py

@@ -1,6 +1,6 @@
 from django.shortcuts import render, get_object_or_404
 
-from .models import UserProfile, Recipe, Batch
+from .models import UserProfile, Recipe, Batch, Fermentable, Hop
 from .extras import get_batches
 
 import json
@@ -51,3 +51,23 @@ def view_recipe(request, recipe_id):
     }
 
     return render(request, 'beer/recipe.html', context)
+
+
+def update_ferm(request, ferm_id):
+    fermentable = get_object_or_404(Fermentable, pk=ferm_id)
+
+    context = {
+        'data': fermentable,
+    }
+
+    return render(request, 'beer/update_fermentable.html', context)
+
+
+def update_hop(request, hop_id):
+    hop = get_object_or_404(Hop, pk=hop_id)
+
+    context = {
+        'data': hop,
+    }
+
+    return render(request, 'beer/update_hop.html', context)

config/settings.py

@@ -37,6 +37,7 @@ INSTALLED_APPS = [
     'django.contrib.staticfiles',
     'django.contrib.sites',
     'django.contrib.flatpages',
+    'fontawesomefree',
     'mathfilters',
     'yeast.apps.YeastLabConfig',
     'beer.apps.BeerConfig',

requirements.txt

@@ -4,6 +4,7 @@ django-cryptography-django5==2.2
 django-mathfilters==1.0.0
 docutils==0.21.2
 environs==11.0.0
+fontawesomefree==6.5.1
 gunicorn==22.0.0
 pip-chill==1.0.3
 psycopg2-binary==2.9.9

run.sh

@@ -1,6 +1,8 @@
 #! /usr/bin/env bash
 
 source .env/bin/activate
+find -name "*.py" -not -name "manage.py" -not -path "./.env/*" -not -path "*/migrations/*" -exec python -m flake8 {} \;
+
 pip install --upgrade -r requirements.txt > /dev/null
 python manage.py makemigrations
 python manage.py migrate

templates/base.html

@@ -6,7 +6,9 @@
 
     <!-- CSS only -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-
+	{% load static %}
+    <link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
+    <link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">
     <!-- JS, Popper.js, and jQuery -->
     <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"  -->
       <!-- integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"  -->
@@ -15,14 +17,14 @@
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     {% block script %}{% endblock %}
-	<style>
+    <style>
-		{% block style %}{% endblock %}
+        {% block style %}{% endblock %}
-		body {
+        body {
-		  margin-top: 10px;
+          margin-top: 10px;
-		}
+        }
-		label {
+        label {
-			margin-right: 10px;
+            margin-right: 10px;
-		}
+        }
     .table-borderless > tbody > tr > td,
     .table-borderless > tbody > tr > th,
     .table-borderless > tfoot > tr > td,
@@ -32,14 +34,14 @@
         border: none;
         background-color: rgba(0,0,0, 0.0) !important;
     }
-	</style>
+    </style>
     </head>
 <body>
-	<div class="container">
+    <div class="container">
-		<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
       <div class="container-fluid">
         <a class="navbar-brand" href="/">Damn Yankee Brewing</a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" 
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
           aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
@@ -85,9 +87,9 @@
         </div>
       </div>
     </nav>
-	</div>
+    </div>
 
-	<main role="main">
+    <main role="main">
     <div class="container my-5">
       <div class="p-5 text-left bg-body-tertiary rounded-3">
         <h1 class="text-body-emphasis">{% block jumbotron %}{% endblock %}</h1>
@@ -96,8 +98,8 @@
         </p>
       </div>
     </div>
-		{% block content %}{% endblock %}
+        {% block content %}{% endblock %}
-	</main>
+    </main>
 
 </body>
 {% block endscript %}{% endblock %}