More styling tweaks, including showing the domain on article listings.

app.py

@@ -2,6 +2,7 @@
 from datetime import datetime, timedelta
 import json
 import traceback
+import urllib
 
 import aiofiles
 import fastapi
@@ -243,10 +244,13 @@ def convert_days_from_articles(days):
     return output
 
 def convert_article(a):
+    u = a['url']
+    uu = urllib.parse.urlparse(u)
     return {
-        'url': a['url'],
+        'url': u,
         'title': a['gtitle'],
         'slug': a['slug'],
+        'domain': uu.netloc,
     }
 
 def calc_num_days(dayslist):

static/style.css

@@ -34,7 +34,19 @@ body {
 }
 
 .articleentry {
-    margin: 2em;
+    margin: 1em;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    padding: 0.5em;
+}
+
+.articleentry a:link {
+    text-decoration: none;
+}
+
+.badge {
+    color: white;
+    background-color: #f66711;
 }
 
 @media screen and (max-width: 52em) {
@@ -45,4 +57,8 @@ body {
     .uhaul_main {
         font-size: 48pt;
     }
+
+    .articlereport {
+        margin-top: 1em;
+    }
 }

templates/base.htm

@@ -6,8 +6,8 @@
 
     <title>{% block title %}storrowed.boston{% endblock %}</title>
 
-    <link rel="stylesheet" href="/static/style.css"/>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
+    <link rel="stylesheet" href="/static/style.css"/>
 
     {% block headerepi %}
     {% endblock %}

templates/main.htm

@@ -1,16 +1,23 @@
 {% extends 'base.htm' %}
 
 {% macro render_article_link(desc, date) %}
-<div class="articleentry row mt-2 mb-2">
-  <div class="col">
-    <a href="{{ desc.url }}">{{ desc.title }}</a>
-  </div>
-  <div class="articlereport col-md-auto">
-    <form action="/action/flag" method="POST">
-      <input type="hidden" name="date" value="{{ date }}"/>
-      <input type="hidden" name="article" value="{{ desc.url }}"/>
-      <input class="btn btn-secondary" type="submit" value="Flag False Positive"/>
-    </form>
+<div class="articleentry mt-2 mb-2">
+  <div class="row">
+    <div class="col">
+      <div>
+        <span class="badge">{{ desc.domain }}</span>
+      </div>
+      <div>
+        <a href="{{ desc.url }}">{{ desc.title }}</a>
+      </div>
+    </div>
+    <div class="articlereport col-md-auto">
+      <form action="/action/flag" method="POST">
+        <input type="hidden" name="date" value="{{ date }}"/>
+        <input type="hidden" name="article" value="{{ desc.url }}"/>
+        <input class="btn btn-secondary" type="submit" value="Flag False Positive"/>
+      </form>
+    </div>
   </div>
 </div>
 {% endmacro %}