VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix calendar layout on mobile

Browse Source
This commit is contained in:
marlon-erler
2024-07-26 06:30:28 +02:00
parent 0c09dfc486
commit 969967ba67
5 changed files with 31 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+11
View File
@@ -475,6 +475,17 @@ body[showing-chat] #chat-page-wrapper {
#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .month-input {
width: 3.1rem;
}
@media (max-width: 1024px) {
#chat-page > div > #main > #calendar-page {
flex-direction: column;
}
#chat-page > div > #main > #calendar-page .month-grid-wrapper {
height: unset;
}
#chat-page > div > #main > #calendar-page .grid-pane-wrapper {
border-bottom: 1px solid var(--border);
}
}
/* src/View/Components/monthGrid.css */
.month-grid-wrapper {
dist/index.js
Vendored
+2 -2
View File
@@ -2727,7 +2727,7 @@
return /* @__PURE__ */ createElement(
"div",
{
class: "flex-column gap",
class: "flex-column gap slide-up",
"children:append": [listState, TaskViewModelToEntry]
}
);
@@ -2746,7 +2746,7 @@
}
}
);
return /* @__PURE__ */ createElement("div", { id: "calendar-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
return /* @__PURE__ */ createElement("div", { id: "calendar-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper grid-pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
"button",
{
class: "ghost",
dist/styles.css
Vendored
+2 -2
View File
@@ -20,12 +20,12 @@ ANIMATION
@keyframes slide-up {
0% {
opacity: 0;
transform: translateY(1rem);
transform: translateY(2rem);
}
}
:root {
--animation-duration: 0.4s;
--animation-duration: 0.5s;
}
.slide-up {
src/View/ChatPages/calendarPage.css
+14
View File
@@ -59,3 +59,17 @@
> .month-input {
width: 3.1rem;
}
@media (max-width: 1024px) {
#chat-page > div > #main > #calendar-page {
flex-direction: column;
}
#chat-page > div > #main > #calendar-page .month-grid-wrapper {
height: unset;
}
#chat-page > div > #main > #calendar-page .grid-pane-wrapper {
border-bottom: 1px solid var(--border);
}
}
src/View/ChatPages/calendarPage.tsx
+2 -2
View File
@@ -42,7 +42,7 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
} else {
return (
<div
class="flex-column gap"
class="flex-column gap slide-up"
children:append={[listState, TaskViewModelToEntry]}
></div>
);
@@ -65,7 +65,7 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
return (
<div id="calendar-page">
<div class="pane-wrapper">
<div class="pane-wrapper grid-pane-wrapper">
<div class="pane">
<div class="toolbar">
<span>