diff --git a/dist/index.css b/dist/index.css index 8354175a..b44525b0 100644 --- a/dist/index.css +++ b/dist/index.css @@ -5,28 +5,24 @@ gap: var(--large-gap); scroll-snap-type: x mandatory; scroll-behavior: smooth; + overflow: hidden; + overflow-x: scroll; + padding-left: 0px; + padding-right: 0px; + padding-bottom: 0px; } #home-page > div > div { display: flex; flex-direction: column; justify-content: start; gap: var(--gap-between-tiles); + padding: var(--content-padding); width: 100%; min-width: 100%; + height: 100%; + overflow: scroll; 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; diff --git a/dist/index.js b/dist/index.js index 06904e25..ce59f336 100644 --- a/dist/index.js +++ b/dist/index.js @@ -268,12 +268,44 @@ general: { closeButton: "close" }, + regional: { + weekdays: { + full: [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday" + ], + abbreviated: [ + "Sun", + "Mon", + "Tue", + "Wed", + "Thu", + "Fri", + "Sat" + ] + } + }, homePage: { appName: "Comms", /// overviewHeadline: "Overview", - statusHeadline: "Status", - settingsButton: "Settings", + serverAddress: "Server address", + connectAudioLabel: "connect to server", + disconnectAudioLabel: "disconnect from server", + manageConnectionsAudioLabel: "manage connections", + mailboxHeadline: "Server Mailbox", + mailboxDisabled: "Mailbox disabled. You will miss out on messages sent while you're away", + mailboxEnabled: "Mailbox enabled. If you disconnect, the server will keep your messages temporarily", + outboxHeadline: "Outbox", + outboxAllItemsSent: "All items sent", + yourNameLabel: "Your name", + setNameButton: "Set", + firstDayOfWeekLabel: "First day of week", scrollToChatButton: "Chats", /// backToOverviewAudioLabel: "go back to overview", @@ -295,7 +327,28 @@ // src/View/homePage.tsx function HomePage() { - 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 overviewSection = /* @__PURE__ */ createElement("div", { id: "overview-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.overviewHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.serverAddress), /* @__PURE__ */ createElement("input", null))), /* @__PURE__ */ createElement("div", { class: "flex-row" }, /* @__PURE__ */ createElement( + "button", + { + class: "danger flex justify-center", + "aria-label": translations.homePage.disconnectAudioLabel + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "link_off") + ), /* @__PURE__ */ createElement( + "button", + { + class: "flex justify-center", + "aria-label": translations.homePage.manageConnectionsAudioLabel + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "build") + ), /* @__PURE__ */ createElement( + "button", + { + class: "primary flex justify-center", + "aria-label": translations.homePage.connectAudioLabel + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "link") + )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "inbox"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.homePage.mailboxHeadline), /* @__PURE__ */ createElement("span", { class: "error" }, translations.homePage.mailboxDisabled))), /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "outbox"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.homePage.outboxHeadline), /* @__PURE__ */ createElement("span", { class: "success" }, translations.homePage.outboxAllItemsSent))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "account_circle"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.yourNameLabel), /* @__PURE__ */ createElement("input", null))), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, /* @__PURE__ */ createElement("button", { class: "width-50" }, translations.homePage.setNameButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "check"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "calendar_month"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.firstDayOfWeekLabel), /* @__PURE__ */ createElement("select", null))), /* @__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", { @@ -390,7 +443,7 @@ // connection socketAddress: `${DATA_VERSION}/connection/socket-address`, // settings - userName: `${DATA_VERSION}/settings/user-name`, + username: `${DATA_VERSION}/settings/user-name`, firstDayOfWeek: `${DATA_VERSION}/settings/first-day-of-week`, // history previousAddresses: `${DATA_VERSION}/history/previous-addresses`, diff --git a/dist/styles.css b/dist/styles.css index b9d9aa2c..28739b72 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -863,7 +863,9 @@ code { .secondary, .secondary *, .helper-text, -.error-text, +.error, +.warning, +.success, label.tile > div > span:not(.icon) { font-size: 0.9rem; } diff --git a/src/View/homePage.css b/src/View/homePage.css index 4331c954..28cb25c1 100644 --- a/src/View/homePage.css +++ b/src/View/homePage.css @@ -6,6 +6,12 @@ scroll-snap-type: x mandatory; scroll-behavior: smooth; + overflow: hidden; + overflow-x: scroll; + + padding-left: 0px; + padding-right: 0px; + padding-bottom: 0px; } #home-page > div > div { @@ -14,28 +20,16 @@ justify-content: start; gap: var(--gap-between-tiles); + padding: var(--content-padding); width: 100%; min-width: 100%; + height: 100%; + overflow: scroll; 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; diff --git a/src/View/homePage.tsx b/src/View/homePage.tsx index 9d7560a8..08be8573 100644 --- a/src/View/homePage.tsx +++ b/src/View/homePage.tsx @@ -10,16 +10,82 @@ export function HomePage() {

{translations.homePage.overviewHeadline}

-
+ + +
+ + + +
+ +
+ +
+ inbox +
+ {translations.homePage.mailboxHeadline} + + {translations.homePage.mailboxDisabled} +
- + +
+ outbox +
+ {translations.homePage.outboxHeadline} + + {translations.homePage.outboxAllItemsSent} + +
+
+ +
+ + +
+ +
+ +
+ +
diff --git a/src/View/translations.ts b/src/View/translations.ts index 63120e7c..b29bc6a4 100644 --- a/src/View/translations.ts +++ b/src/View/translations.ts @@ -3,6 +3,29 @@ const englishTranslations = { closeButton: "close", }, + regional: { + weekdays: { + full: [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + ], + abbreviated: [ + "Sun", + "Mon", + "Tue", + "Wed", + "Thu", + "Fri", + "Sat", + ], + }, + }, + homePage: { appName: "Comms", @@ -10,8 +33,22 @@ const englishTranslations = { overviewHeadline: "Overview", - statusHeadline: "Status", - settingsButton: "Settings", + serverAddress: "Server address", + connectAudioLabel: "connect to server", + disconnectAudioLabel: "disconnect from server", + manageConnectionsAudioLabel: "manage connections", + + mailboxHeadline: "Server Mailbox", + mailboxDisabled: "Mailbox disabled. You will miss out on messages sent while you're away", + mailboxEnabled: "Mailbox enabled. If you disconnect, the server will keep your messages temporarily", + + outboxHeadline: "Outbox", + outboxAllItemsSent: "All items sent", + + yourNameLabel: "Your name", + setNameButton: "Set", + + firstDayOfWeekLabel: "First day of week", scrollToChatButton: "Chats", @@ -27,11 +64,9 @@ const englishTranslations = { settings: { settingsHeadline: "Settings", - - /// - - } + /// + }, }; const allTranslations: { [language: string]: typeof englishTranslations } = {