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

improve home page layout

Browse Source
This commit is contained in:
marlon-erler
2026-09-30 13:40:40 +02:00
parent d3f3a1db21
commit f5a4a2d8ae
4 changed files with 592 additions and 631 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/View/homePage.css
+26 -33
View File
@@ -1,15 +1,27 @@
#home-page {
overflow: auto;
padding: var(--content-padding);
min-width: unset;
max-width: 1000px;
}
#home-page > h1 {
font-size: 3rem;
font-family: IBM Plex Sans Thin;
}
#home-page > div {
position: relative;
display: flex;
flex-direction: row;
gap: var(--large-gap);
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
overflow: hidden;
overflow-x: scroll;
flex-wrap: wrap;
padding: 0px;
height: auto;
overflow: visible;
}
#home-page > div > div {
@@ -18,22 +30,9 @@
justify-content: start;
gap: var(--gap-between-tiles);
padding: var(--content-padding);
padding-top: calc(var(--header-height) + var(--content-margin));
width: 100%;
min-width: 100%;
height: 100%;
overflow-y: auto;
scroll-snap-align: center;
}
#home-page #overview-section,
#home-page #chat-section {
padding-bottom: calc(
var(--content-padding) + var(--header-height) + var(--safe-area-bottom)
);
}
#home-page #chat-grid {
@@ -47,7 +46,7 @@
@media (min-width: 640px) {
#home-page > div {
overflow-x: hidden;
gap: var(--content-padding);
}
#home-page #overview-section {
@@ -61,19 +60,13 @@
}
}
@media (min-width: 1200px) {
#home-page #overview-section,
#home-page #chat-section {
padding-left: 3rem;
padding-right: 3rem;
@media (min-width: 1000px) {
#home-page > div {
gap: var(--large-gap);
}
#home-page #chat-grid {
margin-top: 3rem;
}
#home-page #overview-section {
width: var(--max-input-width);
min-width: var(--max-input-width);
#home-page > h1 {
padding-top: 3rem;
padding-bottom: 1rem;
}
}
src/View/homePage.tsx
+6 -19
View File
@@ -18,11 +18,11 @@ export function HomePage(
fileTransferViewModel: FileTransferViewModel,
chatListViewModel: ChatListViewModel,
) {
const greeting = React.createProxyState([settingsViewModel.username], ()=>coreViewModel.translations.homePage.greeting(settingsViewModel.username.value));
// sections
const overviewSection = (
<div id="overview-section">
<h2>{coreViewModel.translations.homePage.overviewHeadline}</h2>
<label class="tile flex-no">
<span class="icon">cell_tower</span>
<div>
@@ -117,23 +117,12 @@ export function HomePage(
<span class="icon">update</span>
</button>
<div class="mobile-only">
<hr></hr>
<div class="flex-row justify-end">
<button class="ghost width-50" on:click={scrollToChat}>
{coreViewModel.translations.homePage.scrollToChatButton}
<span class="icon">arrow_forward</span>
</button>
</div>
</div>
<hr class="mobile-only"></hr>
</div>
);
const chatSection = (
<div id="chat-section">
<h2>{coreViewModel.translations.homePage.chatsHeadline}</h2>
<div class="flex-row width-input">
<input
placeholder={
@@ -157,6 +146,8 @@ export function HomePage(
</button>
</div>
<hr></hr>
<div
id="chat-grid"
children:append={[
@@ -167,14 +158,10 @@ export function HomePage(
</div>
);
// methods
function scrollToChat() {
chatSection.scrollIntoView();
}
// final
return (
<article id="home-page">
<h1 subscribe:innerText={greeting}></h1>
<div>
{overviewSection}
{chatSection}
src/View/translations.ts
+3 -21
View File
@@ -54,11 +54,10 @@ const englishTranslations = {
homePage: {
appName: "Coordination Tool",
greeting: (name: string) => `Hi ${name}!`,
///
overviewHeadline: "Overview",
serverAddress: "Server address",
serverAddressPlaceholder: "wss://192.168.0.69:3000",
connectAudioLabel: "connect to server",
@@ -71,13 +70,8 @@ const englishTranslations = {
updateButton: (version: string) => `Update to ${version}`,
scrollToChatButton: "Chats",
///
backToOverviewAudioLabel: "go back to overview",
chatsHeadline: "Chats",
addChatAudioLabel: "name of new chat",
addChatPlaceholder: "Add chat",
addChatButton: "Add chat",
@@ -438,8 +432,7 @@ export const allTranslations: {
homePage: {
appName: "Coordination Tool",
overviewHeadline: "Übersicht",
greeting: (name: string) => `Hi ${name}!`,
serverAddress: "Serveradresse",
serverAddressPlaceholder: "wss://192.168.0.69:3000",
@@ -453,11 +446,6 @@ export const allTranslations: {
updateButton: (version: string) => `Aktualisieren: ${version}`,
scrollToChatButton: "Chats",
backToOverviewAudioLabel: "zurück zur übersicht",
chatsHeadline: "Chats",
addChatAudioLabel: "Name des neuen Chats",
addChatPlaceholder: "Chat hinzufügen",
addChatButton: "Chat hinzufügen",
@@ -786,8 +774,7 @@ export const allTranslations: {
homePage: {
appName: "Coordination Tool",
overviewHeadline: "Resumen",
greeting: (name: string) => `Hola ${name}!`,
serverAddress: "Dirección del servidor",
serverAddressPlaceholder: "wss://192.168.0.69:3000",
@@ -801,11 +788,6 @@ export const allTranslations: {
updateButton: (version: string) => `Actualizar a ${version}`,
scrollToChatButton: "Chats",
backToOverviewAudioLabel: "volver al resumen",
chatsHeadline: "Chats",
addChatAudioLabel: "nombre del nuevo chat",
addChatPlaceholder: "Añadir chat",
addChatButton: "Añadir chat",
src/base.css
+2 -3
View File
@@ -9,9 +9,8 @@
/* Gradient */
#background-wrapper {
position: fixed;
inset: 0px;
inset: -80px;
transform: scale(1.2);
filter: blur(40px);
z-index: 1;
@@ -144,6 +143,6 @@ body[theme="dark"] #background-wrapper #grass-2 {
}
body[keystroke-active] [ctkeystroke]::after {
opacity: 1;
opacity: .7;
transform: translateY(0px);
}