ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLASSROOMIO-T-180: Add better darkmode sidebar background

Browse Source
This commit is contained in:
Rotimi Best
2023-09-30 10:53:38 +01:00
parent 568c3329be
commit 6812895488
3 changed files with 34 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/LMS/SideBar.svelte
+1 -1
View File
@@ -54,7 +54,7 @@
$menu.hidden
? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
: 'translate-x-0 absolute md:relative z-40'
} overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-black h-[calc(100vh-48px)]`}
} overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-neutral-900 h-[calc(100vh-48px)]`}
>
<div class="h-full flex flex-col">
<div class="border-b border-gray-200 pt-5 px-4">
src/lib/components/Org/SideBar.svelte
+1 -1
View File
@@ -63,7 +63,7 @@
$menu.hidden
? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
: 'translate-x-0 absolute md:relative z-40'
} overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-black h-[calc(100vh-48px)] border border-l-0 border-t-0 border-b-0 border-r-1`}
} overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-neutral-900 h-[calc(100vh-48px)] border border-l-0 border-t-0 border-b-0 border-r-1`}
>
<div class="h-full flex flex-col">
<div class="border-b border-gray-200 pt-5 px-4">
src/routes/lms/exercises/+page.svelte
+32 -93
View File
@@ -1,11 +1,7 @@
<script>
import { flip } from 'svelte/animate';
import { dndzone } from 'svelte-dnd-action';
import { page } from '$app/stores';
import Chip from '$lib/components/Chip/index.svelte';
const flipDurationMs = 300;
let sections = [
{
id: 1,
@@ -86,32 +82,6 @@
className: 'text-[#0F9D58] bg-[#E2FEEA]'
}
];
function handleItemFinalize(columnIdx, newItems) {
let itemToWithNewStatus;
const { id } = sections[columnIdx];
// Set column in the UI
sections[columnIdx].items = newItems.map((item) => {
if (item.statusId !== id) {
itemToWithNewStatus = item;
item.statusId = id;
}
return item;
});
}
function handleDndConsiderCards(columnIdx) {
return function (e) {
sections[columnIdx].items = e.detail.items;
};
}
function handleDndFinalizeCards(columnIdx) {
return (e) => handleItemFinalize(columnIdx, e.detail.items);
}
</script>
<section class="w-full max-w-6xl mx-auto">
@@ -122,77 +92,46 @@
<div>
<div class="flex items-center w-full">
{#each sections as { id, title, items, className }, idx (id)}
{#each sections as { title, items, className }}
<div
class="min-w-[355px] max-w-[355px] h-[516px] rounded-md bg-gray-100 dark:bg-black border border-gray-50 p-3 mr-3 overflow-hidden"
animate:flip={{ duration: flipDurationMs }}
class="min-w-[355px] max-w-[355px] h-[516px] rounded-md bg-gray-100 dark:bg-black border border-gray-50 dark:border-neutral-700 p-3 mr-3 overflow-hidden"
>
<div class="flex items-center mb-2 gap-2">
<p class="dark:text-white ml-2 font-bold">{title}</p>
<Chip value={items.length} {className} />
</div>
<div
class="content pr-2 overflow-y-auto mb-3"
use:dndzone={{
items,
flipDurationMs,
dropTargetStyle: { outline: 'blue' }
}}
on:consider={handleDndConsiderCards(idx)}
on:finalize={handleDndFinalizeCards(idx)}
>
{#if items.length === 0}
<div
class="h-[100px]"
use:dndzone={{
items: [], // Empty array for placeholder
flipDurationMs,
dropTargetStyle: { outline: 'blue' }
}}
on:consider={handleDndConsiderCards(idx)}
on:finalize={handleDndFinalizeCards(idx)}
>
<!-- Placeholder content -->
<p class="text-gray-500 dark:text-gray-400 text-left p-2">
drop your {title} exercises here
<div class="content pr-2 overflow-y-auto mb-3">
{#each items as item (item.id)}
<div class=" w-full my-2 mx-0 rounded-md bg-white dark:bg-neutral-800 py-3 px-3">
<a
class="flex w-full items-center cursor-pointer text-black mb-2"
href={`${$page.url.pathname}?submissionId=${item.id}`}
>
<p class="dark:text-white ml-2 text-sm">
{item.student.username}
</p>
</a>
<a
class="text-primary-700 dark:text-white text-md font-bold"
href="{$page.url.pathname}?submissionId={item.id}"
>
{item.exercise.title}
</a>
<a
class="flex items-center no-underline hover:underline text-black my-2"
href="{$page.url?.pathname?.replace('submissions', 'lessons')}/{item.lesson
.id}/exercises/{item.exercise.id}"
>
<p class="dark:text-white text-grey text-sm">
#{item.lesson.title}
{`${item.tutor ? 'created by' + item.tutor.name : ''}`}
</p>
</a>
<p class="dark:text-white text-gray-500 text-xs">
{item.submittedAt}
</p>
</div>
{:else}
{#each items as item (item.id)}
<div
class=" w-full my-2 mx-0 rounded-md bg-white dark:bg-gray-600 py-3 px-3"
animate:flip={{ duration: flipDurationMs }}
>
<a
class="flex w-full items-center cursor-pointer text-black mb-2"
href={`${$page.url.pathname}?submissionId=${item.id}`}
>
<p class="dark:text-white ml-2 text-sm">
{item.student.username}
</p>
</a>
<a
class="text-primary-700 dark:text-white text-md font-bold"
href="{$page.url.pathname}?submissionId={item.id}"
>
{item.exercise.title}
</a>
<a
class="flex items-center no-underline hover:underline text-black my-2"
href="{$page.url?.pathname?.replace('submissions', 'lessons')}/{item.lesson
.id}/exercises/{item.exercise.id}"
>
<p class="dark:text-white text-grey text-sm">
#{item.lesson.title}
{`${item.tutor ? 'created by' + item.tutor.name : ''}`}
</p>
</a>
<p class="dark:text-white text-gray-500 text-xs">
{item.submittedAt}
</p>
</div>
{/each}
{/if}
{/each}
</div>
</div>
{/each}