styling, sub instructions

4 files changed, 54 insertions, 13 deletions

diff --git a/templates/pages/account.html b/templates/pages/account.html
index db28632..10a3789 100644
--- a/templates/pages/account.html
+++ b/templates/pages/account.html
@@ -1,5 +1,11 @@
-{% extends "base.html" %} {% block title %} account {% endblock %} {% block
-heading %}
+{% extends "base.html" %} {% block scripts %}
+
+<!-- Conditionally load index.js, as it's only needed on this page -->
+<script
+  src="{{ url_for('static', filename='scripts/index.js') }}"
+  defer
+></script>
+{% endblock %} {% block title %} account {% endblock %} {% block heading %}
 <h1>Hey {{ session.username }} 👋</h1>
 {% endblock %} {% block content %}
 <p>
@@ -13,4 +19,13 @@ heading %}
   <a href="mailto:hello@somwthing.com">here.</a>
 </p>
 <button hx-post="/logout">Logout</button>
+<button id="show-modal">Delete account</button>
+<dialog>
+  <p>
+    Are you sure you want to delete your account? This will erase all your data
+    including your recipes.
+  </p>
+  <button hx-delete="/delete-account">yes</button>
+  <button id="close-modal">cancel</button>
+</dialog>
 {% endblock %}
diff --git a/templates/pages/home.html b/templates/pages/home.html
index 6a5d4cd..c44a017 100644
--- a/templates/pages/home.html
+++ b/templates/pages/home.html
@@ -6,21 +6,33 @@
   hx-trigger="submit load"
   hx-target=".app"
   hx-swap="innerHTML"
+  hx-indicator="#spinner"
+  hx-target-422="#form-error"
+  hx-target-5*="#form-error"
 >
-  <input type="text" name="url" class="border-2 border-black" />
+<div style="display: flex; align-items: center; margin-bottom: 15px;"}>
+  <input type="text" name="url" class="border-2 border-black" style="margin-bottom: 0px; margin-right: 10px;"/>
+  <img src={{url_for("static", filename="images/bars.svg")}} class="htmx-indicator" id="spinner" alt="loading indicator "/>
+</div>
   <button type="submit" class="cursor-pointer">Submit</button>
+  <div id="form-error"></div>
 </form>
 
 <h3>search for recipes 🔎</h3>
-<input
-  type="text"
-  hx-trigger="input"
-  hx-post="/recipes/search"
-  hx-target=".app"
-  hx-include="#facets"
-  name="q"
-  class="border-2 border-black"
-  id="search"
-/>
+<div style="display: flex; align-items: center; margin-bottom: 15px;"}>
+  <input
+    type="text"
+    hx-trigger="input"
+    hx-post="/recipes/search"
+    hx-target=".app"
+    hx-include="#facets"
+    hx-indicator="#spinner-2"
+    name="q"
+    class="border-2 border-black"
+    id="search"
+    style="margin-bottom: 0px; margin-right: 10px;"
+  />
+  <img src={{url_for("static", filename="images/bars.svg")}} class="htmx-indicator" id="spinner-2" alt="loading indicator "/>
+</div>
 
 {% include "/components/app.html" %} {% endblock %}
diff --git a/templates/pages/signup.html b/templates/pages/signup.html
index c706074..99d6021 100644
--- a/templates/pages/signup.html
+++ b/templates/pages/signup.html
@@ -7,6 +7,8 @@
   <input type="text" name="username" id="username" />
   <label for="password">password</label>
   <input type="password" name="password" id="password" />
+  <label for="password-confirm">confirm password</label>
+  <input type="password" name="password-confirm" id="password-confirm" />
   <button type="submit">submit</button>
 </form>
 <p id="message"></p>
diff --git a/templates/pages/single-recipe.html b/templates/pages/single-recipe.html
index 35c03c0..d8c334d 100644
--- a/templates/pages/single-recipe.html
+++ b/templates/pages/single-recipe.html
@@ -12,11 +12,23 @@ endblock %} {% block content %}
     {% endfor %}
   </ul>
   <h2>Instructions</h2>
+  {% if single_recipe.has_subsections %}
+      {% for instruction in single_recipe.instructions %}
+      <h3>{{  instruction.n }}</h3>
+          <ul>
+          {% for i in instruction.i %}
+          <li>{{ i }}</li>  
+          {% endfor %}
+          </ul>
+      {% endfor %}
+  {% else %}
   <ul>
     {% for instruction in single_recipe.instructions %}
     <li>{{ instruction }}</li>
     {% endfor %}
   </ul>
+  {% endif %}
+
 </article>
 <button
   hx-delete="/recipes/delete/{{ single_recipe._id }}"