Skip to content
Snippets Groups Projects
Commit 2738b638 authored by Kai Oliver Meister's avatar Kai Oliver Meister :cow2:
Browse files

restoring the finished and functional previous layout to obtain control over... 

restoring the finished and functional previous layout to obtain control over component ids for e2e-testing
parent a2cf850b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/lib/components/ThemeToggle.svelte
+ 16
− 10
View file @ 2738b638
......@@ -6,7 +6,7 @@
let isDark = $state(false);
let isStateInitialized = $state(false);
function toggle() {
function toggle_darkmode() {
setMode(!isDark);
}
......@@ -59,15 +59,21 @@
</script>
</svelte:head>
<!--
TODO not binding `checked` to `isDark` since I want the inverse, and can't be bothered to invert the logic rn.
controlClasses="bg-surface-300-700 dark:bg-surface-700-300"
controlActive=""
controlInactive=""
-->
<!-- Dark Mode Button -->
<button
class="btn w-36 shrink-0 variant-outline-soft-primary-200 dark:variant-outline-soft-slate-200"
onclick={toggle_darkmode}
>
{#if isDark === true}
<div>Dark Mode</div>
<Moon fill="gray"/>
{:else}
<div>Light Mode</div>
<Sun fill="yellow"/>
{/if}
</button>
<!--
<Switch name="theme-mode" onCheckedChange={toggle} checked={!isDark} disabled={!isStateInitialized}>
{#snippet activeChild()}<Sun color="gold" size={14} />{/snippet}
{#snippet inactiveChild()}<Moon color="silver" size={14} />{/snippet}
</Switch>
</Switch> -->
src/lib/stores/layout.svelte.ts
+ 65
− 68
View file @ 2738b638
......@@ -11,76 +11,73 @@ import {
ListTodoIcon,
ClipboardListIcon
} from 'lucide-svelte';
// the reason for moving away from lucide again is that you
// cant pass lucide-icons around if you need to configure them
const tutorSidebarContent: SidebarContent = {
items: [
// {
// title: 'Home',
// description: 'General Exam Overview',
// icon: HomeIcon,
// href: '/home'
// },
{
title: 'Submissions',
description: 'Submission Overview',
icon: ClipboardListIcon,
href: '/submissions'
},
{
title: 'Statistics',
description: 'Submission Statistics',
icon: ChartColumnIncreasingIcon,
href: '/submissions/statistics'
},
{
title: 'Feedback History',
description: 'Review Feedback On Your Corrections',
icon: MessagesSquareIcon, // MessagesSquareWarningIcon
href: '/feedback_hist'
},
{
title: 'Dashboard',
description: 'Compact Overview',
icon: LayoutDashboardIcon,
href: '/assignments/overview'
}
]
};
export const tutorSidebarContent: SidebarContent = [
{
title: 'Home',
descr: 'General Exam Overview',
icon: 'material-symbols:house',
href: '/',
label: 'nav_home'
},
{
title: 'Assignments',
descr: 'Assignment Overview',
icon: 'material-symbols:dashboard-outline-rounded',
href: '/assignments/overview',
label: 'nav_assignment_overview'
},
{
title: 'Statistics',
descr: 'Submission Statistics',
icon: 'material-symbols:bar-chart-4-bars',
href: '/statistics',
label: 'nav_statistics'
}
];
const reviewerSidebarContent: SidebarContent = {
items: [
{
title: 'Students',
description: 'Student List',
icon: UsersIcon,
href: '/students/overview'
},
{
title: 'User Table',
description: 'Complete user table',
icon: UserPenIcon,
href: '/admin/users'
},
{
title: 'Overview',
description: 'Full State of Correction',
icon: ListTodoIcon,
href: '/full_overview'
},
{
title: 'Dashboard',
description: 'Compact Overview',
icon: LayoutDashboardIcon,
href: '/assignments/overview'
},
{
title: 'Debug',
description: 'Debugging and Data',
icon: BugIcon,
href: '/debug'
}
]
};
export const reviewerSidebarContent: SidebarContent = [
{
title: 'Participants',
descr: 'Student List',
icon: 'material-symbols:person-edit-outline',
href: '/students/overview',
label: 'nav_participant_overview'
},
{
title: 'Feedback History',
descr: 'Review provided Feedback',
icon: 'material-symbols:feedback-outline-rounded',
href: '/feedback_hist',
label: 'nav_feedback_hist'
},
{
title: 'Overview',
descr: 'Full State of Correction',
icon: 'material-symbols:list-alt-outline',
href: '/full_overview',
label: 'nav_full_overview'
}
];
export const adminSidebarContent: SidebarContent = [
{
title: 'User Table',
descr: 'Complete user table',
icon: 'material-symbols:person-search-outline',
href: '/admin/users',
label: 'nav_usertable'
},
{
title: 'Debug',
descr: 'Debugging and Data',
icon: 'material-symbols:bug-report',
href: '/debug',
label: 'nav_debug'
}
];
const devSidebarContent: SidebarContent = {
items: [
......
src/routes/(app)/+layout.svelte
+ 185
− 43
View file @ 2738b638
<script lang="ts">
import SideBar from '$lib/components/SideBar.svelte';
import "/src/app.pcss";
import { page } from "$app/stores";
// https://iconify.design/docs/icon-components/svelte/
// https://icon-sets.iconify.design/material-symbols/?query=chart
import Icon from "@iconify/svelte";
import { CircleUser } from 'lucide-svelte';
// import { getAuth } from "$lib/surreal";
import ThemeToggle from "$lib/components/ThemeToggle.svelte";
import GradyDivider from "$lib/components/GradyDivider.svelte";
import SubTypeMenu from "$lib/components/SubTypeMenu.svelte";
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
// let role = "Tutor";
let role = "Admin";
import {
tutorSidebarContent,
reviewerSidebarContent,
adminSidebarContent
} from '$lib/stores/layout.svelte';
console.log(tutorSidebarContent)
let { children } = $props();
// let headerElement: HTMLElement | null = null;
// let headerHeight: number | null = $state(null);
// onMount(() => {
// const updateHeaderHeight = () => {
// if (headerElement !== null) {
// headerHeight = headerElement.offsetHeight;
// }
// };
let collapsed = $state(false);
// updateHeaderHeight();
// window.addEventListener('resize', updateHeaderHeight);
// return () => {
// window.removeEventListener('resize', updateHeaderHeight);
// };
// });
let { children } = $props();
</script>
<div class="grid h-screen grid-rows-[auto_1fr_auto]">
<!-- Header -->
<header
class="text-slate-50-950 grid grid-cols-3 items-center gap-4 px-4 py-2 bg-primary-200-800"
>
<div class="justify-self-start">
<p class="text-2xl font-extrabold">
<div class="flex flex-col h-full">
<!-- the topbar that's always visible -->
<header class="grid grid-cols-2 z-10 content-center
bg-primary-700 dark:bg-primary-900 text-white dark:text-white">
<div class="flex justify-start p-3">
<strong class="text-2xl pt-0.5 text-white dark:text-slate-200">
GRADY
<sup class="-ml-4">(dev)</sup>
</p>
</strong>
<div class="ml-1 text-white dark:text-slate-200">
(dev)
</div>
</div>
<div class="flex justify-end p-3">
<!-- Dark Mode Button -->
<ThemeToggle />
<a
class="btn ml-3 variant-outline-soft-primary-200 dark:variant-outline-soft-slate-200"
href="https://github.com/skeletonlabs/skeleton"
target="_blank"
rel="noreferrer"
>
GitHub
</a>
</div>
<div class="justify-self-center text-xl">(Page Title/breadcrumbs?)</div>
<div class="justify-self-end"><ThemeToggle /></div>
</header>
<!--<nav>(subheader/trail nav)</nav>-->
<!-- Grid Columns -->
<div class="grid grid-cols-1 overflow-hidden md:grid-cols-[auto_1fr]">
<!-- Sidebar -->
<!-- TODO change for small screen sizes -->
<!-- h-full? apply h-screen if sticky -->
<SideBar />
<!-- this has overflow-y set, but never triggers; it just passes it down to the children -->
<div class="flex flex-grow overflow-y-auto">
<!-- the sidebar that's always visible -->
{#if $page.url.pathname !== "/" || true}
<div
class={`shrink-0 ${collapsed ? "w-16" : "w-64"} h-full items-left transition
variant-filled-slate-200 dark:variant-filled-slate-100
overflow-y-scroll overflow-x-hidden scrollbar scrollbar-thin
scrollbar-track-primary-500 scrollbar-thumb-primary-300
dark:scrollbar-track-primary-950 dark:scrollbar-thumb-primary-800`}
>
<aside
class=""
>
<!-- Collapse Button -->
<button
class="flex justify-end w-full pr-2 pb-0.5 text-white hover:text-white
variant-filled-primary-300 hover:variant-filled-primary-200"
on:click = {() => collapsed = !collapsed}
>
{#if !collapsed}
<Icon icon="material-symbols:keyboard-double-arrow-left-rounded" style="font-size: 20px" />
{:else}
<Icon icon="material-symbols:keyboard-double-arrow-right-rounded" style="font-size: 20px" />
{/if}
</button>
<!-- Actual Sidebar Content -->
<div class="w-full space-y-2 pt-2">
<!-- main + footer container (so that the footer scrolls into view after main) -->
<main class="space-y-4 overflow-y-auto p-4 bg-surface-200-800">
<!-- Tutor & Reviewer Nav-Options -->
{#if role === "Tutor" || role === "Reviewer" || role === "Admin"}
<nav class="list-nav">
<ul class="space-y-1">
{#each tutorSidebarContent as nav_item}
<li class={`
hover:rounded-none hover:variant-glass-primary-200 hover:dark:variant-glass-primary-300
${$page.url.pathname == nav_item.href ? "variant-glass-secondary-200" : ""
}`}>
<a
href={nav_item.href}
id={nav_item.label}
class={`flex p-1 ${collapsed ? "" : "transition hover:translate-x-2"}`}
>
<span class={`p-2 ${collapsed ? "ml-0.5" : "ml-2"} mr-4 variant-outline-soft-primary-50 rounded-xl`}>
<Icon icon={nav_item.icon} style="font-size: 26px" />
</span>
{#if !collapsed}
<span class="">
<dt class="font-bold">{nav_item.title}</dt>
<dd class="text-xs opacity-50">{nav_item.descr}</dd>
</span>
{/if}
</a>
</li>
{/each}
</ul>
</nav>
<GradyDivider color="primary" />
{/if}
<!-- Reviewer-Only Nav-Options -->
{#if role === "Reviewer" || role === "Admin"}
<nav class="list-nav">
<ul class="space-y-1">
{#each reviewerSidebarContent as nav_item}
<li class={`
hover:rounded-none hover:variant-glass-primary-200 hover:dark:variant-glass-primary-300
${$page.url.pathname == nav_item.href ? "variant-glass-secondary-200" : ""
}`}>
<a
href={nav_item.href}
id={nav_item.label}
class={`flex p-1 ${collapsed ? "" : "transition hover:translate-x-2"}`}
>
<span class={`p-2 ${collapsed ? "ml-0.5" : "ml-2"} mr-4 variant-outline-soft-primary-50 rounded-xl`}>
<Icon icon={nav_item.icon} style="font-size: 26px" />
</span>
{#if !collapsed}
<span class="">
<dt class="font-bold">{nav_item.title}</dt>
<dd class="text-xs opacity-50">{nav_item.descr}</dd>
</span>
{/if}
</a>
</li>
{/each}
</ul>
</nav>
<GradyDivider color="primary" />
{/if}
<!-- Admin-Only Nav-Options -->
{#if role === "Admin"}
<nav class="list-nav">
<ul class="space-y-1">
{#each adminSidebarContent as nav_item}
<li class={`
hover:rounded-none hover:variant-glass-primary-200 hover:dark:variant-glass-primary-300
${$page.url.pathname == nav_item.href ? "variant-glass-secondary-200" : ""
}`}>
<a
href={nav_item.href}
id={nav_item.label}
class={`flex p-1 ${collapsed ? "" : "transition hover:translate-x-2"}`}
>
<span class={`p-2 ${collapsed ? "ml-0.5" : "ml-2"} mr-4 variant-outline-soft-primary-50 rounded-xl`}>
<Icon icon={nav_item.icon} style="font-size: 26px" />
</span>
{#if !collapsed}
<span class="">
<dt class="font-bold">{nav_item.title}</dt>
<dd class="text-xs opacity-50">{nav_item.descr}</dd>
</span>
{/if}
</a>
</li>
{/each}
</ul>
</nav>
{/if}
<!-- SubType Menu to select which Submissions you want to work on -->
{#if role === "Tutor" || role === "Reviewer" || role === "Admin"}
<SubTypeMenu {collapsed} />
{/if}
<!-- Label Tab (or maybe we make that a Nav-Element ?) -->
<!-- ... -->
</div>
</aside>
</div>
{/if}
<!-- Page Route Content -->
<div class="w-full h-full overflow-y-auto">
{@render children?.()}
</main>
</div>
</div>
<!-- Footer -->
<!--<footer class="bg-blue-500 p-4">(footer)</footer>-->
</div>
<style lang="postcss">
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment