Enhance styling and structure for list titles and horizontal list items; add section-specific colors and new date display.

innovedus_cms/home/static/css/home.css

@@ -72,3 +72,29 @@
   text-decoration: none;
   font-size: 16px;
 }
+
+.section-b .list-title {
+  color: #00abf5;
+}
+
+.section-b .list-title .category_title {
+  background-color: #00abf5;
+  color: #ffffff;
+}
+
+.section-b .list-title a{
+  color: #00abf5;
+}
+
+.section-o .list-title {
+  color: #f4a41c;
+}
+
+.section-o .list-title .category_title {
+  background-color: #f4a41c;
+  color: #ffffff;
+}
+
+.section-o .list-title a{
+  color: #f4a41c;
+}

innovedus_cms/home/static/css/horizontal_list.css

@@ -73,11 +73,39 @@
   text-decoration: none;
 }
 
+.horizontal-list-thumb {
+  position: relative;
+  width: 194px;
+  height: 133px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.horizontal-list-thumb::after {
+  content: "";
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  height: 25px;
+  pointer-events: none;
+}
+
+.section-b .horizontal-list-thumb::after {
+  background: url("../img/picfrm_b194.png") no-repeat left bottom / cover;
+  background-size: 194px 25px;
+}
+
+.section-o .horizontal-list-thumb::after {
+  background: url("../img/picfrm_o194.png") no-repeat left bottom / cover;
+  background-size: 194px 25px;
+}
+
 .horizontal-list li img {
-  width: 100%;
-  height: 200px;
   display: block;
-  margin: 0 3px;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .horizontal-list li a:hover,
@@ -90,7 +118,6 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  font-size: 20px;
 }
 
 .horizontal-list .article-title {
@@ -101,6 +128,11 @@
   font-size: 16px;
 }
 
+.horizontal-list .article-date {
+  color: #0e1b4266;
+  font-size: 16px;
+}
+
 .horizontal-list .empty {
   flex: 1 0 auto;
   text-align: center;

innovedus_cms/home/templates/home/home_page.html

@@ -23,7 +23,8 @@
 
   <div class="home-page">
     {% for section in sections.category_sections %}
-      {% include "home/includes/category_session.html" with section=section %}
+      {% cycle 'section-b' 'section-o' as section_color silent %}
+      {% include "home/includes/category_session.html" with section=section section_color=section_color %}
     {% endfor %}
   </div>
 {% endblock content %}

innovedus_cms/home/templates/home/includes/category_session.html

@@ -1,7 +1,7 @@
 {% load wagtailimages_tags static %}
 
-<section class="article-section article-section--{{ section.layout }}">
-  <div class="list-title">
+<section class="article-section article-section--{{ section.layout }} {{ section_color }}">
+  <div class="list-title {{ title_variant }}">
     <div class="block-title category_title"><span>{{ section.title }}</span></div>
       <span class="block-title-divider" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="100%" overflow="visible" preserveAspectRatio="none" viewBox="0 0 28 1" width="100%">

innovedus_cms/home/templates/home/includes/horizontal_list.html

@@ -10,14 +10,17 @@
     {% for article in items %}
       <li>
         <a href="{{ article.url }}">
-          {% if article.cover_image %}
-            {% image article.cover_image max-194x133 as cover %}
-            <img src="{{ cover.url }}" alt="{{ article.title }}" height="133" width="194" style="width:194px;height:133px;object-fit:cover;display:block;"/>
-          {% else %}
-            <img src="{% static 'img/default_cover.jpg' %}" alt="{{ article.title }}" height="133" width="194" style="width:194px;height:133px;object-fit:cover;display:block;"/>
-          {% endif %}
-          <span class="article-title">{{ article.title }}</span>
-          <span class="article-intro">{{ article.intro }}</span>
+          <div class="horizontal-list-thumb">
+            {% if article.cover_image %}
+              {% image article.cover_image max-194x133 as cover %}
+              <img src="{{ cover.url }}" alt="{{ article.title }}" height="133" width="194" style="width:194px;height:133px;object-fit:cover;display:block;"/>
+            {% else %}
+              <img src="{% static 'img/default_cover.jpg' %}" alt="{{ article.title }}" height="133" width="194" style="width:194px;height:133px;object-fit:cover;display:block;"/>
+            {% endif %}
+          </div>
+          <div><span class="article-title">{{ article.title }}</span></div>
+          <div><span class="article-intro">{{ article.intro }}</span></div>
+          <div><span class="article-date">{{ article.date|date:"Y.m.d" }}</span></div>
         </a>
       </li>
     {% empty %}