make alias activity responsive

app/dashboard/templates/dashboard/alias_log.html

@@ -13,45 +13,33 @@
     </h3>
   </div>
 
-  <div class="row row-cards row-deck mt-4">
-    <div class="col-12">
-      <div class="card">
-        <div class="table-responsive">
-          <table class="table table-hover table-outline table-vcenter text-nowrap card-table">
-            <thead>
-            <tr>
-              <th>Activity</th>
-              <th>Correspondent Email</th>
-              <th></th>
-              <th>Alias</th>
-            </tr>
-            </thead>
-
-            <tbody>
-            {% for log in logs %}
-              <tr>
-                <td>{{ log.when | dt }}</td>
-                <td>{{ log.website_email }}</td>
-                <td style="min-width: 55px">
-                  {% if log.is_reply %}
-                    <img src="{{ url_for('static', filename='arrows/reply-arrow.svg') }}" class="arrow">
-                  {% elif log.blocked %}
-                    <img src="{{ url_for('static', filename='arrows/blocked-arrow.svg') }}" class="arrow">
-                  {% else %}
-                    <img src="{{ url_for('static', filename='arrows/forward-arrow.svg') }}" class="arrow">
-                  {% endif %}
-                </td>
-                <td>{{ log.alias }}</td>
-              </tr>
-            {% endfor %}
-            </tbody>
-          </table>
+  <div class="row">
+    {% for log in logs %}
+      <div class="col-12">
+        <div class="my-2 p-2 card">
+          <div class="font-weight-bold">{{ log.when | dt }}</div>
+          <div>
+            <span class="mr-2">{{ log.website_email }}</span>
+
+            <span>
+              {% if log.is_reply %}
+                <img src="{{ url_for('static', filename='arrows/reply-arrow.svg') }}" class="arrow">
+              {% elif log.blocked %}
+                <img src="{{ url_for('static', filename='arrows/blocked-arrow.svg') }}" class="arrow">
+              {% else %}
+                <img src="{{ url_for('static', filename='arrows/forward-arrow.svg') }}" class="arrow">
+              {% endif %}
+            </span>
+
+            <span class="ml-2">
+              {{ log.alias }}
+            </span>
+          </div>
         </div>
       </div>
-    </div>
+    {% endfor %}
   </div>
-
-
+  
 {% endblock %}
 
 {% block script %}

static/arrows/blocked-arrow.svg

@@ -1,4 +1,4 @@
-<svg width="238" height="123" viewBox="0 0 238 123" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M236.475 64.4749C237.842 63.108 237.842 60.892 236.475 59.5251L214.201 37.2513C212.834 35.8844 210.618 35.8844 209.251 37.2513C207.884 38.6181 207.884 40.8342 209.251 42.201L229.05 62L209.251 81.799C207.884 83.1658 207.884 85.3819 209.251 86.7487C210.618 88.1156 212.834 88.1156 214.201 86.7487L236.475 64.4749ZM0 65.5H234V58.5H0L0 65.5Z" fill="#5675E2"/>
-<path d="M128.5 25.7C129.633 25.3667 131.2 25.2 133.2 25.2C135.267 25.2 137.033 25.5333 138.5 26.2L138.8 26.9L119.6 57.9L140.9 92.4C138.633 93.9333 136.2 94.7 133.6 94.7C131.067 94.7 128.9 93.2667 127.1 90.4L112.6 67L96.3 94C95.1667 94.3333 93.5333 94.5 91.4 94.5C89.3333 94.5 87.5667 94.1667 86.1 93.5L85.8 92.8L107.2 58.3L88.2 27.3C90.4667 25.7667 92.8667 25 95.4 25C98 25 100.167 26.4 101.9 29.2L114.2 49.2L128.5 25.7Z" fill="#EC1515"/>
+<svg width="244" height="172" viewBox="0 0 244 172" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M241.071 88.0711C244.976 84.1658 244.976 77.8342 241.071 73.9289L177.431 10.2893C173.526 6.38408 167.195 6.38408 163.289 10.2893C159.384 14.1946 159.384 20.5262 163.289 24.4315L219.858 81L163.289 137.569C159.384 141.474 159.384 147.805 163.289 151.711C167.195 155.616 173.526 155.616 177.431 151.711L241.071 88.0711ZM0 91H234V71H0L0 91Z" fill="#5675E2"/>
+<path d="M140.3 35.38C141.887 34.9133 144.08 34.68 146.88 34.68C149.773 34.68 152.247 35.1467 154.3 36.08L154.72 37.06L127.84 80.46L157.66 128.76C154.487 130.907 151.08 131.98 147.44 131.98C143.893 131.98 140.86 129.973 138.34 125.96L118.04 93.2L95.22 131C93.6333 131.467 91.3467 131.7 88.36 131.7C85.4667 131.7 82.9933 131.233 80.94 130.3L80.52 129.32L110.48 81.02L83.88 37.62C87.0533 35.4733 90.4133 34.4 93.96 34.4C97.6 34.4 100.633 36.36 103.06 40.28L120.28 68.28L140.3 35.38Z" fill="#EC1515"/>
 </svg>

