Refine day browser selection UI

artifacts/views.py

@@ -116,6 +116,7 @@ def feed(request):
             "selected_kind": selected_kind,
             "selected_persona": persona,
             "selected_view": selected_view,
+            "today": timezone.localdate(),
             "title_query": title_query,
             "kind_choices": Artifact.KIND_CHOICES,
         },

static/daybook.css

@@ -207,6 +207,21 @@ h1 {
   box-shadow: 0 10px 24px rgba(57, 44, 28, 0.08);
 }
 
+.day-link.selected {
+  background: #17313b;
+  color: #fffaf0;
+}
+
+.day-link.selected span,
+.day-link.selected strong {
+  color: #fffaf0;
+}
+
+.day-link.selected .today-badge {
+  background: #b9e8bf;
+  color: #17313b;
+}
+
 .day-link span,
 .pane-heading span,
 .artifact-row-main strong {
@@ -214,6 +229,18 @@ h1 {
   font-size: 0.7rem;
 }
 
+.today-badge {
+  background: #cfe9cf;
+  border-radius: 999px;
+  color: #245238;
+  display: inline-block;
+  font-size: 0.62rem;
+  font-style: normal;
+  font-weight: 500;
+  margin-left: 0.35rem;
+  padding: 0.08rem 0.38rem;
+}
+
 .day-link strong {
   color: #17313b;
   font-size: 0.82rem;

templates/artifacts/feed.html

@@ -50,7 +50,7 @@
       <nav class="day-list">
         {% for day in days %}
           <a class="day-link {% if day == selected_day %}selected{% endif %}" href="?day={{ day|date:'Y-m-d' }}{% if selected_persona %}&amp;persona={{ selected_persona|urlencode }}{% endif %}{% if selected_kind %}&amp;kind={{ selected_kind|urlencode }}{% endif %}{% if title_query %}&amp;q={{ title_query|urlencode }}{% endif %}&amp;view={{ selected_view }}">
-            <span>{{ day|date:"D" }}</span>
+            <span>{{ day|date:"D" }}{% if day == today %}<em class="today-badge">Today</em>{% endif %}</span>
             <strong>{{ day|date:"Y-m-d" }}</strong>
           </a>
         {% endfor %}
@@ -61,7 +61,7 @@
 
     <aside class="artifact-sidebar" aria-label="Artifacts for selected day">
       <div class="pane-heading">
-        <h2>{{ selected_day|date:"Y-m-d" }}</h2>
+        <h2>{{ selected_day|date:"M j Y" }}</h2>
         <span>{{ artifacts|length }} artifact{{ artifacts|length|pluralize }}</span>
       </div>