Navbar

1 files changed, 46 insertions, 8 deletions

diff --git a/web_interface/drinks/templates/drinks_overview.html b/web_interface/drinks/templates/drinks_overview.html
index 13c8e9d..1c4f631 100644
--- a/web_interface/drinks/templates/drinks_overview.html
+++ b/web_interface/drinks/templates/drinks_overview.html
@@ -1,14 +1,21 @@
 {% extends 'base.html' %}
-
-{% block content %}
-
-<div class="field label prefix border">
+{% block header %}
+<div class="field label prefix border max">
   <i>search</i>
   <input type="text" id="search-bar">
   <label>Search</label>
   <i class="front" style="visibility: hidden" id="search-clear" onclick="document.getElementById('search-bar').value = ''; Search('')">close</i>
 </div>
 
+<button class="transparent square" data-ui="#add-drink">
+  <i>add</i>
+</button>
+{% endblock %}
+
+{% block content %}
+
+<!-- Search -->
+
 <script>
   const searchBar = document.getElementById('search-bar');
 
@@ -39,6 +46,7 @@
 });
 </script>
 
+<!-- Drinks -->
 
 <div class="grid" id="drinks">
 
@@ -60,7 +68,7 @@
             {% if drink.author %}
             <button class="circle drink-author" style="background-color: hsl({{ drink.author.color }}deg 80% 40%);">
               {{ drink.author }}
-              <div class="tooltip max" style="width: fit-content">
+              <div class="tooltip max bottom" style="width: fit-content">
                 <b>Author</b>
                 <p>{{ drink.author.name }}</p>
               </div>
@@ -85,11 +93,41 @@
         </div>
       </div>
     </article>
-
   </div>
-
   {% endfor %}
-
 </div>
 
+<!-- Add drink modal -->
+
+<div class="overlay blur"></div>
+<dialog id="add-drink">
+  <h5>Add drink</h5>
+  <fieldset>
+    <legend>Fill all fields</legend>
+    <div class="row">
+      <div class="max">
+        <div class="field border label max">
+          <input>
+          <label>Input</label>
+        </div>
+      </div>
+      <div class="max">
+        <div class="field border label">
+          <select>
+            <option>Item 1</option>
+            <option>Item 2</option>
+            <option>Item 3</option>
+          </select>
+          <label>Select</label>
+        </div>
+      </div>
+    </div>
+  </fieldset>
+
+  <nav class="right-align no-space">
+    <button class="transparent link">Cancel</button>
+    <button class="transparent link">Confirm</button>
+  </nav>
+</dialog>
+
 {% endblock %}