From 4e642872b98c02af83a98de4fdcb94a52a9ba930 Mon Sep 17 00:00:00 2001 From: Warren Chen Date: Wed, 21 Jan 2026 16:34:57 +0900 Subject: [PATCH] - Complete CSS for category page --- innovedus_cms/home/models.py | 14 +- innovedus_cms/home/static/css/block_list.css | 323 ++++++++++-- innovedus_cms/home/static/css/category.css | 70 +++ innovedus_cms/home/static/css/home.css | 44 +- .../home/static/css/horizontal_list.css | 6 +- innovedus_cms/home/static/css/news_list.css | 78 ++- .../home/templates/home/category_page.html | 10 +- .../home/templates/home/home_page.html | 2 +- .../templates/home/includes/block_list.html | 85 +++- .../home/includes/category_session.html | 2 +- .../templates/home/includes/news_list.html | 2 +- innovedus_cms/mysite/settings/base.py | 6 +- innovedus_cms/mysite/static/css/mysite.css | 469 ++++++++++-------- 13 files changed, 732 insertions(+), 379 deletions(-) create mode 100644 innovedus_cms/home/static/css/category.css diff --git a/innovedus_cms/home/models.py b/innovedus_cms/home/models.py index 606ea2a..ca613de 100644 --- a/innovedus_cms/home/models.py +++ b/innovedus_cms/home/models.py @@ -19,8 +19,8 @@ def _get_env_int(name, default): return default NEWS_SIZE = _get_env_int("HOMEPAGE_NEWS_SIZE", 8) # Default to 8 articles in news layouts -BLOCK_SIZE = _get_env_int("HOMEPAGE_BLOCK_SIZE", 5) # Default to 5 articles in block layout -HORIZON_SIZE = _get_env_int("HOMEPAGE_HORIZON_SIZE", 4) # Default to 8 articles in horizon layout +BLOCK_SIZE = _get_env_int("HOMEPAGE_BLOCK_SIZE", 7) # Default to 7 articles in block layout +HORIZON_SIZE = _get_env_int("HOMEPAGE_HORIZON_SIZE", 4) # Default to 4 articles in horizon layout PAGE_SIZE = _get_env_int("HOMEPAGE_PAGE_SIZE", 10) # Default to 10 articles per page for pagination # Mixin for Category-related functionality @@ -37,9 +37,9 @@ class CategoryMixin: "title": category.title, "items": ArticlePage.objects.child_of(category) .live() - .order_by("-date", "-id")[:HORIZON_SIZE], + .order_by("-date", "-id")[:BLOCK_SIZE], "url": category.url, - "layout": "horizon", + "layout": "block", } ) else: @@ -224,9 +224,9 @@ class CategoryPage(Page, CategoryMixin): def get_context(self, request): context = super().get_context(request) context["category_sections"] = self.build_category_blocks(request) - breadcrumbs, site_root = self.build_breadcrumbs() - context["breadcrumbs"] = breadcrumbs - context["breadcrumb_root"] = site_root + # breadcrumbs, site_root = self.build_breadcrumbs() + # context["breadcrumbs"] = breadcrumbs + # context["breadcrumb_root"] = site_root return context diff --git a/innovedus_cms/home/static/css/block_list.css b/innovedus_cms/home/static/css/block_list.css index a29d2e2..c1f2a64 100644 --- a/innovedus_cms/home/static/css/block_list.css +++ b/innovedus_cms/home/static/css/block_list.css @@ -2,78 +2,299 @@ position: relative; } -.block-list-arrow { +.block-first-article { + display: grid; + grid-template-columns: 480px 1fr; + grid-template-areas: + "image content"; + gap: 16px 40px; + align-items: start; +} + +.block-first-article .first-article-image { + grid-area: image; + position: relative; + border-radius: 10px; + overflow: hidden; + width: 480px; +} + +.block-first-article .first-article-image img{ + display: block; + width:480px; + height:293px; + object-fit:cover; + border-radius: 10px; +} + +.block-first-article .first-article-content { + grid-area: content; + display: flex; + flex-direction: column; + gap: 16px; + max-height: 293px; + overflow: hidden; + position: relative; +} + +.block-first-article .first-article-title { + font-size: 40px; + font-weight: 400; + color: #000000; + margin: 0; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + flex: 0 0 auto; +} + +.block-first-article .first-article-date { + color: #0e1b4266; + flex: 0 0 auto; +} + +.block-first-article .first-article-intro { + font-size: 20px; + flex: 0 1 auto; + min-height: 0; + overflow: hidden; +} + +.block-first-article .first-article-body { + flex: 1 2 auto; + min-height: 0; + overflow: hidden; + position: relative; +} + +.block-first-article .first-article-content::after { + content: ""; position: absolute; - top: 50%; - transform: translateY(-50%); - width: 36px; - height: 36px; - border: 0; - border-radius: 8px; - background: rgba(255, 255, 255, 0.85); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18); - cursor: pointer; -} - -.block-list-arrow[data-dir="left"] { left: 0; -} - -.block-list-arrow[data-dir="right"] { right: 0; -} - -.block-list-arrow.is-hidden { - opacity: 0; + bottom: 0; + height: 100px; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff); pointer-events: none; } -.block-list { - display: flex; - align-items: stretch; - gap: 20px; - overflow-x: auto; - scroll-snap-type: x mandatory; - list-style: none; +.block-list-lower { margin: 24px 0; - padding: 12px 48px; + display: flex; + flex-wrap: wrap; + align-items: stretch; + gap: 28px; } -.block-list li { - flex: 0 0 200px; - overflow: hidden; - scroll-snap-align: start; +.block-list-items { + display: contents; } -.block-list li a { +.block-list-items a { display: flex; flex-direction: column; gap: 12px; - color: inherit; + width: 200px; text-decoration: none; - padding: 16px; } -.block-list li img { - width: 100%; - height: 200px; - /* object-fit: contain; */ +.block-list-thumb { + position: relative; + width: 194px; + height: 133px; + border-radius: 10px; + overflow: hidden; +} + +.block-list-thumb img { display: block; - /* background: #f5f5f5; */ - /* border-radius: 8px; */ + width: 100%; + height: 100%; + object-fit: cover; } -.block-list li a:hover, -.block-list li a:focus { - transform: translateY(-2px); +.block-list-items a span{ + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; } -.block-list .empty { - flex: 1 0 auto; +.block-list-items .article-title { + font-size: 20px; +} + +.block-list-items .article-date { + color: #0e1b4266; +} + +.block-list-more-article { + max-width: 430px; + min-width: 200px; + flex: 1 1 0; + display: flex; + align-items: center; + justify-content: center; + align-self: stretch; + margin-left: auto; text-align: center; - padding: 24px; - color: #666; - background: #fafafa; - border: 1px dashed #ddd; - border-radius: 12px; +} + +.block-list-more-article a { + display: flex; + align-items: center; + gap: 12px; + justify-content: center; +} + +.block-list-more-article span { + font-size: 18px; + font-weight: 700; + color: #0e1b42; + text-decoration: underline; +} + +.block-list-more-article .right-arrow { + background: none; + width: 52px; + height: 52px; + border: none; + padding: 0; + cursor: pointer; + box-shadow: #0e1b4266 1px 2px 1px 1px; +} + +.block-list-more-article .right-arrow .right-arrow-icon { + width: 16px; + height: 32px; + transform: rotate(180deg); +} + +@media (min-width: 768px) and (max-width: 1023px) { + .block-first-article { + grid-template-columns: 318px 1fr; + } + + .block-first-article .first-article-image { + width: 318px; + } + + .block-first-article .first-article-image img{ + width:318px; + height:290px; + } + + .block-first-article .first-article-title { + font-size: 36px; + } + + .block-list-lower { + gap: 20px; + } + + .block-list-more-article { + max-width: 200px; + flex: 1 1 200px; + } +} + +@media (max-width: 767px) { + .block-first-article { + grid-template-columns: 1fr; + grid-template-areas: + "image" + "content"; + } +} + +@media (min-width: 575px) and (max-width: 767px) { + .block-first-article .first-article-image { + width: 426px; + } + + .block-first-article .first-article-image img{ + width:426px; + height:260px; + } + + .block-first-article .first-article-title { + font-size: 36px; + } + + .block-list-items a { + display: grid; + grid-template-columns: 194px 1fr; + column-gap: 16px; + row-gap: 8px; + width: 100%; + } + + .block-list-items a > div:nth-of-type(1) { + grid-row: 1 / span 2; + } + + .block-list-items a > div:nth-of-type(2), + .block-list-items a > div:nth-of-type(3) { + grid-column: 2; + min-width: 0; + } + + .block-list-more-article { + max-width: 100%; + } +} + +@media (max-width: 574px) { + .block-first-article .first-article-image { + width: 300px; + } + + .block-first-article .first-article-image img{ + width: 300px; + height: 220px; + } + + .block-first-article .first-article-title { + font-size: 24px; + } + + .block-first-article .first-article-intro { + font-size: 16px; + } + + .block-list-lower { + gap: 16px; + } + + .block-list-items a { + width: 142px; + } + + .block-list-thumb { + width: 139px; + height: 110px; + } + + .block-list-items .article-title { + font-size: 16px; + } + + .block-list-items .article-date { + font-size: 12px; + } + + .block-list-more-article span { + font-size: 16px; + } + + .block-list-more-article .right-arrow { + width: 40px; + height: 40px; + } + + .block-list-more-article .right-arrow .right-arrow-icon { + width: 12px; + height: 24px; + } } diff --git a/innovedus_cms/home/static/css/category.css b/innovedus_cms/home/static/css/category.css new file mode 100644 index 0000000..e48bd6b --- /dev/null +++ b/innovedus_cms/home/static/css/category.css @@ -0,0 +1,70 @@ +.block-title { + display: inline-block; + width: 197px; + height: 87px; + vertical-align: middle; + font-size: 20px; + font-weight: 700; +} + +.block-title span { + padding-left: 21px; + line-height: 87px; +} + +.category-title { + background-color: #00abf5; + color: #ffffff; +} + +.subcategory-title { + display: flex; + align-items: center; + margin: 24px 0; + color: #0e1b42; + font-size: 18px; + font-weight: 700; +} + +.subcategory-title::before, +.subcategory-title::after { + content: ""; + flex: 1 1 auto; + height: 1px; + background: #0e1b42; +} + +.subcategory-title span { + display: inline-block; + width: 190px; + height: 40px; + line-height: 40px; + text-align: center; + border: 1px solid #0e1b42; + background: #ffffff; +} + +@media (max-width: 767px) { + .subcategory-title::after { + display: none; + } +} + +@media (max-width: 574px) { + .block-title { + width: 139px; + height: 55px; + font-size: 16px; + } + + .block-title span { + padding-left: 14px; + line-height: 55px; + } + + .subcategory-title span { + width: 139px; + height: 55px; + line-height: 55px; + } +} diff --git a/innovedus_cms/home/static/css/home.css b/innovedus_cms/home/static/css/home.css index 3db3ac7..a982be3 100644 --- a/innovedus_cms/home/static/css/home.css +++ b/innovedus_cms/home/static/css/home.css @@ -8,41 +8,12 @@ color: #ffffff; } -.template-homepage .site-header { - background-color: #0e1b42; - color: #ffffff; -} - -.template-homepage .main-menu-link { - color: #ffffff; -} - -.template-homepage .header-search .search-input { - /* border-color: #ffffff; */ - background-color: rgba(255, 255, 255, 0.4); -} - -.template-homepage .header-search .search-icon { - color: #ffffff; -} - -.template-homepage .header-search input[type="search"] { - color: #ffffff; -} - .home-banner img { width: 100%; height: auto; display: block; } -@media (max-width: 767px) { - .home-banner { - width: 100vw; - margin-left: calc(50% - 50vw); - } -} - .list-title { align-items: center; margin: 10px 0; @@ -78,7 +49,7 @@ color: #00abf5; } -.section-b .list-title .category_title { +.section-b .list-title .category-title { background-color: #00abf5; color: #ffffff; } @@ -91,7 +62,7 @@ color: #f4a41c; } -.section-o .list-title .category_title { +.section-o .list-title .category-title { background-color: #f4a41c; color: #ffffff; } @@ -101,11 +72,18 @@ } @media (min-width: 768px) and (max-width: 1023px) { - .list-title .category_title { + .list-title .category-title { width: 142px; } } +@media (max-width: 767px) { + .home-banner { + width: 100vw; + margin-left: calc(50% - 50vw); + } +} + @media (max-width: 574px) { .block-title { width: 139px; @@ -127,4 +105,4 @@ .more-link { font-size: 14px; } -} \ No newline at end of file +} diff --git a/innovedus_cms/home/static/css/horizontal_list.css b/innovedus_cms/home/static/css/horizontal_list.css index 80c5ea5..27cff22 100644 --- a/innovedus_cms/home/static/css/horizontal_list.css +++ b/innovedus_cms/home/static/css/horizontal_list.css @@ -150,7 +150,7 @@ .horizontal-list-thumb { width: 139px; - height: 114px; + height: 110px; } .section-b .horizontal-list-thumb::after { @@ -222,10 +222,6 @@ flex: 0 0 142px; } - /* .horizontal-list .article-title { - width: 142px; - } */ - .horizontal-list .article-title { font-size: 16px; } diff --git a/innovedus_cms/home/static/css/news_list.css b/innovedus_cms/home/static/css/news_list.css index e93fd68..eeab0a1 100644 --- a/innovedus_cms/home/static/css/news_list.css +++ b/innovedus_cms/home/static/css/news_list.css @@ -188,7 +188,42 @@ overflow: hidden; } +@media (min-width: 768px) and (max-width: 1023px) { + .news-hero { + grid-template-columns: 318px 1fr; + } + + .news-hero .fist-news-title { + max-width: 320px; + } + + .news-hero .first-news-image { + width: 318px; + } + + .news-hero .first-news-image::after { + background-size: 318px 25px; + } + + .news-hero .first-news-image img { + width: 318px; + height: 290px; + } + + .news-hero .first-news-content { + height: 290px; + } + + .news-list-lower { + gap: 16px; + } +} + @media (min-width: 575px) and (max-width: 1023px) { + .news-hero .fist-news-title { + font-size: 36px; + } + .more-news { display: grid; grid-template-columns: 200px 1fr 1fr; @@ -314,43 +349,6 @@ } } -@media (min-width: 768px) and (max-width: 1023px) { - .news-hero { - grid-template-columns: 318px 1fr; - } - - .news-hero .fist-news-title { - max-width: 320px; - } - - .news-hero .first-news-image { - width: 318px; - } - - .news-hero .first-news-image::after { - background-size: 318px 25px; - } - - .news-hero .first-news-image img { - width: 318px; - height: 290px; - } - - .news-hero .first-news-content { - height: 290px; - } - - .news-list-lower { - gap: 16px; - } -} - -@media (min-width: 575px) and (max-width: 1023px) { - .news-hero .fist-news-title { - font-size: 36px; - } -} - @media (max-width: 574px) { .news-hero .first-news-image { width: 300px; @@ -368,9 +366,6 @@ height: 220px; } - /* .news-hero .first-news-content { - height: 220px; - } */ .news-hero .fist-news-title { font-size: 24px; @@ -388,9 +383,6 @@ width: 142px; } - /* .news-list-lower { - justify-content: center; - } */ .news-list-thumb { width: 139px; height: 110px; diff --git a/innovedus_cms/home/templates/home/category_page.html b/innovedus_cms/home/templates/home/category_page.html index 0dba871..aa1361b 100644 --- a/innovedus_cms/home/templates/home/category_page.html +++ b/innovedus_cms/home/templates/home/category_page.html @@ -1,6 +1,10 @@ {% extends "base.html" %} -{% load wagtailcore_tags %} +{% load wagtailcore_tags static %} +{% block extra_css %} + +{% endblock %} {% block content %} + {# Breadcrumbs navigation may not used anymore #} {% if breadcrumbs %} {% endif %} +
{{ self.title}}
{% if page.has_subcategories %} {% for section in category_sections %} - {% include "home/includes/category_session.html" with section=section %} +
{{ section.title }}
+ {% include "home/includes/block_list.html" with items=section.items %} {% endfor %} {% else %} {% include "home/includes/page-article-list.html" with category=category_sections.0 %} diff --git a/innovedus_cms/home/templates/home/home_page.html b/innovedus_cms/home/templates/home/home_page.html index 8e8ba60..81dc3a1 100644 --- a/innovedus_cms/home/templates/home/home_page.html +++ b/innovedus_cms/home/templates/home/home_page.html @@ -1,6 +1,6 @@ {% extends "base.html" %} {% load static %} -{% block body_class %}template-homepage{% endblock %} +{% block body_class %}template-darkbackground{% endblock %} {% block extra_css %} diff --git a/innovedus_cms/home/templates/home/includes/block_list.html b/innovedus_cms/home/templates/home/includes/block_list.html index 932e07b..7c13c04 100644 --- a/innovedus_cms/home/templates/home/includes/block_list.html +++ b/innovedus_cms/home/templates/home/includes/block_list.html @@ -1,23 +1,74 @@ {% load wagtailimages_tags static %} +{% block extra_css %} + +{% endblock %}
- - - +
+ + {% endif %} diff --git a/innovedus_cms/home/templates/home/includes/category_session.html b/innovedus_cms/home/templates/home/includes/category_session.html index b8ec3aa..f24be4a 100644 --- a/innovedus_cms/home/templates/home/includes/category_session.html +++ b/innovedus_cms/home/templates/home/includes/category_session.html @@ -2,7 +2,7 @@
-
{{ section.title }}
+
{{ section.title }}