feat: Refactor article and news templates for improved layout and styling

innovedus_cms/home/models.py

@@ -204,9 +204,9 @@ class LatestPage(Page, CategoryMixin, BreadcrumbMixin):
     def get_context(self, request):
         context = super().get_context(request)
         context["category_sections"] = [self.get_latest_articles(request)]
-        breadcrumbs, site_root = self.build_breadcrumbs()
+        # breadcrumbs, site_root = self.build_breadcrumbs()
-        context["breadcrumbs"] = breadcrumbs
+        # context["breadcrumbs"] = breadcrumbs
-        context["breadcrumb_root"] = site_root
+        # context["breadcrumb_root"] = site_root
         return context
 
 
@@ -216,9 +216,9 @@ class TrendingPage(Page, CategoryMixin, BreadcrumbMixin):
     def get_context(self, request):
         context = super().get_context(request)
         context["category_sections"] = [self.get_trending_articles(request)]
-        breadcrumbs, site_root = self.build_breadcrumbs()
+        # breadcrumbs, site_root = self.build_breadcrumbs()
-        context["breadcrumbs"] = breadcrumbs
+        # context["breadcrumbs"] = breadcrumbs
-        context["breadcrumb_root"] = site_root
+        # context["breadcrumb_root"] = site_root
         return context
 
 
@@ -311,8 +311,8 @@ class ArticlePage(Page, BreadcrumbMixin):
         context = super().get_context(request)
 
         breadcrumbs, site_root = self.build_breadcrumbs()
-        context["breadcrumbs"] = breadcrumbs
+        # context["breadcrumbs"] = breadcrumbs
-        context["breadcrumb_root"] = site_root
+        # context["breadcrumb_root"] = site_root
         category_crumbs = [
             crumb
             for crumb in breadcrumbs

innovedus_cms/home/static/css/article_list.css

@@ -1,6 +1,6 @@
-.page-article-list{
+/* .page-article-list{
   padding-bottom: 40px;
-}
+} */
 
 .first-article {
   display: grid;
@@ -42,7 +42,7 @@
 }
 
 .first-article .first-article-title {
-  font-size: 40px;
+  font-size: 36px;
   font-weight: 400;
   color: #f4a41c;
   margin: 0;
@@ -123,7 +123,7 @@
 }
 
 .article-title {
-  font-size: 40px;
+  font-size: 30px;
   font-weight: 400;
   margin: 0;
   display: -webkit-box;
@@ -199,6 +199,10 @@
     grid-template-columns: 318px 1fr;
   } 
 
+  .first-article .first-article-title {
+    font-size: 30px;
+  }
+
   .first-article .first-article-image {
     width: 318px;
   }   
@@ -208,6 +212,14 @@
     height: 290px;
   }
 
+  .first-article .first-article-intro {
+    font-size: 16px;
+  }
+
+  .first-article .first-article-body {
+    font-size: 12px;
+  }
+
   .article-list-item {
     grid-template-columns: 318px 1fr;
   }
@@ -219,6 +231,10 @@
   .article-thumb img{
     width: 318px;
   }
+
+  .article-title {
+    font-size: 26px;
+  }
 }
 
 @media (max-width: 767px) {
@@ -235,9 +251,17 @@
       "image"
       "content";
   }
+
+  .article-title {
+    font-size: 20px;
+  }
 }
 
 @media (min-width: 575px) and (max-width: 767px) {
+   .first-article .first-article-title {
+    font-size: 24px;
+  }
+
  .first-article .first-article-image {
     width: 426px;
   }   
@@ -247,6 +271,14 @@
     height: 260px;
   }
 
+  .first-article .first-article-intro {
+    font-size: 16px;
+  }
+
+  .first-article .first-article-body {
+    font-size: 12px;
+  }
+
   .article-thumb {
     width: 426px;
   }
@@ -258,6 +290,10 @@
 }
 
 @media (max-width: 574px) {
+  .first-article .first-article-title {
+    font-size: 20px;
+  }
+  
   .first-article .first-article-image {
     width: 300px;
   }   
@@ -267,6 +303,18 @@
     height: 218px;
   }
 
+  .first-article .first-article-date {
+    font-size: 11px;
+  }
+
+  .first-article .first-article-intro {
+    font-size: 14px;
+  }
+
+  .first-article .first-article-body {
+    font-size: 11px;
+  }
+
   .article-thumb {
     width: 300px;
   }
@@ -275,4 +323,8 @@
     width: 300px;
     height: 218px;
   }
+
+  .article-date {
+    font-size: 11px;
+  }
 }

innovedus_cms/home/static/css/article_page.css

@@ -58,6 +58,7 @@
 
 .article-content p {
   font-size: 14px;
+  line-height: 1.75;
 }
 
 .article-content .intro {
@@ -319,6 +320,10 @@
     font-size: 20px;
   }
 
+  .article-content h2 {
+    font-size: 24px;
+  }
+
   .back-to-top {
     bottom: 20px;
   }
@@ -337,6 +342,10 @@
     font-size: 24px;
   }
 
+  .article-content h2 {
+    font-size: 20px;
+  }
+
   .article-content .intro {
     font-size: 18px;
   }

innovedus_cms/home/static/css/block_list.css

@@ -9,6 +9,7 @@
     "image content";
   gap: 16px 40px;
   align-items: start;
+  padding-bottom: 20px;
 }
 
 .block-first-article .first-article-image {
@@ -41,9 +42,10 @@
 }
 
 .block-first-article .first-article-title {
-  font-size: 40px;
+  font-size: 36px;
+  line-height: 1.25;
   font-weight: 400;
-  color: #000000;
+  color: #0e1b42;
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 3;
@@ -97,7 +99,15 @@
   }
 
   .block-first-article .first-article-title {
-    font-size: 36px;
+    font-size: 30px;
+  }
+  
+  .block-first-article .first-article-intro {
+    font-size: 16px;
+  }
+
+  .block-first-article .first-article-body {
+    font-size: 12px;
   }
 }
 
@@ -121,9 +131,20 @@
   }
 
   .block-first-article .first-article-title {
-    font-size: 36px;
+    font-size: 24px;
   }
 
+  .block-first-article .first-article-date {
+    font-size: 12px;
+  }
+
+  .block-first-article .first-article-intro {
+    font-size: 16px;
+  }
+  
+  .block-first-article .first-article-body {
+    font-size: 12px;
+  }
 }
 
 @media (max-width: 574px) {
@@ -137,10 +158,18 @@
   }
 
   .block-first-article .first-article-title {
-    font-size: 24px;
+    font-size: 20px;
+  }
+
+  .block-first-article .first-article-date {
+    font-size: 11px;
   }
 
   .block-first-article .first-article-intro {
     font-size: 16px;
   }
+
+  .block-first-article .first-article-body {
+    font-size: 11px;
+  }
 }

innovedus_cms/home/static/css/block_list_lower.css

@@ -42,6 +42,7 @@
 
 .block-list-items .article-title {
   font-size: 20px;
+  line-height: 1.25;
 }
 
 .block-list-items .article-date {
@@ -58,6 +59,7 @@
   align-self: stretch;
   margin-left: auto;
   text-align: center;
+  padding: 24px 0;
 }
 
 .block-list-more-article a {
@@ -119,6 +121,10 @@
     min-width: 0;
   }
 
+  .block-list-items .article-date {
+    font-size: 12px;
+  }
+
   .block-list-more-article {
     max-width: 100%;
   }
