From dc7d66c822605219dca0c0464a545c9c85de9b29 Mon Sep 17 00:00:00 2001 From: Fukusan64 Date: Wed, 10 Sep 2025 01:29:51 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E8=89=B2=E3=80=85=E8=AA=BF=E6=95=B4?= =?UTF-8?q?=E3=81=97=E3=81=A6=E3=81=BF=E3=81=9F(=E3=83=8A=E3=83=93?= =?UTF-8?q?=E3=83=90=E3=83=BC=E3=81=A8=E7=9B=B8=E6=80=A7=E3=81=8C=E6=82=AA?= =?UTF-8?q?=E3=81=84...)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _pages/time-table.html | 16 ++++++------ _sass/pages/time-table.scss | 52 +++++-------------------------------- 2 files changed, 15 insertions(+), 53 deletions(-) diff --git a/_pages/time-table.html b/_pages/time-table.html index e87ea4b9..36ac73de 100644 --- a/_pages/time-table.html +++ b/_pages/time-table.html @@ -17,20 +17,18 @@ {% assign total_slots = tte.total_slots %} {% assign total_rooms = tte.total_rooms %} -
+

Time table タイムテーブル

- -
+
- - + {% comment %} ルーム単位でヘッダーを描画 {% endcomment %} {% for room in rooms %} @@ -64,9 +62,11 @@

