diff --git a/innovedus_cms/base/static/css/newsletter.css b/innovedus_cms/base/static/css/newsletter.css new file mode 100644 index 0000000..111fe39 --- /dev/null +++ b/innovedus_cms/base/static/css/newsletter.css @@ -0,0 +1,173 @@ +.newsletter-page { + background: #0e1b42 url("../img/newsletter_bg.png") center center / cover no-repeat fixed; +} + +.newsletter-page .site-main > .site-container { + padding-top: 64px; + padding-bottom: 64px; + min-height: 400px; +} + +.newsletter-status { + max-width: 640px; + margin: 0 auto; + padding: 24px; + color: #ffffff; +} + +.newsletter-status h1 { + font-size: 32px; + margin-top: 0; +} + +.newsletter-status p { + margin: 0; + font-size: 20px; + line-height: 1.5; +} + +.newsletter-status-message { + margin-bottom: 16px; +} + +.newsletter-unsubscribe-form label { + display: block; + margin-bottom: 8px; +} + +.newsletter-unsubscribe-form input[type="email"], +.newsletter-unsubscribe-form input[type="text"] { + width: 300px; + padding: 8px; + border: 0; + background: #ffffff4d; + color: #ffffff; +} + +.newsletter-unsubscribe-form button { + width: 131px; + height: 49px; + border: 0; + background: #ffffff; + font-size: 14px; + font-weight: 500; + color: #000000; + padding: 10px 16px; + cursor: pointer; + margin-top: 12px; +} + +.newsletter-back-link { + display: inline-flex; + align-items: center; + gap: 16px; + margin-top: 20px; + color: #ffffff; + text-decoration: none; +} + +.newsletter-back-link__icon { + position: relative; + width: 52px; + height: 52px; + background: #ffffff80; +} + +.newsletter-back-link__icon::before, +.newsletter-back-link__icon::after { + content: ""; + position: absolute; + left: 18px; + width: 15px; + height: 1.5px; + background: #0e1b42; +} + +.newsletter-back-link__icon::before { + top: 21px; + transform: rotate(-45deg); +} + +.newsletter-back-link__icon::after { + top: 31px; + transform: rotate(45deg); +} + +.newsletter-back-link__text { + font-size: 16px; + line-height: 1.2; +} + +@media (min-width: 575px) and (max-width: 767px) { + .newsletter-page .site-main > .site-container { + min-height: 360px; + } + + .newsletter-status { + padding: 16px; + } + + .newsletter-status h1 { + font-size: 24px; + } + + .newsletter-status p { + font-size: 16px; + } + + .newsletter-unsubscribe-form input[type="email"], + .newsletter-unsubscribe-form input[type="text"] { + width: 240px; + } +} + +@media (max-width: 574px) { + .newsletter-page .site-main > .site-container { + min-height: 320px; + } + + .newsletter-status { + padding: 16px; + } + + .newsletter-status h1 { + font-size: 20px; + } + + .newsletter-status p { + font-size: 14px; + } + + .newsletter-unsubscribe-form input[type="email"], + .newsletter-unsubscribe-form input[type="text"] { + width: 260px; + } + + .newsletter-unsubscribe-form button { + width: 90px; + height: 31px; + padding: 4px 16px; + } + + .newsletter-back-link__icon { + width: 40px; + height: 40px; + } + + .newsletter-back-link__icon::before { + top: 15px; + } + + .newsletter-back-link__icon::after { + top: 25px; + } + + .newsletter-back-link__icon::before, + .newsletter-back-link__icon::after { + left: 12px; + } + + .newsletter-back-link__text { + font-size: 14px; + } +} \ No newline at end of file diff --git a/innovedus_cms/base/static/img/newsletter_bg.png b/innovedus_cms/base/static/img/newsletter_bg.png new file mode 100644 index 0000000..d2c80e0 Binary files /dev/null and b/innovedus_cms/base/static/img/newsletter_bg.png differ diff --git a/innovedus_cms/base/templates/base/newsletter/status.html b/innovedus_cms/base/templates/base/newsletter/status.html index 9b3bf80..278bb5a 100644 --- a/innovedus_cms/base/templates/base/newsletter/status.html +++ b/innovedus_cms/base/templates/base/newsletter/status.html @@ -1,9 +1,19 @@ {% extends "base.html" %} +{% load static %} + +{% block body_class %}template-darkbackground newsletter-page{% endblock %} + +{% block extra_css %} + +{% endblock %} {% block content %}

{{ title }}

{{ message|safe }}
-

回到首頁

+ + + +
{% endblock %} diff --git a/innovedus_cms/base/templates/base/newsletter/unsubscribe.html b/innovedus_cms/base/templates/base/newsletter/unsubscribe.html index 18c65a5..df874d2 100644 --- a/innovedus_cms/base/templates/base/newsletter/unsubscribe.html +++ b/innovedus_cms/base/templates/base/newsletter/unsubscribe.html @@ -1,14 +1,20 @@ {% extends "base.html" %} +{% load static %} + +{% block body_class %}template-darkbackground newsletter-page{% endblock %} + +{% block extra_css %} + +{% endblock %} {% block content %}
-

取消訂閱

+

很遺憾聽到您取消電子報訂閱

{{ intro_message|safe }}
{% if can_submit %}
{% csrf_token %} - {{ form.email }} {{ form.token }} @@ -17,6 +23,9 @@

退訂連結已失效或缺少必要參數。

{% endif %} -

回到首頁

+
{% endblock %} diff --git a/innovedus_cms/base/views.py b/innovedus_cms/base/views.py index ba1bc72..2b3c3a3 100644 --- a/innovedus_cms/base/views.py +++ b/innovedus_cms/base/views.py @@ -191,8 +191,8 @@ def newsletter_subscribe(request): request, "base/newsletter/status.html", _build_context( - title="請前往信箱確認", - message="我們已寄出確認信，請點擊信中的連結完成訂閱。", + title="訂閱確認已送出！", + message="感謝您的訂閱
下一步，請前往訂閱的信箱收取確認信函

在信函中點擊連結", success=True, ), ) @@ -209,7 +209,7 @@ def newsletter_confirm(request): request, "base/newsletter/status.html", _build_context( - title="訂閱確認失敗", + title="訂閱認證失敗", message=template_settings.confirm_failure_template, success=False, ), @@ -222,7 +222,7 @@ def newsletter_confirm(request): request, "base/newsletter/status.html", _build_context( - title="訂閱確認成功", + title="訂閱認證成功！", message=template_settings.confirm_success_template, success=True, ), @@ -232,7 +232,7 @@ def newsletter_confirm(request): request, "base/newsletter/status.html", _build_context( - title="訂閱確認失敗", + title="訂閱認證失敗", message=template_settings.confirm_failure_template, success=False, ), diff --git a/innovedus_cms/home/static/img/default_cover.jpg b/innovedus_cms/home/static/img/default_cover.jpg deleted file mode 100644 index 61cb38d..0000000 Binary files a/innovedus_cms/home/static/img/default_cover.jpg and /dev/null differ diff --git a/innovedus_cms/home/static/img/default_cover_1.png b/innovedus_cms/home/static/img/default_cover_1.png new file mode 100644 index 0000000..d039c62 Binary files /dev/null and b/innovedus_cms/home/static/img/default_cover_1.png differ diff --git a/innovedus_cms/home/static/img/default_cover_2.png b/innovedus_cms/home/static/img/default_cover_2.png new file mode 100644 index 0000000..1e8436b Binary files /dev/null and b/innovedus_cms/home/static/img/default_cover_2.png differ diff --git a/innovedus_cms/home/static/img/default_cover_3.png b/innovedus_cms/home/static/img/default_cover_3.png new file mode 100644 index 0000000..83e3e27 Binary files /dev/null and b/innovedus_cms/home/static/img/default_cover_3.png differ diff --git a/innovedus_cms/home/templates/home/article_page.html b/innovedus_cms/home/templates/home/article_page.html index 528c3ef..6979947 100644 --- a/innovedus_cms/home/templates/home/article_page.html +++ b/innovedus_cms/home/templates/home/article_page.html @@ -1,5 +1,5 @@ {% extends "base.html" %} -{% load wagtailcore_tags wagtailimages_tags static %} +{% load wagtailcore_tags wagtailimages_tags static home_tags %} {% block extra_css %} @@ -89,7 +89,8 @@ {% image related.cover_image max-194x133 as related_cover %} {{ related.title }} {% else %} - {{ related.title }} + {% random_default_cover as default_cover %} + {{ related.title }} {% endif %}

{{ related.date|date:"Y/m/d" }}

diff --git a/innovedus_cms/home/templates/home/includes/article_list.html b/innovedus_cms/home/templates/home/includes/article_list.html index f3ee6e0..7cc3d18 100644 --- a/innovedus_cms/home/templates/home/includes/article_list.html +++ b/innovedus_cms/home/templates/home/includes/article_list.html @@ -1,4 +1,4 @@ -{% load wagtailimages_tags static %} +{% load wagtailimages_tags static home_tags %}
@@ -11,7 +11,8 @@ {% image first_article.cover_image max-410x293 as cover %} {{ first_article.title }} {% else %} - {{ first_article.title }} + {% random_default_cover as default_cover %} + {{ first_article.title }} {% endif %}
@@ -50,7 +51,8 @@ {% image article.cover_image max-410x218 as cover %} {{ article.title }} {% else %} - {{ article.title }} + {% random_default_cover as default_cover %} + {{ article.title }} {% endif %}
@@ -61,4 +63,4 @@ {% endfor %} {% endif %} -
\ No newline at end of file + diff --git a/innovedus_cms/home/templates/home/includes/block_list.html b/innovedus_cms/home/templates/home/includes/block_list.html index 92d7080..2cca449 100644 --- a/innovedus_cms/home/templates/home/includes/block_list.html +++ b/innovedus_cms/home/templates/home/includes/block_list.html @@ -1,4 +1,4 @@ -{% load wagtailimages_tags static %} +{% load wagtailimages_tags static home_tags %} {% block extra_css %} {% endblock %} @@ -13,7 +13,8 @@ {% image first_article.cover_image max-480x293 as cover %} {{ first_article.title }} {% else %} - {{ first_article.title }} + {% random_default_cover as default_cover %} + {{ first_article.title }} {% endif %} diff --git a/innovedus_cms/home/templates/home/includes/block_list_lower.html b/innovedus_cms/home/templates/home/includes/block_list_lower.html index 5435a84..7051afb 100644 --- a/innovedus_cms/home/templates/home/includes/block_list_lower.html +++ b/innovedus_cms/home/templates/home/includes/block_list_lower.html @@ -1,4 +1,4 @@ -{% load wagtailimages_tags static %} +{% load wagtailimages_tags static home_tags %} {% block extra_css %} {% endblock %} @@ -12,7 +12,8 @@ {% image article.cover_image max-194x133 as cover %} {{ article.title }} {% else %} - {{ article.title }} + {% random_default_cover as default_cover %} + {{ article.title }} {% endif %}
{{ article.title }}
diff --git a/innovedus_cms/home/templates/home/includes/horizontal_list.html b/innovedus_cms/home/templates/home/includes/horizontal_list.html index 8bdfac2..aad78a5 100644 --- a/innovedus_cms/home/templates/home/includes/horizontal_list.html +++ b/innovedus_cms/home/templates/home/includes/horizontal_list.html @@ -1,4 +1,4 @@ -{% load wagtailimages_tags static %} +{% load wagtailimages_tags static home_tags %}
{{ article.title }}
diff --git a/innovedus_cms/home/templates/home/includes/news_list.html b/innovedus_cms/home/templates/home/includes/news_list.html index 132e1d4..44de2b2 100644 --- a/innovedus_cms/home/templates/home/includes/news_list.html +++ b/innovedus_cms/home/templates/home/includes/news_list.html @@ -1,4 +1,4 @@ -{% load wagtailimages_tags static %} +{% load wagtailimages_tags static home_tags %}
@@ -30,7 +30,8 @@ {% image first_article.cover_image max-480x293 as cover %} {{ first_article.title }} {% else %} - {{ first_article.title }} + {% random_default_cover as default_cover %} + {{ first_article.title }} {% endif %}
@@ -65,7 +66,8 @@ {% image article.cover_image max-194x133 as cover %} {{ article.title }} {% else %} - {{ article.title }} + {% random_default_cover as default_cover %} + {{ article.title }} {% endif %}
{{ article.title }}
diff --git a/innovedus_cms/home/templatetags/home_tags.py b/innovedus_cms/home/templatetags/home_tags.py new file mode 100644 index 0000000..152153a --- /dev/null +++ b/innovedus_cms/home/templatetags/home_tags.py @@ -0,0 +1,16 @@ +import random + +from django import template +from django.templatetags.static import static + +register = template.Library() + + +@register.simple_tag +def random_default_cover(): + choices = ( + "img/default_cover_1.png", + "img/default_cover_2.png", + "img/default_cover_3.png", + ) + return static(random.choice(choices)) diff --git a/innovedus_cms/mysite/static/css/mysite.css b/innovedus_cms/mysite/static/css/mysite.css index 4bee7c3..24d1714 100644 --- a/innovedus_cms/mysite/static/css/mysite.css +++ b/innovedus_cms/mysite/static/css/mysite.css @@ -311,31 +311,6 @@ a { color: #0e1b42; } -.newsletter-status { - max-width: 640px; - margin: 48px auto; - padding: 24px; - border: 1px solid #0e1b4233; - border-radius: 8px; -} - -.newsletter-status h1 { - margin-top: 0; -} - -.newsletter-status-message { - margin-bottom: 16px; -} - -.newsletter-unsubscribe-form button { - border: 0; - border-radius: 4px; - background: #0e1b42; - color: #ffffff; - padding: 10px 16px; - cursor: pointer; -} - @media (max-width: 1023px) { .site-container { max-width: 640px; diff --git a/innovedus_cms/mysite/static/css/subscribe_fab.css b/innovedus_cms/mysite/static/css/subscribe_fab.css new file mode 100644 index 0000000..7513f24 --- /dev/null +++ b/innovedus_cms/mysite/static/css/subscribe_fab.css @@ -0,0 +1,116 @@ +.subscribe-fab { + --fab-toggle-width: 59px; + position: fixed; + right: 16px; + top: 12%; + transform: translateY(-50%); + z-index: 1000; + min-height: 59px; +} + +.subscribe-fab__toggle { + flex: 0 0 var(--fab-toggle-width); + width: var(--fab-toggle-width); + height: 59px; + margin: 0 0 0 10px; + border: 0; + background: transparent; + color: #ffffff66; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.subscribe-fab__icon { + width: 32px; + height: 32px; + transform: scale(1.35); + transform-origin: center; +} + +.subscribe-fab__text { + font-size: 10px; + font-weight: 500; + line-height: 1; +} + +.subscribe-fab__panel { + position: absolute; + width: 378px; + right: 0; + top: 0; + display: flex; + align-items: center; + min-width: 368px; + height: 59px; + padding: 0 10px 0 0; + border-radius: 36px; + background: #323232; + border: 1px solid #ffffff80; + transform: translateX(calc(100% - var(--fab-toggle-width))); + transition: transform 0.25s ease, background-color 0.2s ease; +} + +.subscribe-fab:hover .subscribe-fab__panel { + background: #767676; +} + +.subscribe-fab.is-open .subscribe-fab__panel { + background: #767676; + transform: translateX(44px); +} + +.subscribe-fab:hover .subscribe-fab__toggle, +.subscribe-fab.is-open .subscribe-fab__toggle { + color: #0e1b42;; +} + +.subscribe-fab__form { + display: flex; + align-items: center; + gap: 8px; + opacity: 0; + pointer-events: none; + transition: opacity 0.15s ease; +} + +.subscribe-fab.is-open .subscribe-fab__form { + opacity: 1; + pointer-events: auto; +} + +.subscribe-fab__input { + width: 190px; + height: 30px; + border: 0; + padding: 0 10px; + background: #ffffff80; + color: #0e1b42; + font-size: 12px; +} + +.subscribe-fab__input::placeholder { + color: #0e1b4288; +} + +.subscribe-fab__submit { + height: 30px; + border: 0; + padding: 0 10px; + background: #ffffffcc; + color: #0e1b42; + font-size: 12px; + cursor: pointer; +} + +@media (max-width: 375px) { + .subscribe-fab__input { + width: 150px; + } + + .subscribe-fab.is-open .subscribe-fab__panel { + transform: translateX(84px); + } +} \ No newline at end of file diff --git a/innovedus_cms/mysite/static/js/subscribe_fab.js b/innovedus_cms/mysite/static/js/subscribe_fab.js new file mode 100644 index 0000000..b060545 --- /dev/null +++ b/innovedus_cms/mysite/static/js/subscribe_fab.js @@ -0,0 +1,29 @@ +(function () { + const root = document.querySelector("[data-subscribe-fab]"); + if (!root) return; + + const toggle = root.querySelector(".subscribe-fab__toggle"); + if (!toggle) return; + + const setOpen = (open) => { + root.classList.toggle("is-open", open); + toggle.setAttribute("aria-expanded", open ? "true" : "false"); + }; + + toggle.addEventListener("click", function () { + const isOpen = root.classList.contains("is-open"); + setOpen(!isOpen); + }); + + document.addEventListener("click", function (event) { + if (!root.contains(event.target)) { + setOpen(false); + } + }); + + document.addEventListener("keydown", function (event) { + if (event.key === "Escape") { + setOpen(false); + } + }); +})(); diff --git a/innovedus_cms/mysite/templates/base.html b/innovedus_cms/mysite/templates/base.html index c0d08b0..ca30983 100644 --- a/innovedus_cms/mysite/templates/base.html +++ b/innovedus_cms/mysite/templates/base.html @@ -35,6 +35,7 @@ {# Global stylesheets #} + {% block extra_css %} {# Override this in templates to add extra stylesheets #} @@ -53,10 +54,12 @@ {% include "includes/footer.html" %} + {% include "includes/subscribe_fab.html" %} {# Global javascript #} + {# Instagram embed script to render IG oEmbeds #} diff --git a/innovedus_cms/mysite/templates/includes/footer.html b/innovedus_cms/mysite/templates/includes/footer.html index 4c5e73c..6585db5 100644 --- a/innovedus_cms/mysite/templates/includes/footer.html +++ b/innovedus_cms/mysite/templates/includes/footer.html @@ -1,4 +1,4 @@ -{% load navigation_tags %} +{% load navigation_tags wagtailcore_tags %}