Merge branch 'main' into develop

Reviewed-on: #6

innovedus_cms/mysite/static/css/footer.css

@@ -63,7 +63,7 @@
   padding: 0;
   list-style: none;
   column-count: 2;
-  column-gap: 40px;
+  column-gap: 28px;
 }
 
 .footer-menu-list li {

innovedus_cms/mysite/static/css/mysite.css

@@ -75,10 +75,15 @@ a {
 
 .menu-item {
   position: relative;
-  flex: 1 1 0;
+  flex: 0 0 auto;
   text-align: left;
 }
 
+.menu-item:hover,
+.menu-item:focus-within {
+  z-index: 20;
+}
+
 .menu-item-header {
   display: flex;
   align-items: center;
@@ -172,10 +177,13 @@ a {
 .submenu {
   position: absolute;
   top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
+  left: 0;
+  width: max-content;
+  min-width: 100%;
+  max-width: calc(100vw - 32px);
+  transform: none;
   margin-top: -2px;
-  margin-left: 20px;
+  margin-left: 10px;
   list-style: none;
   padding-inline-start: 0;
   border-bottom: #0e1b42;
@@ -184,6 +192,7 @@ a {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
+  z-index: 20;
   transition: opacity 160ms ease, transform 160ms ease;
 }
 
@@ -198,11 +207,11 @@ a {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
-  transform: translateX(-50%) translateY(2px);
+  transform: translateY(2px);
 }
 
 .submenu-item {
-  min-width: 94px;
+  min-width: 0;
   height: 36px;
   border: #0e1b42;
   border-style: solid;
@@ -221,7 +230,8 @@ a {
   display: block;
   font-variation-settings: normal;
   font-family: "Inter:Regular", "Noto Sans JP:Regular", sans-serif;
-  word-break: break-word;
+  white-space: nowrap;
+  word-break: keep-all;
   font-weight: 400;
   font-style: normal;
   font-size: 14px;
@@ -276,7 +286,7 @@ a {
   border: 0;
   background: transparent;
   outline: none;
-  width: 153px;
+  width: 140px;
 }
 
 .template-darkbackground .header-search input[type="search"] {
@@ -329,7 +339,19 @@ a {
   }
 }
 
-@media (max-width: 768px) {
+@media (min-width: 768px) and (max-width: 1023px) {
+  .main-nav {
+    min-width: 0;
+  }
+
+  .main-menu {
+    flex-wrap: wrap;
+    row-gap: 4px;
+  }
+
+  .main-menu-link {
+    padding: 4px 4px;
+  }
 }
 
 @media (min-width: 575px) and (max-width: 767px) {
@@ -432,6 +454,8 @@ a {
 
   .submenu {
     position: static;
+    min-width: 0;
+    max-width: none;
     margin: 8px 0 0;
     opacity: 1;
     visibility: visible;
@@ -463,6 +487,8 @@ a {
   .submenu-item a {
     padding: 6px 0 6px 18px;
     font-size: 14px;
+    white-space: normal;
+    word-break: break-word;
   }
 }
 

innovedus_cms/mysite/static/css/subscribe_fab.css

@@ -48,7 +48,7 @@
   padding: 0 10px 0 0;
   border-radius: 36px;
   background: #ffffff1a;
-  border: 1px solid #ffffff80;
+  border: 1px solid #0e1b0e;
   transform: translateX(calc(100% - var(--fab-toggle-width)));
   transition: transform 0.25s ease, background-color 0.2s ease;
   backdrop-filter: blur(12px);

innovedus_cms/mysite/urls.py

@@ -11,6 +11,7 @@ from search import views as search_views
 from home.feeds import LatestArticlesFeed
 from home import views as home_views
 from base import views as base_views
+from mysite import views as mysite_views
 
 urlpatterns = [
     path("django-admin/", admin.site.urls),
@@ -18,6 +19,7 @@ urlpatterns = [
     path("documents/", include(wagtaildocs_urls)),
     path("feed.xml", LatestArticlesFeed(), name="article_feed"),
     path("sitemap.xml", sitemap, name="sitemap"),
+    path("media/<path:path>", mysite_views.media_proxy, name="media_proxy"),
     path("health", base_views.health_check, name="health_check"),
     # use <str:slug> so Unicode tag slugs (e.g. 台北美食) still resolve
     path("tags/<str:slug>/", home_views.hashtag_search, name="hashtag_search"),

innovedus_cms/mysite/views.py

@@ -0,0 +1,25 @@
+import mimetypes
+import posixpath
+
+from django.core.exceptions import SuspiciousFileOperation
+from django.core.files.storage import default_storage
+from django.http import FileResponse, Http404
+
+
+def media_proxy(request, path):
+    normalized_path = posixpath.normpath(path).lstrip("/")
+    if (
+        not normalized_path
+        or normalized_path == "."
+        or normalized_path.startswith("../")
+        or path.startswith("/")
+    ):
+        raise SuspiciousFileOperation("Invalid media path")
+
+    try:
+        file_obj = default_storage.open(normalized_path, "rb")
+    except FileNotFoundError as exc:
+        raise Http404("Media file not found") from exc
+
+    content_type, _ = mimetypes.guess_type(normalized_path)
+    return FileResponse(file_obj, content_type=content_type)