Show, don’t tell, what has been worn

Rather than only naming the shirts worn today/previously, show their thumbnails too.
norm · Oct 12, 2021 · f68ff70 · f68ff70
1 parent 1e45d47
commit f68ff70
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 17 deletions.
diff --git a/sass/static.scss b/sass/static.scss
@@ -178,6 +178,17 @@ ol.clothing {
             outline: 1px solid #9f3052;
             margin: 0;
         }
+        form.unwear {
+            position: absolute;
+            bottom: 0px;
+            font-size: 14px;
+            margin: 0;
+            padding: 0;
+
+            button {
+                display: block;
+            }
+        }
     }
 
     // provides text on top of images
@@ -225,6 +236,7 @@ ol.clothing {
                                   grid-template-columns: 1fr 1fr 1fr 1fr; }
 
     > li,
+    > li form,
     > li img {
         width: 100px;
         @include width_below(660px) { width: 90px; }

diff --git a/templates/panel.html b/templates/panel.html
@@ -1,12 +1,25 @@
 {% extends "base_template.html" %}
+{% load thumbnail %}
 
 {% block content %}
 
-<h2>Today ({% now 'Y-m-d' %})</h2>
+<h2>Wearing today ({% now 'F jS' %})</h2>
 {% if request.user.wearing_today %}
+  <ol class='clothing large'>
   {% for wearing in request.user.wearing_today %}
-    <p>{{wearing.clothing}}</p>
+  <li>
+    <a href='https://{{wearer}}.hasworn.com{{wearing.clothing.static_site_url}}'>
+      {% thumbnail wearing.clothing.image "190x190" crop="center" as thumb %}
+        <img src='{{thumb.url}}' width=190 height=190 alt=''>
+      {% empty %}
+        <img src='//hasworn.m17s.net/placeholder/tshirt.100.jpg' width=190 height=190 alt=''>
+      {% endthumbnail %}
+      <i>{{wearing.clothing.name}} <span>({{wearing.clothing.type}})</span></i>
+    </a>
+    <i><b>on</b> {{wearing.day}}</i>
+  </li>
   {% endfor %}
+  </ol>
 {% else %}
   <p>
     To wear something today, select from <a href='/all/'>all previously
@@ -28,7 +41,7 @@ <h2>Today ({% now 'Y-m-d' %})</h2>
   </form>
 {% endif %}
 
-<h2>New clothing</h2>
+<h2>Add something new</h2>
 <form method='post' action='{% url "create-clothing" %}' enctype="multipart/form-data">
   {% csrf_token %}
   <fieldset>
@@ -53,20 +66,8 @@ <h2>New clothing</h2>
   </fieldset>
 </form>
 
-<h2>Previously</h2>
-<ul>
-  {% for wearing in request.user.worn_previously.all|slice:":5" %}
-  <li>
-    {{wearing}}
-    <form method='post' action='{% url "delete-wearing" pk=wearing.pk %}'>
-      {% csrf_token %}
-      <input type='hidden' name='pk' value='{{wearing.pk}}'>
-      <input type='submit' value='Delete'>
-    </form>
-  </li>
-  {% endfor %}
-</ul>
-
+<h2>Previously worn</h2>
+<p>To wear something before today, fill out this form.</p>
 <form method='post' action='{% url "create-wearing" %}'>
   {% csrf_token %}
   <fieldset>
@@ -83,5 +84,27 @@ <h2>Previously</h2>
   </fieldset>
 </form>
 
+<ol class='clothing most'>
+  {% for worn in wearer.worn_previously.all|slice:":16" %}
+  <li>
+    {% thumbnail worn.clothing.image "100x100" crop="center" as thumb %}
+      <img src='{{thumb.url}}' width=100 height=100 alt=''>
+    {% empty %}
+      <img src='//hasworn.m17s.net/placeholder/tshirt.100.jpg' width=100 height=100 alt=''>
+    {% endthumbnail %}
+    <b>{{worn.clothing}}</b>
+    <form method='post' action='{% url "delete-wearing" pk=worn.pk %}' class='unwear'>
+      {% csrf_token %}
+      <input type='hidden' name='pk' value='{{worn.pk}}'>
+      <button type='submit'>
+      <i>
+        {{worn.day|date:"F jS"}}
+        <em>delete this</em>
+      </i>
+      </button>
+    </form>
+  </li>
+  {% endfor %}
+</ol>
 
 {% endblock %}