Drinks overview

Don't error on no picture
Hide ingredients on no ingredients
Create drink -> dispense drinks
Dispense drink width fill

2 files changed, 9 insertions, 1 deletions

diff --git a/web_interface/drinks/templates/drinks_overview.html b/web_interface/drinks/templates/drinks_overview.html
index 0de4504..cc80881 100644
--- a/web_interface/drinks/templates/drinks_overview.html
+++ b/web_interface/drinks/templates/drinks_overview.html
@@ -10,22 +10,27 @@
 
     <article class="no-padding">
       <div class="grid no-space">
+        {% if drink.picture %}
         <div class="s6">
           <img class="responsive" src="{{ drink.picture.url }}">
         </div>
+        {% endif %}
         <div class="s6">
           <div class="padding">
             <h4>{{ drink.name }}</h4>
             <p>{{ drink.description }}</p>
 
+            {% if drink.ingredient_set.all %}
             <h5>Ingredients</h5>
             <ul>
               {% for ingredient in drink.ingredient_set.all %}
               <li>{{ ingredient.name }}</li>
               {% endfor %}
             </ul>
+            {% endif %}
+
             <nav>
-              <button class="border round">Create drink</button>
+              <button class="border round dispense-drink">Dispense drink</button>
             </nav>
           </div>
         </div>
diff --git a/web_interface/static/style/main.css b/web_interface/static/style/main.css
index e69de29..b074410 100644
--- a/web_interface/static/style/main.css
+++ b/web_interface/static/style/main.css
@@ -0,0 +1,3 @@
+.dispense-drink {
+  width: 85%; /* Fill card width */
+}