@@ -143,7 +149,7 @@
   }
 
   .block-list-items .article-date {
-    font-size: 12px;
+    font-size: 11px;
   }
 
   .block-list-more-article span {

innovedus_cms/home/static/css/home.css

@@ -11,6 +11,7 @@
 .list-title {
   align-items: center;
   margin: 10px 0;
+  padding: 40px 0;
 }
 
 .block-title-divider {

innovedus_cms/home/static/css/horizontal_list.css

@@ -90,7 +90,7 @@
   pointer-events: none;
 }
 
-.section-b .horizontal-list-thumb::after {
+/* .section-b .horizontal-list-thumb::after {
   background: url("../img/picfrm_b194.png") no-repeat left bottom / cover;
   background-size: 194px 25px;
 }
@@ -98,7 +98,7 @@
 .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 {
   display: block;
@@ -124,6 +124,7 @@
 }
 
 .horizontal-list .article-intro {
+  min-height: 45px;
 }
 
 .horizontal-list .article-date {

innovedus_cms/home/static/css/news_list.css

@@ -3,14 +3,16 @@
   grid-template-columns: 480px 1fr;
   grid-template-areas:
     "header header"
+    "head head"
     "image content";
+  padding: 40px 0;
   gap: 16px 40px;
   align-items: start;
 }
 
 .news-hero .news-hero-header {
   grid-area: header;
-  display: flex;
+  /* display: flex; */
   align-items: center;
   gap: 12px;
 }
@@ -24,13 +26,13 @@
 
 .news-hero .fist-news-title {
   grid-area: head;
-  max-width: 580px;
+  /* max-width: 580px; */
-  font-size: 40px;
+  font-size: 36px;
   font-weight: 400;
   color: #eb9f13;
   margin: 0;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -43,7 +45,7 @@
   width: 480px;
 }
 
-.news-hero .first-news-image::after {
+/* .news-hero .first-news-image::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -53,7 +55,7 @@
   background: url("../img/picfrm_b480.png") no-repeat left bottom / cover;
   background-size: 480px 25px;
   pointer-events: none;
-}
+} */
 
 .news-hero .first-news-image img {
   display: block;
@@ -64,14 +66,17 @@
 }
 
 .news-hero .first-news-content {
+  grid-area: content;
+  height: 293px;
   max-height: 293px;  
+  overflow: hidden;
 }
 
 .news-hero .first-news-content a {
-  grid-area: content;
   display: flex;
   flex-direction: column;
   gap: 16px;
+  height: 100%;
 }
 
 .news-hero .fist-news-date,
@@ -94,6 +99,7 @@
 .news-hero .first-news-body {
   font-size: 13px;
   flex: 1 1 auto;
+  min-height: 0;
   overflow: hidden;
   position: relative;
 }
@@ -136,7 +142,7 @@
   overflow: hidden;
 }
 
-.news-list-thumb::after {
+/* .news-list-thumb::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -146,7 +152,7 @@
   background: url("../img/picfrm_o194.png") no-repeat left bottom / cover;
   background-size: 194px 25px;
   pointer-events: none;
-}
+} */
 
 .news-list-thumb img {
   display: block;
@@ -166,6 +172,10 @@
   font-size: 20px;
 }
 
+.news-list-items .article-intro {
+  min-height: 45px;
+}
+
 .news-list-items .article-date {
   color: rgba(255, 255, 255, 0.4);
 }
@@ -191,17 +201,17 @@
     grid-template-columns: 318px 1fr;
   }
 
-  .news-hero .fist-news-title {
+  /* .news-hero .fist-news-title {
     max-width: 320px;
-  }
+  } */
 
   .news-hero .first-news-image {
     width: 318px;
   }
 
-  .news-hero .first-news-image::after {
+  /* .news-hero .first-news-image::after {
     background-size: 318px 25px;
-  }
+  } */
 
   .news-hero .first-news-image img {
     width: 318px;
@@ -219,7 +229,7 @@
 
 @media (min-width: 575px) and (max-width: 1023px) {
   .news-hero .fist-news-title {
-    font-size: 36px;
+    font-size: 32px;
   }
 
   .more-news {
@@ -302,6 +312,11 @@
     height:260px;
   }
 
+  .news-hero .first-news-content {
+    height: 260px;
+    max-height: 260px;
+  }
+
   .news-list-items a > div:nth-of-type(1) {
     grid-row: 1 / span 3;
   }
@@ -364,6 +379,21 @@
     height: 220px;
   }
 
+  .news-hero .first-news-content {
+    height: 220px;
+    max-height: 220px;
+  }
+
+  .news-hero .first-news-body::after {
+    height: 90px;
+    background: linear-gradient(
+      to bottom,
+      rgba(14, 27, 66, 0) 0%,
+      rgba(14, 27, 66, 0.42) 62%,
+      #0e1b42 92%
+    );
+  }
+
 
   .news-hero .fist-news-title {
     font-size: 24px;
@@ -386,10 +416,10 @@
     height: 110px;
   }
 
-  .news-list-thumb::after {
+  /* .news-list-thumb::after {
     background: url("../img/picfrm_o139.png") no-repeat left bottom / cover;
     background-size: 139px 25px;
-  }
+  } */
 
   .news-list-items a > div:nth-of-type(3) {
     display: none;

innovedus_cms/home/templates/home/hashtag_page.html

@@ -1,19 +1,14 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags static %}
-{% block content %}
+{% block extra_css %}
-  <nav class="breadcrumbs" aria-label="breadcrumb">
+  <link rel="stylesheet" type="text/css" href="{% static 'css/category.css' %}">
-    <ol>
+{% endblock %}
-      <li>
+{% block content %}
-        {% if site_root %}
+  <div class="site-hero-band full-bleed">
-          <a href="{{ site_root.url }}">首頁</a>
+    <div class="site-container">
-        {% else %}
+      <div class="block-title category-title"><span>#{{ tag.name }}</span></div>
-          <a href="/">首頁</a>
+    </div>
-        {% endif %}
+  </div>
-      </li>
+
-      <li><span>標籤</span></li>
+  {% include "home/includes/page-article-list.html" with category=category_sections.0 show_hero=False empty_message="沒有符合條件的文章" %}
-      <li><span>#{{ tag.name }}</span></li>
-    </ol>
-  </nav>
-
-  {% include "home/includes/page-article-list.html" with category=category_sections.0 %}
 {% endblock %}

innovedus_cms/home/templates/home/home_page.html

@@ -9,9 +9,10 @@
 {% endblock %}
 {% block content %}
   <div class="site-hero-band full-bleed">
+    {% include "base/includes/home_banner.html" %}
+
     <div class="site-container">
       <div class="home-hero">
-        {% include "base/includes/home_banner.html" %}
         {% with top_section=sections.top_section %}
           {% for section in top_section %}
             {% include "home/includes/news_list.html" with section=section %}

innovedus_cms/home/templates/home/includes/article_list.html

@@ -1,6 +1,7 @@
 {% load wagtailimages_tags static home_tags %}
 
-<div class="site-hero-band full-bleed">
+{% if show_hero != False %}
+  <div class="site-hero-band full-bleed">
     <div class="site-container">
       {% with first_article=items|first %}
         {% if first_article %}
@@ -36,13 +37,16 @@
             </div>
           </div>
         {% else %}
-        <span class="empty">目前沒有文章</span>
+          <span class="empty">{{ empty_message|default:"目前沒有文章" }}</span>
         {% endif %}
       {% endwith %}
     </div>
-</div>
+  </div>
-<div class="article-list-lower">
+{% endif %}
-  {% if items|length >= 2 %}
+
+{% if show_hero != False %}
+  {% if items|length > 2 %}
+    <div class="article-list-lower">
       {% for article in items|slice:"1:" %}
         <a href="{{ article.url }}">
           <div class="article-list-item">
@@ -62,5 +66,32 @@
           </div>
         </a>
       {% endfor %}
+    </div>
   {% endif %}
-</div>
+{% else %}
+  {% if items|length %}
+  <div class="article-list-lower">
+    {% for article in items %}
+      <a href="{{ article.url }}">
+        <div class="article-list-item">
+          <div class="article-thumb">
+            {% if article.cover_image %}
+              {% image article.cover_image max-410x218 as cover %}
+              <img src="{{ cover.url }}" alt="{{ article.title }}"/>
+            {% else %}
+              {% random_default_cover as default_cover %}
+              <img src="{{ default_cover }}" alt="{{ article.title }}"/>
+            {% endif %}
+          </div>
+          <div class="article-content">
+            <div><span class="article-title">{{ article.title }}</span></div>
+            <div><span class="article-date">{{ article.date|date:"Y.m.d" }}</span></div>
+          </div>
+        </div>
+      </a>
+    {% endfor %}
+  </div>
+  {% else %}
+    <span class="empty">{{ empty_message|default:"沒有符合條件的文章" }}</span>
+  {% endif %}
+{% endif %}

innovedus_cms/home/templates/home/includes/news_list.html

@@ -12,6 +12,7 @@
           </span>
           <a href="{{ section.url }}"><span class="more-link">查看全部</span></a>
         </div>
+      </div>
       {% with first_article=section.items|first %}
         {% if first_article %}
           <div class="fist-news-title">
@@ -19,11 +20,6 @@
               <span>{{ first_article.title }}</span>
             </a>
           </div>
-          {% endif %}
-        {% endwith %}
-      </div>
-      {% with first_article=section.items|first %}
-        {% if first_article %}
           <div class="first-news-image">
             <a href="{{ first_article.url }}">
               {% if first_article.cover_image %}

innovedus_cms/home/templates/home/includes/page-article-list.html

@@ -4,7 +4,7 @@
 {% endblock %}
 
 <div class="page-article-list">
-  {% include "home/includes/article_list.html" with items=category.items %}
+  {% include "home/includes/article_list.html" with items=category.items show_hero=show_hero empty_message=empty_message %}
 
   {% if category.items.paginator.num_pages > 1 %}
     <div class="pagination">
@@ -17,6 +17,13 @@
           </button>
           <span>BACK</span>
         </a>
+      {% else %}
+          <button class="left-arrow" type="button" data-dir="left" aria-label="更多文章">
+            <svg class="left-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
+              <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/>
+            </svg>
+          </button>
+          <span>BACK</span>
       {% endif %}
       <div class="pagination-pages">
         {% for page_num in category.page_range %}

innovedus_cms/home/views.py

@@ -4,7 +4,7 @@ from django.shortcuts import get_object_or_404, render
 from taggit.models import Tag
 from wagtail.models import Site
 
-from .models import ArticlePage, PAGE_SIZE
+from .models import ArticlePage, CATEGORY_HOT_SIZE, PAGE_SIZE
 
 
 def hashtag_search(request, slug):
@@ -12,7 +12,7 @@ def hashtag_search(request, slug):
     articles = (
         ArticlePage.objects.live()
         .filter(tags__slug=slug)
-        .order_by("-date")
+        .order_by("-date", "-id")
     )
 
     paginator = Paginator(articles, PAGE_SIZE)
@@ -38,6 +38,11 @@ def hashtag_search(request, slug):
                 "page_range": paginator.get_elided_page_range(page_obj.number),
             }
         ],        
+        "category_trending": (
+            ArticlePage.objects.live()
+            .filter(tags__slug=slug, trending=True)
+            .order_by("-date", "-id")[:CATEGORY_HOT_SIZE]
+        ),
         "site_root": site_root,
         "page": site_root.specific if site_root else None,
     }

innovedus_cms/mysite/static/css/contact_form.css

@@ -13,7 +13,6 @@
 .contact-form-modal__backdrop {
   position: absolute;
   inset: 0;
-  background: #0e1b42cc;
 }
 
 .contact-form-modal__dialog {
@@ -26,6 +25,7 @@
   background: #0e1b42e6;
   color: #ffffff;
   overflow-y: auto;
+  backdrop-filter: blur(12px);
 }
 
 .contact-form-modal__close {

innovedus_cms/mysite/static/css/subscribe_fab.css

@@ -47,24 +47,25 @@
   height: 59px;
   padding: 0 10px 0 0;
   border-radius: 36px;
-  background: #323232;
+  background: #ffffff1a;
   border: 1px solid #ffffff80;
   transform: translateX(calc(100% - var(--fab-toggle-width)));
   transition: transform 0.25s ease, background-color 0.2s ease;
+  backdrop-filter: blur(12px);
 }
 
 .subscribe-fab:hover .subscribe-fab__panel {
-  background: #767676;
+  background: #ffffff66;
 }
 
 .subscribe-fab.is-open .subscribe-fab__panel {
-  background: #767676;
+  background: #ffffff66;
   transform: translateX(44px);
 }
 
 .subscribe-fab:hover .subscribe-fab__toggle,
 .subscribe-fab.is-open .subscribe-fab__toggle {
-  color: #0e1b42;;
+  color: #0e1b42;
 }
 
 .subscribe-fab__form {

innovedus_cms/search/templates/search/search.html

@@ -1,33 +1,29 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags static %}
 
 {% block body_class %}template-searchresults{% endblock %}
 
+{% block extra_css %}
+  <link rel="stylesheet" type="text/css" href="{% static 'css/category.css' %}">
+{% endblock %}
+
 {% block title %}
   {% if search_query %}搜尋：{{ search_query }}{% else %}搜尋{% endif %}
 {% endblock %}
 
 {% block content %}
-  <nav class="breadcrumbs" aria-label="breadcrumb">
-    <ol>
-      <li>
-        {% if site_root %}
-          <a href="{{ site_root.url }}">首頁</a>
-        {% else %}
-          <a href="/">首頁</a>
-        {% endif %}
-      </li>
-      <li><span>搜尋</span></li>
   {% if search_query %}
-        <li><span>{{ search_query }}</span></li>
+    <div class="site-hero-band full-bleed">
+      <div class="site-container">
+        <div class="block-title category-title"><span>{{ search_query }}</span></div>
+      </div>
+    </div>
   {% endif %}
-    </ol>
-  </nav>
 
   <section class="search-results">
     {% if search_query %}
       {% if results_count %}
-        {% include "home/includes/page-article-list.html" %}
+        {% include "home/includes/page-article-list.html" with category=category_sections.0 show_hero=False empty_message="沒有符合條件的文章" %}
       {% else %}
         <p>找不到與「{{ search_query }}」相關的文章。</p>
       {% endif %}