Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unify navbars #233

Open
wants to merge 24 commits into
base: main
Choose a base branch
from
Open

Unify navbars #233

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
98f92d8
update packages
MaHaWo Mar 7, 2025
3b1f614
automate darkstyle, remove upper navbar
MaHaWo Mar 7, 2025
1a342b6
work on the navigation system
MaHaWo Mar 7, 2025
7472511
finalize sidebar
MaHaWo Mar 7, 2025
7c6c4cb
remove avatar from navbar
MaHaWo Mar 7, 2025
273d50f
extend breadcrumbs
MaHaWo Mar 7, 2025
7fbfea6
change some styling
MaHaWo Mar 7, 2025
cc8c8db
finish mobile drawer
MaHaWo Mar 7, 2025
ea0d64a
delete obsolete file
MaHaWo Mar 7, 2025
2b33de2
restore layout title
MaHaWo Mar 7, 2025
76f1676
Make language selection appear in Sidebar for logged in users, and re…
jmsssc Mar 11, 2025
976ddb0
Put language chooser in the sidebar, give it an icon, and move mobile…
jmsssc Mar 11, 2025
6849f57
Change home page to have log in / Register options (primary focus Reg…
jmsssc Mar 11, 2025
0d7b934
Remove overwriting and unused styling/imports from new login button o…
jmsssc Mar 11, 2025
d532f56
Reactivate dark mode option and make the button colours for the new b…
jmsssc Mar 11, 2025
d9c573f
Refactor DarkModeChooser into it's own component and reference it whe…
jmsssc Mar 11, 2025
04298d7
Refactor: Remove unused imports
jmsssc Mar 11, 2025
9323779
Refactor: Fix navigation to react to page changes on client side, so …
jmsssc Mar 11, 2025
ccf9eba
Correct the margins so buttons on front page align vertically on mobi…
jmsssc Mar 11, 2025
4cc3956
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Mar 11, 2025
d3818de
Merge branch 'main' into unify-navbars
MaHaWo Mar 12, 2025
324a41c
Fix the light/dark colours for the sidebar button when logged in on m…
jmsssc Mar 12, 2025
b601821
Set i18n translation key for a previously hardcoded string
jmsssc Mar 12, 2025
5ff3d42
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Mar 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,35 +15,35 @@
},
"devDependencies": {
"@hey-api/openapi-ts": "0.55.2",
"@playwright/test": "^1.49.1",
"@sveltejs/adapter-static": "^3.0.6",
"@sveltejs/kit": "^2.8.0",
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"@tailwindcss/typography": "^0.5.15",
"@testing-library/svelte": "^5.2.4",
"@playwright/test": "^1.50.1",
"@sveltejs/adapter-static": "^3.0.8",
"@sveltejs/kit": "^2.18.0",
"@sveltejs/vite-plugin-svelte": "^4.0.4",
"@tailwindcss/typography": "^0.5.16",
"@testing-library/svelte": "^5.2.7",
"@types/eslint": "^9.6.1",
"@types/node": "^22.10.2",
"@vitest/coverage-v8": "^2.1.4",
"@types/node": "^22.13.9",
"@vitest/coverage-v8": "^2.1.9",
"autoprefixer": "^10.4.20",
"flowbite": "^2.5.2",
"flowbite-svelte": "^0.47.3",
"flowbite-svelte": "^0.47.4",
"flowbite-svelte-icons": "2.0.2",
"globals": "^15.12.0",
"globals": "^15.15.0",
"jsdom": "^25.0.1",
"svelte": "^5.1.16",
"svelte-check": "^4.0.7",
"tailwindcss": "^3.4.14",
"typescript": "^5.6.3",
"typescript-eslint": "^8.14.0",
"vite": "^5.4.11",
"vitest": "^2.1.4"
"svelte": "^5.22.5",
"svelte-check": "^4.1.4",
"tailwindcss": "^3.4.17",
"typescript": "^5.8.2",
"typescript-eslint": "^8.26.0",
"vite": "^5.4.14",
"vitest": "^2.1.9"
},
"type": "module",
"dependencies": {
"@hey-api/client-fetch": "0.4.3",
"@unovis/ts": "1.5.0-beta.0",
"cdigit": "^4.0.2",
"iso-639-1": "3.1.3",
"svelte-dnd-action": "^0.9.52"
"svelte-dnd-action": "^0.9.57"
}
}
1,913 changes: 998 additions & 915 deletions frontend/pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 11 additions & 3 deletions frontend/src/lib/components/ChildrenFeedback.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
import Breadcrumbs from "$lib/components/Navigation/Breadcrumbs.svelte";
import { i18n } from "$lib/i18n.svelte";
import { currentChild } from "$lib/stores/childrenStore.svelte";
import { activeTabChildren } from "$lib/stores/componentStore";
import { activePage } from "$lib/stores/componentStore";
import { user } from "$lib/stores/userStore.svelte";
import {
Accordion,
Expand All @@ -35,6 +35,7 @@ import {
CheckCircleSolid,
CloseCircleSolid,
ExclamationCircleSolid,
GridPlusSolid,
UserSettingsOutline,
} from "flowbite-svelte-icons";
import AlertMessage from "./AlertMessage.svelte";
Expand Down Expand Up @@ -81,17 +82,24 @@ let milestonePresentation = $state([
},
]);
const breadcrumbdata: any[] = [
{
label: i18n.tr.childData.overviewLabel,
onclick: () => {
activePage.set("childrenGallery");
},
symbol: GridPlusSolid,
},
{
label: currentChild.name,
onclick: () => {
activeTabChildren.set("childrenRegistration");
activePage.set("childrenRegistration");
},
symbol: UserSettingsOutline,
},
{
label: i18n.tr.milestone.feedbackTitle,
onclick: () => {
activeTabChildren.set("childrenFeedback");
activePage.set("childrenFeedback");
},
symbol: ChartLineUpOutline,
},
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/lib/components/ChildrenGallery.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import CardDisplay from "$lib/components/DataDisplay/CardDisplay.svelte";
import GalleryDisplay from "$lib/components/DataDisplay/GalleryDisplay.svelte";
import { i18n } from "$lib/i18n.svelte";
import { currentChild } from "$lib/stores/childrenStore.svelte";
import { activeTabChildren } from "$lib/stores/componentStore";
import { activePage } from "$lib/stores/componentStore";
import { type CardElement, type CardStyle } from "$lib/util";
import { Heading, Spinner } from "flowbite-svelte";
import AlertMessage from "./AlertMessage.svelte";
Expand Down Expand Up @@ -87,7 +87,7 @@ async function setup(): Promise<CardElement[]> {
onclick: async () => {
currentChild.id = child.id;
await currentChild.load_data();
activeTabChildren.set("childrenRegistration");
activePage.set("childrenRegistration");
},
},
};
Expand All @@ -103,7 +103,7 @@ async function setup(): Promise<CardElement[]> {
events: {
onclick: () => {
currentChild.id = null;
activeTabChildren.set("childrenRegistration");
activePage.set("childrenRegistration");
},
},
},
Expand Down Expand Up @@ -141,7 +141,7 @@ const searchData = [
/>
{/if}

<div class="container m-2 mx-auto w-full pb-4 md:rounded-t-lg">
<div class="m-2 mx-auto w-full pb-4 md:rounded-t-lg">

<Heading
tag="h1"
Expand Down
21 changes: 16 additions & 5 deletions frontend/src/lib/components/ChildrenRegistration.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,12 @@ import DataInput from "$lib/components/DataInput/DataInput.svelte";
import Breadcrumbs from "$lib/components/Navigation/Breadcrumbs.svelte";
import { i18n } from "$lib/i18n.svelte";
import { currentChild } from "$lib/stores/childrenStore.svelte";
import { activeTabChildren, componentTable } from "$lib/stores/componentStore";
import { activePage, componentTable } from "$lib/stores/componentStore";
import { preventDefault } from "$lib/util";
import { Button, Card, Heading, Hr, Input, Spinner } from "flowbite-svelte";
import {
CheckCircleOutline,
GridPlusSolid,
PlayOutline,
TrashBinOutline,
UserSettingsOutline,
Expand Down Expand Up @@ -61,9 +62,19 @@ let alertMessage: string = $state(i18n.tr.childData.alertMessageMissing);
let showAlert = $state(false);
let childLabel = $derived(name ? name : i18n.tr.childData.newChildHeadingLong);
let breadcrumbdata = $derived([
{
label: i18n.tr.childData.overviewLabel,
onclick: () => {
activePage.set("childrenGallery");
},
symbol: GridPlusSolid,
},
{
label: childLabel,
symbol: UserSettingsOutline,
onclick: () => {
activePage.set("childrenRegistration");
},
},
]);

Expand Down Expand Up @@ -255,7 +266,7 @@ async function submitData(): Promise<void> {

// disable all elements to make editing a conscious choice amd go back to childrenGallery
console.log("submission of child data successful.");
activeTabChildren.set("childrenGallery");
activePage.set("childrenGallery");
}
</script>

Expand Down Expand Up @@ -418,7 +429,7 @@ async function submitData(): Promise<void> {
type="button"
color="green"
on:click={() => {
activeTabChildren.set("milestoneGroup");
activePage.set("milestoneGroup");
}}
>
<PlayOutline size='sm'/>
Expand All @@ -429,7 +440,7 @@ async function submitData(): Promise<void> {
color = "yellow"
type ="button"
onclick={() => {
activeTabChildren.set("childrenFeedback");
activePage.set("childrenFeedback");
}}
>
<PlayOutline size='sm'/>
Expand Down Expand Up @@ -460,7 +471,7 @@ async function submitData(): Promise<void> {
alertMessage=i18n.tr.childData.alertMessageError + response.error.detail;
}
else {
activeTabChildren.update((value) => {
activePage.update((value) => {
return "childrenGallery";
});
currentChild.id = null;
Expand Down
12 changes: 12 additions & 0 deletions frontend/src/lib/components/DarkModeChooser.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<script>
import FunctionalIcon from "$lib/components/Navigation/FunctionalIcon.svelte";
import { DarkMode } from "flowbite-svelte";
import { MoonSolid, SunSolid } from "flowbite-svelte-icons";
</script>

<FunctionalIcon tooltip={'Darkmode ein- oder ausschalten'}>
Copy link
Member

@lkeegan lkeegan Mar 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this german tooltip text can be added somewhere in https://github.com/ssciwr/mondey/blob/main/frontend/src/lib/translations.ts
and referenced here, e.g. something like

...
import { i18n } from "$lib/i18n.svelte";
...
tooltip={i18n.tr.frontpage.toggleDarkmode}

then in the admin interface in the deployed version translations can be added for other languages

Copy link
Collaborator

@jmsssc jmsssc Mar 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the review @lkeegan

Ah good catch sure absolutely the Hamburger icon is an issue on dark mode, that's wrong. I made the icon bigger but I can return it to the same size as the non-logged in icon (lg rather than xl) and make it turn white in dark mode. And maybe remove the background color of it's container if it messes with the UI. I will make the tooltip a translation key too.

On the other couple of things: The LocaleChooser I thought wasn't functional yet throughout, but absolutely I will look at why it might not work now and get it working on this branch. Einstellung is the same, it was like that so I did not change it or think anything was awry as I didn't realize it worked differently on main. I will look at code in main where I see it allows you to change your password and set locale, and get it working on this branch.

<DarkMode class="apply-icon-style">
<MoonSolid slot="darkIcon" />
<SunSolid slot="lightIcon" />
</DarkMode>
</FunctionalIcon>
14 changes: 10 additions & 4 deletions frontend/src/lib/components/FrontPageCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang='ts'>
import { goto } from "$app/navigation";
import { i18n } from "$lib/i18n.svelte";
import { Button, Card, Tooltip } from "flowbite-svelte";
import { Button, Card } from "flowbite-svelte";
</script>

<div class="flex justify-center px-4 mt-6">
Expand All @@ -10,10 +10,16 @@ import { Button, Card, Tooltip } from "flowbite-svelte";
<p class="mb-5 text-base text-gray-600 sm:text-md dark:text-gray-400">{i18n.tr.frontpage.summary}</p>
<div class="justify-center mb-1 items-center mt-2">

<Button class="text-bold text-md w-44 dark:bg-gray-100 hover:bg-gray-600 dark:hover:bg-gray-600 hover:text-white bg-white text-gray-700" onclick ={() => {

<Button class="text-bold text-md w-44 mb-2 m-1 dark:bg-gray-100 hover:bg-gray-600 dark:hover:bg-gray-600 hover:text-white bg-white text-gray-700" onclick ={() => {
goto("/signup");
}}>{i18n.tr.frontpage.buttonLabel}</Button>
<Tooltip>{i18n.tr.frontpage.toolTip}</Tooltip>
</div>

<Button class="text-bold text-md w-44 m-1 dark:text-white transition-colors hover:bg-gray-600 dark:hover:bg-gray-600 hover:text-white max-lg:hover:bg-primary-800 bg-primary-600 text-white" onclick ={() => {
goto("/userLand/userLogin");
}}>
{i18n.tr.login.profileButtonLabelDefault}
</Button>
</div>
</Card>
</div>
12 changes: 9 additions & 3 deletions frontend/src/lib/components/LocaleChooser.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
<script lang="ts">
import { i18n } from "$lib/i18n.svelte";
import { Dropdown, DropdownItem } from "flowbite-svelte";
import { ChevronDownOutline } from "flowbite-svelte-icons";
import { ChevronDownOutline, LanguageOutline } from "flowbite-svelte-icons";

let dropdownOpen = false;
let { withIcon = false }: { withIcon?: boolean } = $props();

let dropdownOpen = $state(false);
</script>

<div class="flex">
<div class="flex m-1 p-1">

<button
id="locale-button"
class="z-10 inline-flex flex-shrink-0 items-center rounded-lg bg-gray-100 px-4 py-2.5 text-center text-sm font-medium text-gray-500 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-700"
type="button"
>
{#if withIcon}
<LanguageOutline size="lg" />
{/if}
{i18n.locale}
<ChevronDownOutline class="ms-2 h-6 w-6" />
</button>
Expand Down
18 changes: 13 additions & 5 deletions frontend/src/lib/components/Milestone.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,15 @@ import SubmitMilestoneImageModal from "$lib/components/DataInput/SubmitMilestone
import MilestoneButton from "$lib/components/MilestoneButton.svelte";
import { i18n } from "$lib/i18n.svelte";
import { currentChild } from "$lib/stores/childrenStore.svelte";
import { activeTabChildren } from "$lib/stores/componentStore";
import { activePage } from "$lib/stores/componentStore";
import { contentStore } from "$lib/stores/contentStore.svelte";
import { Accordion, AccordionItem, Button, Checkbox } from "flowbite-svelte";
import {
ArrowLeftOutline,
ArrowRightOutline,
EditOutline,
GridOutline,
GridPlusSolid,
InfoCircleSolid,
QuestionCircleSolid,
RectangleListOutline,
Expand Down Expand Up @@ -83,7 +84,7 @@ async function nextMilestone() {
currentMilestoneIndex + 1 ===
contentStore.milestoneGroupData.milestones.length
) {
activeTabChildren.set("milestoneOverview");
activePage.set("milestoneOverview");
return;
}
currentMilestoneIndex += 1;
Expand Down Expand Up @@ -145,24 +146,31 @@ let currentImageIndex = $state(0);
let showSubmitMilestoneImageModal = $state(false);
const promise = setup();
const breadcrumbdata = $derived([
{
label: i18n.tr.childData.overviewLabel,
onclick: () => {
activePage.set("childrenGallery");
},
symbol: GridPlusSolid,
},
{
label: currentChild.name,
onclick: () => {
activeTabChildren.set("childrenRegistration");
activePage.set("childrenRegistration");
},
symbol: UserSettingsOutline,
},
{
label: i18n.tr.milestone.groupOverviewLabel,
onclick: () => {
activeTabChildren.set("milestoneGroup");
activePage.set("milestoneGroup");
},
symbol: RectangleListOutline,
},
{
label: contentStore.milestoneGroupData.text[i18n.locale].title,
onclick: () => {
activeTabChildren.set("milestoneOverview");
activePage.set("milestoneOverview");
},
symbol: GridOutline,
},
Expand Down
19 changes: 15 additions & 4 deletions frontend/src/lib/components/MilestoneGroup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ import GalleryDisplay from "$lib/components/DataDisplay/GalleryDisplay.svelte";
import Breadcrumbs from "$lib/components/Navigation/Breadcrumbs.svelte";
import { i18n } from "$lib/i18n.svelte";
import { currentChild } from "$lib/stores/childrenStore.svelte";
import { activeTabChildren } from "$lib/stores/componentStore";
import { activePage } from "$lib/stores/componentStore";
import { contentStore } from "$lib/stores/contentStore.svelte";
import { Spinner } from "flowbite-svelte";
import {
GridPlusSolid,
RectangleListOutline,
UserSettingsOutline,
} from "flowbite-svelte-icons";
Expand Down Expand Up @@ -95,7 +96,7 @@ async function setup(): Promise<any> {
progress: computeProgress(item.milestones, answerSession.data),
events: {
onclick: () => {
activeTabChildren.set("milestoneOverview");
activePage.set("milestoneOverview");
contentStore.milestoneGroup = item.id;
contentStore.milestoneGroupData = item;
},
Expand All @@ -108,16 +109,26 @@ async function setup(): Promise<any> {
}

const breadcrumbdata: any[] = [
{
label: i18n.tr.childData.overviewLabel,
onclick: () => {
activePage.set("childrenGallery");
},
symbol: GridPlusSolid,
},
{
label: currentChild.name,
symbol: UserSettingsOutline,
onclick: () => {
activeTabChildren.set("childrenRegistration");
activePage.set("childrenRegistration");
},
},
{
label: i18n.tr.milestone.groupOverviewLabel,
symbol: RectangleListOutline,
onclick: () => {
activePage.set("milestoneGroup");
},
},
];

Expand Down Expand Up @@ -227,7 +238,7 @@ const searchData: any[] = [
</div>
{:catch error}
<AlertMessage message={`${i18n.tr.milestone.alertMessageError} ${error}`} onclick={() => {
activeTabChildren.set("milestoneOverview");
activePage.set("milestoneOverview");
showAlert = false;
}}/>
{/await}
Loading