rowspan="{{ event.duration }}" style="--span: {{ event.duration }};">
-
{{ event.start }}–{{ event.end }}
-
{{ event.title }}
- {% if event.subtitle %}
{{ event.subtitle }}
{% endif %} +
+
{{ event.start }}–{{ event.end }}
+
{{ event.title }}
+ {% if event.subtitle %}
{{ event.subtitle }}
{% endif %} +
{% if event.badge %}{{ event.badge }}{% endif %} {% if event.note %}
{{ event.note }}
{% endif %}
diff --git a/_sass/pages/time-table.scss b/_sass/pages/time-table.scss index 6664111d..c94db8f3 100644 --- a/_sass/pages/time-table.scss +++ b/_sass/pages/time-table.scss @@ -1,23 +1,12 @@ -@use '../global/variables' as *; - -@media (max-width: 640px) { - :root, body { max-width: 100%; overflow-x: clip; } -} -@supports not (overflow-x: clip) { - @media (max-width: 640px) { :root, body { overflow-x: hidden; } } -} - /* ====== スクロール容器 ====== */ .ttable-wrap{ position: relative; width: 100%; max-width: 100%; overflow-x: auto; - overflow-y: visible; + overflow-y: auto; -webkit-overflow-scrolling: touch; - overscroll-behavior-x: contain; contain: content; - scrollbar-gutter: stable both-edges; } /* ====== テーブル ====== @@ -25,17 +14,12 @@ table-layout: auto と最小幅制約を組み合わせる */ .ttable{ - --w-start: 8ch; - --room-min: 20rem; + table-layout: fixed; + --w-start: 5rem; + --room-min: clamp(235px, calc((100dvw - var(--w-start) - 10rem)), 20rem); --row-h: 56px; width: calc(var(--w-start) + var(--room-min) * var(--room-count)); - min-width: 100%; - border-collapse: separate; - border-spacing: 0; - table-layout: auto; - background: #fff; - border: 1px solid #e6e6e9; } /* ヘッダー */ @@ -59,9 +43,9 @@ /* 会場ヘッダーと本文セルの最小幅をそろえる（PCで潰れない） */ .ttable__th--room{ border-left: 1px solid #ececf1; color:#111; background: linear-gradient(0deg, rgba(255,255,255,0.88), rgba(255,255,255,0.88)), var(--room-color, #c43b3b); - min-width: var(--room-min); + width: var(--room-min); } -.ttable tbody td{ min-width: var(--room-min); } +.ttable tbody td{ width: var(--room-min); } /* 行ストライプ & グリッド線 */ .ttable tbody tr{ height: var(--row-h); } @@ -111,35 +95,13 @@ box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 10px 12px 12px; background: #fff; - overflow: hidden; height: 100%; display: flex; flex-direction: column; + overflow: clip; } .ttable__event::before{ content:""; position:absolute; inset:0 0 auto 0; height: 6px; background: var(--accent, #c43b3b); } .ttable__event-time{ font-weight: 800; font-size: 1.05rem; letter-spacing: .3px; margin: 8px 0 4px; color: #c43b3b; } .ttable__event-title{ font-weight: 800; line-height: 1.35; margin-bottom: 4px; color: #121212; } .ttable__event-subtitle{ color: #ee7d05; font-weight: 700; font-size: .92rem; line-height: 1.3; } .ttable__badge{ position: absolute; top: 8px; right: 10px; padding: 2px 8px; border-radius: 999px; font-size: .85rem; font-weight: 800; color: #fff; background: var(--accent,#c43b3b); box-shadow: 0 1px 4px rgba(0,0,0,.1); } - -/* スマホ微調整 */ -@media (max-width: 640px){ - .ttable{ --row-h: 54px; --room-min: 16rem; --w-start: 7ch; } - .ttable thead th, .ttable__cell{ padding: 8px; font-size: .95rem; } - .ttable thead th{ white-space: normal; } - .ttable__room-cap{ overflow-wrap: anywhere; word-break: keep-all; } - .ttable tbody tr:nth-child(6n){ - box-shadow: inset 0 -1.5px 0 rgba(0,0,0,0.18); - } - .ttable-wrap::before, .ttable-wrap::after{ - content: ""; position: absolute; top: 0; bottom: 0; width: 18px; - pointer-events: none; z-index: 6; - } - .ttable-wrap::before{ left: 0; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); } - .ttable-wrap::after{ right: 0; background: linear-gradient(to left, #fff, rgba(255,255,255,0)); } - .ttable tbody tr{ background-image: linear-gradient(to right, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0) 0); } - .ttable__event-time{ font-size: 1rem; margin-top: 6px; } - .ttable__event-title{ font-size: .98rem; } - .ttable__event-subtitle{ font-size: .86rem; } -} - From 3bf2ce71610c21c9e81af5ffba59afda9f2f4b17 Mon Sep 17 00:00:00 2001 From: Yohei Yasukawa Date: Wed, 10 Sep 2025 23:39:17 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E3=82=BF=E3=82=A4=E3=83=A0=E3=83=86?= =?UTF-8?q?=E3=83=BC=E3=83=96=E3=83=AB=E3=81=AE=E6=A8=AA=E3=82=B9=E3=82=AF?= =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=AB=E3=81=AE=E3=81=BF=E5=8F=AF=E8=83=BD?= =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - テーブル内部での縦スクロールを無効化 - (他ページ同様の) 縦スクロールに変更 --- _pages/time-table.html | 10 ++++------ _sass/pages/time-table.scss | 4 +++- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/_pages/time-table.html b/_pages/time-table.html index 36ac73de..3d6b1037 100644 --- a/_pages/time-table.html +++ b/_pages/time-table.html @@ -22,7 +22,7 @@

Time table タイムテーブル

-
+

{{ site.date_event }} のタイムテーブル
時間
{{ site.date_event }} のタイムテーブル @@ -62,11 +62,9 @@

rowspan="{{ event.duration }}" style="--span: {{ event.duration }};">
-
-
{{ event.start }}–{{ event.end }}
-
{{ event.title }}
- {% if event.subtitle %}
{{ event.subtitle }}
{% endif %} -
+
{{ event.start }}–{{ event.end }}
+
{{ event.title }}
+ {% if event.subtitle %}
{{ event.subtitle }}
{% endif %} {% if event.badge %}{{ event.badge }}{% endif %} {% if event.note %}
{{ event.note }}
{% endif %}
diff --git a/_sass/pages/time-table.scss b/_sass/pages/time-table.scss index c94db8f3..053d5616 100644 --- a/_sass/pages/time-table.scss +++ b/_sass/pages/time-table.scss @@ -4,9 +4,11 @@ width: 100%; max-width: 100%; overflow-x: auto; - overflow-y: auto; + overflow-y: visible; -webkit-overflow-scrolling: touch; + overscroll-behavior-x: contain; contain: content; + scrollbar-gutter: stable both-edges; } /* ====== テーブル ======