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
src/View/homePage.tsx
+56 -31
View File
@@ -5,43 +5,68 @@ import * as React from "bloatless-react";
import { translations } from "./translations";
export function HomePage() {
// sections
const overviewSection = (
<div id="overview-section">
<h2>{translations.homePage.overviewHeadline}</h2>
<div class="tile flex-no">
<span class="icon">cell_tower</span>
<div>
<b>{translations.homePage.statusHeadline}</b>
</div>
</div>
<button class="tile flex-no">
<span class="icon">settings</span>
<div>{translations.homePage.settingsButton}</div>
</button>
<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>
<div class="flex-row width-input">
<input
placeholder={translations.homePage.addChatPlaceholder}
aria-label={translations.homePage.addChatAudioLabel}
></input>
<button
class="primary"
aria-label={translations.homePage.addChatButton}
>
<span class="icon">add</span>
</button>
</div>
</div>
);
// methods
function scrollToChat() {
chatSection.scrollIntoView();
}
// final
return (
<article id="home-page">
<header>
<span>{translations.homePage.appName}</span>
</header>
<div>
<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>
</div>
</div>
<button class="tile flex-no">
<span class="icon">settings</span>
<div>{translations.homePage.settingsButton}</div>
</button>
</div>
<div id="chat-section">
<h2>{translations.homePage.chatsHeadline}</h2>
<div class="flex-row width-input">
<input
placeholder={translations.homePage.addChatPlaceholder}
aria-label={translations.homePage.addChatAudioLabel}
></input>
<button
class="primary"
aria-label={translations.homePage.addChatButton}
>
<span class="icon">add</span>
</button>
</div>
</div>
{overviewSection}
{chatSection}
</div>
</article>
);