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
src/View/homePage.css
+15
View File
@@ -21,6 +21,21 @@
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;
src/View/homePage.tsx
+33 -8
View File
@@ -5,27 +5,36 @@ import * as React from "bloatless-react";
import { translations } from "./translations";
export function HomePage() {
return (
<article id="home-page">
<header>
<span>{translations.homePage.appName}</span>
</header>
<div>
// sections
const overviewSection = (
<div id="overview-section">
<h2>{translations.homePage.overviewHeadline}</h2>
<div class="tile flex-no">
<span class="icon">cell_tower</span>
<div>
<h3>{translations.homePage.statusHeadline}</h3>
<b>{translations.homePage.statusHeadline}</b>
</div>
</div>
<button class="tile flex-no">
<span class="icon">settings</span>
<div>{translations.homePage.settingsButton}</div>
</button>
</div>
<div class="mobile-only">
<hr></hr>
<div class="flex-row justify-end">
<button class="ghost width-50" on:click={scrollToChat}>
{translations.homePage.scrollToChatButton}
<span class="icon">arrow_forward</span>
</button>
</div>
</div>
</div>
);
const chatSection = (
<div id="chat-section">
<h2>{translations.homePage.chatsHeadline}</h2>
@@ -42,6 +51,22 @@ export function HomePage() {
</button>
</div>
</div>
);
// methods
function scrollToChat() {
chatSection.scrollIntoView();
}
// final
return (
<article id="home-page">
<header>
<span>{translations.homePage.appName}</span>
</header>
<div>
{overviewSection}
{chatSection}
</div>
</article>
);
src/View/translations.ts
+3
View File
@@ -13,8 +13,11 @@ const englishTranslations = {
statusHeadline: "Status",
settingsButton: "Settings",
scrollToChatButton: "Chats",
///
backToOverviewAudioLabel: "go back to overview",
chatsHeadline: "Chats",
addChatAudioLabel: "name of new chat",