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

CLASSROOMIO-T-145: Made the updates to the UI of the dashboard

Browse Source 
CLASSROOMIO-T-145: Changed the classname

Merge branch 'main' into CLASSROOMIO-T-145

Merge branch 'main' into CLASSROOMIO-T-145

CLASSROOMIO-T-145:updates

CLASSROOMIO-T-145:Fixed the hamburger display for the lms

CLASSROOMIO-T-145:Fixed the extra scroll on the LMS

CLASSROOMIO-T-145:Made the Updates to the UI

CLASSROOMIO-T-145:Made the Updates to the UI


Co-authored-by: Ifeanyi Nwosu <ifeanyi@digdippa.com>


Merge-request: CLASSROOMIO-MR-70
Merged-by: Best Admin <best@digdippa.com>
This commit is contained in:
emmanuel
2023-09-12 11:31:20 +00:00
committed by Space Cloud
parent 3d58d58180
commit b271286b05
9 changed files with 47 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.postcss
+3 -1
View File
@@ -18,7 +18,9 @@ html {
scrollbar-width: thin;
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
html .dark {
--scrollbarBG: #1f2937;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
src/lib/components/Courses/index.svelte
+3 -2
View File
@@ -1,10 +1,11 @@
<script lang="ts">
<script>
import Box from '../Box/index.svelte';
import Card from './components/Card/index.svelte';
import CardLoader from './components/Card/Loader.svelte';
import CoursesEmptyIcon from '../Icons/CoursesEmptyIcon.svelte';
import CopyCourseModal from './components/CopyCourseModal/index.svelte';
import { courses, courseMetaDeta } from './store';
import { isMobile } from '$lib/utils/store/useMobile';
</script>
<CopyCourseModal />
@@ -41,7 +42,7 @@
{/each}
{/if}
</div>
{#if !$courses.length}
{#if !$courseMetaDeta.isLoading && !$courses.length}
<Box className="w-full">
<CoursesEmptyIcon />
<h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>
src/lib/components/LMS/SideBar.svelte
+3 -3
View File
@@ -53,9 +53,9 @@
<aside
class={`${
$menu.hidden
? '-translate-x-[100%] top-[56px] md:top-0 absolute md:translate-x-0 md:relative z-40'
: 'translate-x-0 absolute md:relative top-[56px] md:top-0 z-40'
} transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 h-full`}
? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[9999]'
: 'translate-x-0 absolute md:relative z-[9999]'
} overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 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/Navigation/app.svelte
+12 -13
View File
@@ -44,21 +44,20 @@
</script>
<nav
class="{navClass} flex w-full p-1 md:px-6 bg-primary-700 transition delay-150 duration-300 ease-in-out"
class="{navClass} flex w-full p-1 md:px-6 bg-primary-700 transition delay-150 duration-300 ease-in-out h-[48px]"
>
<ul class="flex w-full items-center">
<div class="flex items-center text-white">
{#if !isCoursePage}
<li>
<IconButton onClick={toggleSidebar}>
{#if $menu.hidden}
<Menu size={16} class="md:hidden text-white" />
{:else}
<Close size={16} class="md:hidden text-white" />
{/if}
</IconButton>
</li>
{/if}
<li class="md:hidden">
<IconButton onClick={toggleSidebar}>
{#if $menu.hidden}
<Menu size={16} class=" text-white" />
{:else}
<Close size={16} class=" text-white" />
{/if}
</IconButton>
</li>
{#if isCoursePage}
<IconButton
onClick={() => {
@@ -74,7 +73,7 @@
target={isCoursePage && $course.slug ? '_blank' : ''}
title="Go to {isCoursePage ? 'Courses' : 'ClassroomIO Home'}"
id="logo"
class="text-lg {isCoursePage && 'ml-2'}"
class="text-lg {isCoursePage && '-ml-2 md:ml-2'} line-clamp-1"
>
{isCoursePage ? title : 'ClassroomIO'}
</a>
src/lib/components/Navigation/lms.svelte
+4 -4
View File
@@ -27,14 +27,14 @@
}
</script>
<nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-700">
<nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-700 h-[48px]">
<ul class="flex w-full items-center">
<li>
<li class="md:hidden">
<IconButton onClick={toggleSidebar}>
{#if $menu.hidden}
<Menu size={16} class="md:hidden text-white" />
<Menu size={16} class=" text-white" />
{:else}
<Close size={16} class="md:hidden text-white" />
<Close size={16} class=" text-white" />
{/if}
</IconButton>
</li>
src/lib/components/Org/Quiz/QuizCard.svelte
+1 -1
View File
@@ -56,7 +56,7 @@
{#if quiz}
<div
class="root w-full border hover:shadow-2xl transition ease-in-out rounded-lg bg-gray-100 dark:bg-gray-800 mr-4 mb-5 relative flex flex-col lg:flex-row p-3"
class="root w-full border hover:shadow-2xl transition ease-in-out rounded-lg bg-gray-100 dark:bg-gray-800 mb-5 relative flex flex-col lg:flex-row p-3"
>
<ImageLoader
src={themeImages[quiz.theme]?.card || themeImages.standard.card}
src/lib/components/Org/SideBar.svelte
+3 -3
View File
@@ -61,9 +61,9 @@
<aside
class={`${
$menu.hidden
? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
: 'translate-x-0 absolute md:relative z-40'
} transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-48px)] md:h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[9999]'
: 'translate-x-0 absolute md:relative z-[9999]'
} overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 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/+layout.svelte
+3 -2
View File
@@ -317,14 +317,14 @@
{#if !isQuizPage($page.url.pathname)}
<OrgSideBar />
{/if}
<div class="org-slot bg-white dark:bg-gray-800">
<div class="org-slot bg-white dark:bg-gray-800 w-full">
<slot />
</div>
</div>
{:else if isLMSPage($page.url.pathname)}
<div class="org-root w-full flex items-center justify-between">
<LMSSideBar />
<div class="org-slot bg-white dark:bg-gray-800">
<div class="org-slot bg-white dark:bg-gray-800 w-full">
<slot />
</div>
</div>
@@ -415,6 +415,7 @@
column-gap: 12px;
row-gap: 12px;
}
@media screen and (max-width: 768px) {
:global(.cards-container) {
width: 95%;
src/routes/org/[slug]/+page.svelte
+15 -23
View File
@@ -216,11 +216,11 @@
{/each}
</div>
<div class="flex flex-wrap lg:flex-nowrap gap-2 mt-5 w-full">
<div class="flex flex-wrap mt-5 gap-4 w-full">
<!-- Your Schedule -->
<div class="w-full md:w-auto">
<div class="w-full xl:w-auto container">
<p class="dark:text-white font-bold mb-7">Your Schedule</p>
<div class="rounded border border-gray-200 md:mr-3 md:min-w-[450px] schedule-box">
<div class="rounded border border-gray-200 md:mr-3 md:min-w-[450px] schedule-box w-full">
{#if !$isMobile}
<div id="calendar" class="flex justify-center mt-5">
<InlineCalendar bind:store {theme} />
@@ -295,16 +295,19 @@
</div>
<!-- Your Activities -->
<div>
<p class="dark:text-white font-bold mb-7 mt-5 lg:mt-0">Your Activities</p>
<div class="rounded border border-gray-200 md:min-w-[450px] activities-box py-4 px-2 md:px-5">
<div class="w-full xl:w-auto container">
<p class="dark:text-white font-bold mb-7">Your Activities</p>
<div
class="rounded border border-gray-200 md:min-w-[450px] activities-box py-4 px-2 md:px-5 w-full"
>
{#each activities as activity}
<div class="flex mb-3 pb-3 border-b border-gray-200">
<Avatar src={activity.avatar} name="avatar" />
<div class="ml-2 flex flex-col lg:flex-row">
<div class="ml-2 flex flex-col xl:flex-row">
<div class="mr-2">
<p class="dark:text-white">{activity.name}</p>
<p class="dark:text-white mb-2 mt-1 line-clamp-1 md:line-clamp-2">
<p class="dark:text-white mb-2 mt-1 line-clamp-1">
{activity.description}
</p>
<a href={activity.link}>View</a>
@@ -382,21 +385,10 @@
font-size: 30px;
}
}
/* @media screen and (min-width: 756px) {
.schedule-box,
.activities-box {
height: fit-content;
overflow-y: auto;
overflow: hidden;
}
}
@media screen and (min-width: 756px) {
.schedule-box,
.activities-box {
height: fit-content;
overflow-y: auto;
@media only screen and (min-width: 1280px) and (max-width: 1360px) {
.container {
width: 48%;
}
} */
}
</style>