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

improve homepage layout

Browse Source
This commit is contained in:
marlon-erler
2024-07-20 00:15:05 +02:00
parent bac156ae46
commit d7d4f399a2
5 changed files with 95 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+12
View File
@@ -15,6 +15,18 @@
min-width: 100%;
scroll-snap-align: center;
}
@media (max-width: 640px) {
#home-page > div {
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
#home-page > div > div {
height: 100%;
overflow: scroll;
padding: var(--content-padding);
}
}
@media (min-width: 640px) {
#home-page #overview-section {
width: 20rem;
dist/index.js
Vendored
+9 -2
View File
@@ -274,7 +274,9 @@
overviewHeadline: "Overview",
statusHeadline: "Status",
settingsButton: "Settings",
scrollToChatButton: "Chats",
///
backToOverviewAudioLabel: "go back to overview",
chatsHeadline: "Chats",
addChatAudioLabel: "name of new chat",
addChatPlaceholder: "Add chat",
@@ -293,7 +295,8 @@
// src/View/homePage.tsx
function HomePage() {
return /* @__PURE__ */ createElement("article", { id: "home-page" }, /* @__PURE__ */ createElement("header", null, /* @__PURE__ */ createElement("span", null, translations.homePage.appName)), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "overview-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.overviewHeadline), /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("h3", null, translations.homePage.statusHeadline))), /* @__PURE__ */ createElement("button", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), /* @__PURE__ */ createElement("div", null, translations.homePage.settingsButton))), /* @__PURE__ */ createElement("div", { id: "chat-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.chatsHeadline), /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
const overviewSection = /* @__PURE__ */ createElement("div", { id: "overview-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.overviewHeadline), /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.homePage.statusHeadline))), /* @__PURE__ */ createElement("button", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), /* @__PURE__ */ createElement("div", null, translations.homePage.settingsButton)), /* @__PURE__ */ createElement("div", { class: "mobile-only" }, /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, /* @__PURE__ */ createElement("button", { class: "ghost width-50", "on:click": scrollToChat }, translations.homePage.scrollToChatButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))));
const chatSection = /* @__PURE__ */ createElement("div", { id: "chat-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.chatsHeadline), /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
"input",
{
placeholder: translations.homePage.addChatPlaceholder,
@@ -306,7 +309,11 @@
"aria-label": translations.homePage.addChatButton
},
/* @__PURE__ */ createElement("span", { class: "icon" }, "add")
)))));
)));
function scrollToChat() {
chatSection.scrollIntoView();
}
return /* @__PURE__ */ createElement("article", { id: "home-page" }, /* @__PURE__ */ createElement("header", null, /* @__PURE__ */ createElement("span", null, translations.homePage.appName)), /* @__PURE__ */ createElement("div", null, overviewSection, chatSection));
}
// src/Model/Utility/typeSafety.ts