🔨 refactor the structure of the news list

The original ordered list does not scale well width wise so I’ve refactored this to adjust nicely when resizing the window.

static/css/styles.css

@@ -1283,6 +1283,14 @@ input[type=file] {
   margin-left: 1rem;
 }
 
+.-ml-5 {
+  margin-left: -1.25rem;
+}
+
+.-ml-4 {
+  margin-left: -1rem;
+}
+
 .block {
   display: block;
 }
@@ -1467,6 +1475,42 @@ input[type=file] {
   width: 200px;
 }
 
+.w-2\/5 {
+  width: 40%;
+}
+
+.w-2\/6 {
+  width: 33.333333%;
+}
+
+.w-3\/6 {
+  width: 50%;
+}
+
+.w-\[50px\] {
+  width: 50px;
+}
+
+.w-\[150px\] {
+  width: 150px;
+}
+
+.w-\[160px\] {
+  width: 160px;
+}
+
+.w-\[180px\] {
+  width: 180px;
+}
+
+.w-\[70px\] {
+  width: 70px;
+}
+
+.w-\[170px\] {
+  width: 170px;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1567,6 +1611,10 @@ input[type=file] {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .grid-rows-1 {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
@@ -1840,6 +1888,10 @@ input[type=file] {
   border-bottom-width: 4px;
 }
 
+.border-l-2 {
+  border-left-width: 2px;
+}
+
 .border-gray-700 {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -2757,28 +2809,6 @@ input[type=file] {
   background-color: rgb(49 74 87 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-yellow-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-yellow-300\/70 {
-  background-color: rgb(253 224 71 / 0.7);
-}
-
-.dark .dark\:bg-yellow-300\/50 {
-  background-color: rgb(253 224 71 / 0.5);
-}
-
-.dark .dark\:bg-yellow-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-yellow-200\/80 {
-  background-color: rgb(254 240 138 / 0.8);
-}
-
 .dark .dark\:font-medium {
   font-weight: 500;
 }
@@ -2834,6 +2864,11 @@ input[type=file] {
   --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
 }
 
+.dark .dark\:hover\:bg-orange:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 159 0 / var(--tw-bg-opacity));
+}
+
 .dark .hover\:dark\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

templates/news/list.html

@@ -18,47 +18,107 @@
           <div class="inline-block py-5">
             {% url 'news' as target_url %}
             <a href="{{ target_url }}" title="All News">
-              <i class="py-1 px-2 bg-white rounded border border-gray-300 fas fa-rocket dark:bg-slate hover:bg-orange"></i>
+              <i class="py-1 px-2 bg-white rounded border border-gray-300 fas fa-rocket dark:bg-slate dark:hover:bg-orange hover:bg-orange"></i>
             </a>
           </div>
           <div class="inline-block py-5">
             {% url 'news-news-list' as target_url %}
             <a href="{{ target_url }}" title="News">
-              <i class="py-1 px-2 rounded border border-gray-300 fas fa-bullhorn hover:bg-orange {% if request.path == target_url %}bg-gray-600 text-white{% else %}bg-white dark:bg-slate{% endif %}"></i>
+              <i class="py-1 px-2 rounded border border-gray-300 fas fa-bullhorn hover:bg-orange dark:hover:bg-orange {% if request.path == target_url %}bg-gray-600 text-white{% else %}bg-white dark:bg-slate{% endif %}"></i>
             </a>
           </div>
           <div class="inline-block py-5">
             {% url 'news-blogpost-list' as target_url %}
             <a href="{{ target_url }}" title="Blog Post">
-              <i class="py-1 px-2 rounded border border-gray-300 fas fa-newspaper hover:bg-orange {% if request.path == target_url %}bg-gray-600 text-white{% else %}bg-white dark:bg-slate{% endif %}"></i>
+              <i class="py-1 px-2 rounded border border-gray-300 fas fa-newspaper hover:bg-orange dark:hover:bg-orange {% if request.path == target_url %}bg-gray-600 text-white{% else %}bg-white dark:bg-slate{% endif %}"></i>
             </a>
           </div>
           <div class="inline-block py-5">
             {% url 'news-link-list' as target_url %}
             <a href="{{ target_url }}" title="Link">
-              <i class="py-1 px-2 rounded border border-gray-300 fas fa-link hover:bg-orange {% if request.path == target_url %}bg-gray-600 text-white{% else %}bg-white dark:bg-slate{% endif %}"></i>
+              <i class="py-1 px-2 rounded border border-gray-300 fas fa-link hover:bg-orange dark:hover:bg-orange {% if request.path == target_url %}bg-gray-600 text-white{% else %}bg-white dark:bg-slate{% endif %}"></i>
             </a>
           </div>
           <div class="inline-block py-5">
             {% url 'news-poll-list' as target_url %}
             <a href="{{ target_url }}" title="Poll">
-              <i class="py-1 px-2 rounded border border-gray-300 fas fa-poll hover:bg-orange {% if request.path == target_url %}bg-gray-600 text-white{% else %}bg-white dark:bg-slate{% endif %}"></i>
+              <i class="py-1 px-2 rounded border border-gray-300 fas fa-poll hover:bg-orange dark:hover:bg-orange {% if request.path == target_url %}bg-gray-600 text-white{% else %}bg-white dark:bg-slate{% endif %}"></i>
             </a>
           </div>
           <div class="inline-block py-5">
             {% url 'news-video-list' as target_url %}
             <a href="{{ target_url }}" title="Video">
-              <i class="py-1 px-2 rounded border border-gray-300 fas fa-video hover:bg-orange {% if request.path == target_url %}bg-gray-600 text-white{% else %}bg-white dark:bg-slate{% endif %}"></i>
+              <i class="py-1 px-2 rounded border border-gray-300 fas fa-video hover:bg-orange dark:hover:bg-orange {% if request.path == target_url %}bg-gray-600 text-white{% else %}bg-white dark:bg-slate{% endif %}"></i>
             </a>
           </div>
           {% if user.is_authenticated %}
           <div class="inline-block py-5 text-sm">
-            <a href="{% url 'news-create' %}" class="py-0 px-2 font-semibold bg-gray-300 rounded border dark:text-white border-slate dark:bg-slate hover:bg-orange">Submit News</a>
+            <a href="{% url 'news-create' %}" class="py-0 px-2 font-semibold bg-white rounded border border-gray-300 dark:text-white dark:bg-slate dark:hover:bg-orange hover:bg-orange">Submit News</a>
           </div>
           {% endif %}
         </div>
       </div>
 
+    <div class="my-5">
+      <div class="mx-auto w-full">
+        {% for entry in entry_list %}
+        <div class="flex space-x-3">
+          <div class="mt-6 text-sm text-left w-[160px]">
+            <a href="{{ entry.get_absolute_url }}">{{ entry.display_publish_at }}</a>
+          </div>
+          <div class="pt-6 border-l-2 border-white w-[50px]">
+            {% if entry.tag == "link" %}
+              {% url 'news-link-list' as target_url %}
+              <a href="{{ target_url }}" title="Link" class="px-2 -ml-4 bg-white rounded-full w-[30px] h-[30px]">
+                <i class="text-gray-400 fas fa-link dark:text-white/60"></i>
+              </a>
+            {% elif entry.tag == "news" %}
+              {% url 'news-news-list' as target_url %}
+              <a href="{{ target_url }}" title="News" class="px-2 -ml-4 bg-white rounded-full w-[30px] h-[30px]">
+                <i class="text-gray-400 fas fa-bullhorn dark:text-white/60"></i>
+              </a>
+            {% elif entry.tag == "blogpost" %}
+              {% url 'news-blogpost-list' as target_url %}
+              <a href="{{ target_url }}" title="Blog Post" class="px-2 -ml-4 bg-white rounded-full w-[30px] h-[30px]">
+                <i class="text-gray-400 fas fa-newspaper dark:text-white/60"></i>
+              </a>
+            {% elif entry.tag == "poll" %}
+              {% url 'news-poll-list' as target_url %}
+              <a href="{{ target_url }}" title="Poll" class="px-2 -ml-4 bg-white rounded-full w-[30px] h-[30px]">
+                <i class="text-gray-400 fas fa-poll dark:text-white/60"></i>
+              </a>
+            {% elif entry.tag == "video" %}
+              {% url 'news-video-list' as target_url %}
+              <a href="{{ target_url }}" title="Video" class="px-2 -ml-4 bg-white rounded-full w-[30px] h-[30px]">
+                <i class="text-gray-400 fas fa-video dark:text-white/60"></i>
+              </a>
+            {% else %}
+              <i class="text-gray-400 fas fa-calendar-alt dark:text-white/60" class="px-2 -ml-4 bg-white rounded-full w-[30px] h-[30px]"></i>
+            {% endif %}
+          </div>
+          <div class="pt-2 mt-4 text-xs text-left w-[70px]">
+            {% if entry.author.image %}
+              <img src="{{ entry.author.image.url }}" alt="{{ entry.author.get_full_name }}" class="inline rounded-sm w-[30px]" />
+            {% else %}
+              <span class="inline px-2 pt-3 pb-1 bg-white rounded-sm dark:text-white dark:bg-slate">
+                <i class="text-2xl fas fa-user" title="{{ entry.author.get_full_name }}"></i>
+              </span>
+            {% endif %}
+          </div>
+          <div class="block p-6 mb-10 w-full bg-white rounded-lg md:ml-6 dark:bg-charcoal">
+            <div class="flex justify-between">
+              <a class="text-lg font-semibold transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700" {% if entry.tag == "link" %}target="_blank"{% endif %} href="{% if entry.tag == "link" %}{{ entry.external_url }}{% else %}{{ entry.get_absolute_url }}{% endif %}">
+                {{ entry.title }}
+              </a>
+            </div>
+            <p class="text-gray-500 dark:text-white/70">{{ entry.content|truncatechars:300 }}</p>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+
+    {% comment %}
     <div class="mt-5">
       {% if entry_list %}
       <ol class="md:border-l-2 border-white dark:border-slate space-y-3 md:w-[90%] mx-auto md:ml-[200px]">
@@ -100,10 +160,10 @@
             </div>
             <div class="hidden pt-2 mt-4 text-xs text-center md:block md:w-[150px]">
               {% if entry.author.image %}
-                <img src="{{ entry.author.image.url }}" alt="user" class="inline rounded-sm w-[30px]" />
+                <img src="{{ entry.author.image.url }}" alt="{{ entry.author.get_full_name }}" class="inline rounded-sm w-[30px]" />
               {% else %}
                 <span class="inline px-2 pt-3 pb-1 bg-white rounded-sm dark:text-white dark:bg-slate">
-                  <i class="text-2xl fas fa-user"></i>
+                  <i class="text-2xl fas fa-user" title="{{ entry.author.get_full_name }}"></i>
                 </span>
               {% endif %}
             </div>
@@ -123,5 +183,6 @@
       <h4 class="text-center">No news items were found.</h4>
       {% endif %}
     </div>
+    {% endcomment %}
   </div>
 {% endblock %}