static/arrows/forward-arrow.svg

@@ -1,3 +1,3 @@
-<svg width="211" height="54" viewBox="0 0 211 54" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M209.499 28.4507C210.852 27.0707 210.831 24.8547 209.451 23.5012L186.962 1.44464C185.582 0.0911427 183.366 0.112657 182.012 1.4927C180.659 2.87274 180.68 5.08871 182.06 6.44221L202.05 26.0481L182.445 46.0383C181.091 47.4184 181.113 49.6343 182.493 50.9878C183.873 52.3413 186.089 52.3198 187.442 50.9398L209.499 28.4507ZM1.03398 31.4998L207.034 29.4998L206.966 22.5002L0.966021 24.5002L1.03398 31.4998Z" fill="#5675E2"/>
+<svg width="218" height="150" viewBox="0 0 218 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M214.139 81.0021C218.007 77.0591 217.945 70.7278 214.002 66.8606L149.748 3.84184C145.805 -0.0253067 139.473 0.0361628 135.606 3.97913C131.739 7.92211 131.8 14.2535 135.743 18.1206L192.859 74.1373L136.842 131.252C132.975 135.195 133.036 141.527 136.979 145.394C140.922 149.261 147.253 149.199 151.121 145.257L214.139 81.0021ZM1.09708 85.9995L207.097 83.9995L206.903 64.0005L0.902917 66.0005L1.09708 85.9995Z" fill="#5675E2"/>
 </svg>

static/arrows/reply-arrow.svg

@@ -1,3 +1,3 @@
-<svg width="212" height="52" viewBox="0 0 212 52" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.52513 23.5251C0.158291 24.8919 0.158291 27.108 1.52513 28.4749L23.799 50.7487C25.1658 52.1156 27.3819 52.1156 28.7487 50.7487C30.1156 49.3819 30.1156 47.1658 28.7487 45.799L8.94975 26L28.7487 6.20099C30.1156 4.83416 30.1156 2.61808 28.7487 1.25125C27.3819 -0.115589 25.1658 -0.115589 23.799 1.25125L1.52513 23.5251ZM212 22.5L4 22.5L4 29.5L212 29.5L212 22.5Z" fill="#5675E2"/>
+<svg width="218" height="148" viewBox="0 0 218 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.92893 66.9289C-0.97631 70.8342 -0.976311 77.1658 2.92893 81.071L66.5685 144.711C70.4738 148.616 76.8054 148.616 80.7107 144.711C84.6159 140.805 84.6159 134.474 80.7107 130.569L24.1421 74L80.7107 17.4314C84.6159 13.5262 84.6159 7.19455 80.7107 3.28931C76.8054 -0.615933 70.4738 -0.615934 66.5685 3.28931L2.92893 66.9289ZM218 64L10 64L10 84L218 84L218 64Z" fill="#5675E2"/>
 </svg>

static/style.css

@@ -49,7 +49,7 @@
 }
 
 .arrow {
-    width: 50px;
+    width: 20px;
 }
 
 em {