From eef43f5077ff083dbe334672746cac1f1227539f Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Tue, 27 Aug 2024 09:58:28 -0700 Subject: [PATCH] improve calendar layout on mobile --- dist/index.css | 49 +++++++++++++++++++---- dist/index.js | 17 +++++++- src/View/Components/monthGrid.css | 65 ++++++++++++++++++++++++++----- src/View/Components/monthGrid.tsx | 17 +++++++- 4 files changed, 128 insertions(+), 20 deletions(-) diff --git a/dist/index.css b/dist/index.css index 9290e5dd..3d402325 100644 --- a/dist/index.css +++ b/dist/index.css @@ -498,7 +498,7 @@ body[showing-chat] #chat-page-wrapper { flex-direction: column; gap: var(--gap-between-tiles); height: 100%; - overflow: hidden; + overflow: auto; } .month-grid-wrapper .day-labels { flex: 0; @@ -508,35 +508,68 @@ body[showing-chat] #chat-page-wrapper { .month-grid-wrapper > div { display: grid; gap: var(--gap-between-tiles); - height: 100%; - animation: slide-up var(--animation-duration); grid-template-columns: repeat(7, minmax(0px, 1fr)); - grid-auto-rows: 1fr; + animation: slide-up var(--animation-duration); } .month-grid { - overflow: hidden; + overflow: visible; padding: var(--content-padding); padding-top: 0px; + flex: 1; + grid-auto-rows: 1fr; } .month-grid .tile { animation: slide-up var(--animation-duration); overflow: hidden; + align-items: start; } .month-grid .tile[today] b { color: var(--primary); } .month-grid .tile > div { + width: 100%; + height: 100%; +} +.month-grid .tile .event-count { + display: none; + background-color: var(--text-normal); + color: var(--background); + opacity: 0.6; + border-radius: 100%; + width: 1rem; + height: 1rem; + font-size: 0.6rem; + font-weight: bold; + align-items: center; + justify-content: center; +} +.month-grid .tile .event-count[has-events] { + background-color: var(--primary); + opacity: 1; +} +.month-grid .tile .event-list { display: flex; flex-direction: column; height: 100%; width: 100%; + gap: var(--gap-between-tiles); } -.month-grid .tile > div span { +.month-grid .tile .event-list span { animation: slide-up var(--animation-duration); } -@media (max-width: 640px) { +@media (max-width: 640px) and (max-height: 900px) { .month-grid .tile { - padding: 4px; + padding: 0px; + } + .month-grid .tile > div { + align-items: center; + justify-content: center; + } + .month-grid .tile .event-count { + display: flex; + } + .month-grid .tile .event-list { + display: none; } } diff --git a/dist/index.js b/dist/index.js index badd71e8..ed22262e 100644 --- a/dist/index.js +++ b/dist/index.js @@ -3193,6 +3193,14 @@ () => selectedDate.value == parseInt(date) ); const isToday = monthGrid.isCurrentMonth == true && parseInt(date) == (/* @__PURE__ */ new Date()).getDate(); + const eventCount = createProxyState( + [mapState], + () => mapState.value.size + ); + const hasEvents = createProxyState( + [eventCount], + () => eventCount.value != 0 + ); function select() { selectedDate.value = parseInt(date); } @@ -3210,9 +3218,16 @@ "on:drop": drop }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, date), /* @__PURE__ */ createElement( + "span", + { + class: "event-count", + "toggle:has-events": hasEvents, + "subscribe:innerText": eventCount + } + ), /* @__PURE__ */ createElement( "div", { - class: "flex-column gap clip", + class: "event-list", "children:append": [mapState, converter] } )) diff --git a/src/View/Components/monthGrid.css b/src/View/Components/monthGrid.css index 066a0a8a..24326def 100644 --- a/src/View/Components/monthGrid.css +++ b/src/View/Components/monthGrid.css @@ -5,7 +5,7 @@ gap: var(--gap-between-tiles); height: 100%; - overflow: hidden; + overflow: auto; } .month-grid-wrapper .day-labels { @@ -18,25 +18,27 @@ .month-grid-wrapper > div { display: grid; gap: var(--gap-between-tiles); - - height: 100%; + grid-template-columns: repeat(7, minmax(0px, 1fr)); animation: slide-up var(--animation-duration); - - grid-template-columns: repeat(7, minmax(0px, 1fr)); - grid-auto-rows: 1fr; } .month-grid { - overflow: hidden; + overflow: visible; padding: var(--content-padding); padding-top: 0px; + + flex: 1; + + grid-auto-rows: 1fr; } .month-grid .tile { animation: slide-up var(--animation-duration); overflow: hidden; + + align-items: start; } .month-grid .tile[today] b { @@ -44,18 +46,61 @@ } .month-grid .tile > div { + width: 100%; + height: 100%; +} + +.month-grid .tile .event-count { + display: none; + + background-color: var(--text-normal); + color: var(--background); + + opacity: 0.6; + border-radius: 100%; + + width: 1rem; + height: 1rem; + font-size: 0.6rem; + font-weight: bold; + + align-items: center; + justify-content: center; +} + +.month-grid .tile .event-count[has-events] { + background-color: var(--primary); + opacity: 1; +} + +.month-grid .tile .event-list { display: flex; flex-direction: column; height: 100%; width: 100%; + + gap: var(--gap-between-tiles); } -.month-grid .tile > div span { +.month-grid .tile .event-list span { animation: slide-up var(--animation-duration); } -@media (max-width: 640px) { +@media (max-width: 640px) and (max-height: 900px) { .month-grid .tile { - padding: 4px; + padding: 0px; + } + + .month-grid .tile > div { + align-items: center; + justify-content: center; + } + + .month-grid .tile .event-count { + display: flex; + } + + .month-grid .tile .event-list { + display: none; } } diff --git a/src/View/Components/monthGrid.tsx b/src/View/Components/monthGrid.tsx index d858f646..42586535 100644 --- a/src/View/Components/monthGrid.tsx +++ b/src/View/Components/monthGrid.tsx @@ -62,6 +62,16 @@ export function MonthGrid( monthGrid.isCurrentMonth == true && parseInt(date) == new Date().getDate(); + const eventCount: React.State = React.createProxyState( + [mapState], + () => mapState.value.size + ); + + const hasEvents: React.State = React.createProxyState( + [eventCount], + () => eventCount.value != 0 + ); + function select() { selectedDate.value = parseInt(date); } @@ -81,8 +91,13 @@ export function MonthGrid( >
{date} +