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

chore: lesson card buggy behavior and refactor hero (#197)

Browse Source 
* chore: lesson card buggy behavior and refactor hero

* update landing page hero
This commit is contained in:
Rotimi Best
2024-03-08 10:06:35 +00:00
committed by GitHub
parent f1aa1f3103
commit fea7e47784
2 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/classroomio-com/src/lib/Hero/Hero.svelte
+12 -12
View File
@@ -28,22 +28,22 @@
}); });
</script> </script>
<div class="text-center mt-[30%] md:mt-36 border-b-2 relative"> <div class="relative mt-[30%] border-b-2 text-center md:mt-36">
<div class="mb-10 flex items-center justify-center w-full"> <div class="mb-10 flex w-full items-center justify-center">
<a <a
target="_blank" target="_blank"
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
href="https://github.com/rotimi-best/classroomio" href="https://github.com/rotimi-best/classroomio"
style="color: rgb(75, 85, 99);" style="color: rgb(75, 85, 99);"
class="border border-gray-300 rounded-full px-4 py-1 text-sm font-medium hover:underline" class="rounded-full border border-gray-300 px-4 py-1 text-sm font-medium hover:underline"
>Give us a <span class="text-blue-700">star</span> on github</a >Give us a <span class="text-blue-700">star</span> on github</a
> >
</div> </div>
<h1 <h1
class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] text-slate-900 flex flex-col items-center" class="mx-auto flex flex-col items-center text-3xl font-normal leading-[1.5] text-slate-900 md:text-4xl lg:text-6xl"
> >
<span>Launch Your Online Bootcamp</span> <span>Launch Your Online Bootcamp</span>
<span class="text-blue-700 relative" <span class="relative text-blue-700"
>In Minutes >In Minutes
<svg <svg
aria-hidden="true" aria-hidden="true"
@@ -58,13 +58,13 @@
</span> </span>
</h1> </h1>
<p class="mx-auto mt-10 lg:mt-6 px-4 lg:p-0 text-md md:text-lg text-slate-700 lg:w-2/4"> <p class="text-md mx-auto mt-10 px-4 text-slate-700 md:text-lg lg:mt-6 lg:w-2/4 lg:p-0">
Meet a better collaboration tool for teachers and students. ClassroomIO is a no-code tool that Meet a better collaboration tool for teachers and students. ClassroomIO is a no-code tool that
allows you build and scale your own teaching platform with ease. allows you build and scale your own teaching platform with ease.
</p> </p>
<div class="mt-10 flex gap-4 items-center justify-center flex-col md:flex-row"> <div class="mt-10 flex flex-col items-center justify-center gap-4 md:flex-row">
<a <a
class="font-medium lg:font-semibold text-sm md:text-md w-11/12 md:w-fit text-white px-6 py-3 lg:px-6 lg:py-5 bg-blue-700 rounded-md hover:bg-blue-800 hover:shadow-xl transition-all delay-100" class="md:text-md w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white transition-all delay-100 hover:bg-blue-800 hover:shadow-xl md:w-fit lg:px-6 lg:py-5 lg:font-semibold"
href="/signup" href="/signup"
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
> >
@@ -100,14 +100,14 @@
{height} {height}
src="./cio-hero-imac.webp" src="./cio-hero-imac.webp"
alt="hero section with dark vs light mode" alt="hero section with dark vs light mode"
class="hidden md:block lg:block floating mx-auto rounded-lg shadow-lg" class="floating mx-auto w-[85%] rounded-lg shadow-lg lg:w-[70%]"
/> />
</div> </div>
{#if PUBLIC_ENABLE_USERS_COMPANIES} {#if PUBLIC_ENABLE_USERS_COMPANIES}
<div class="px-[15%] mb-[10%]"> <div class="mb-[10%] px-[15%]">
<h2 class="text-base lg:text-xl font-semibold text-gray-900">Used at</h2> <h2 class="text-base font-semibold text-gray-900 lg:text-xl">Used at</h2>
<div class="w-full flex flex-wrap flex-row gap-5 justify-between items-center py-[5%]"> <div class="flex w-full flex-row flex-wrap items-center justify-between gap-5 py-[5%]">
<img loading="lazy" src="/hero-1.svg" alt="" class="w-[30%] lg:w-[13%]" /> <img loading="lazy" src="/hero-1.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img loading="lazy" src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" /> <img loading="lazy" src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img loading="lazy" src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" /> <img loading="lazy" src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" />
apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte
+18 -18
View File
@@ -106,7 +106,7 @@
<PageBody width="max-w-6xl" padding="p-0"> <PageBody width="max-w-6xl" padding="p-0">
{#if $lessons.length} {#if $lessons.length}
<section <section
class="w-full lg:w-11/12 p-3 lg:px-4 m-auto" class="m-auto w-full p-3 lg:w-11/12 lg:px-4"
use:dndzone={{ use:dndzone={{
items: $lessons, items: $lessons,
flipDurationMs, flipDurationMs,
@@ -121,7 +121,7 @@
> >
{#each $lessons as lesson (lesson.id)} {#each $lessons as lesson (lesson.id)}
<div <div
class="relative m-auto max-w-xl rounded-md border-2 border-gray-200 p-5 mb-4 flex items-center dark:bg-neutral-800 dark:border-neutral-700 hover:scale-95 transition-all ease-in-out" class="relative m-auto mb-4 flex max-w-xl items-center rounded-md border-2 border-gray-200 p-5 dark:border-neutral-700 dark:bg-neutral-800"
> >
<!-- Number Chip --> <!-- Number Chip -->
<div class="mr-5"> <div class="mr-5">
@@ -139,12 +139,12 @@
{#if lessonEditing === lesson.id} {#if lessonEditing === lesson.id}
<TextField bind:value={lesson.title} autoFocus={true} className="max-w-lg" /> <TextField bind:value={lesson.title} autoFocus={true} className="max-w-lg" />
{:else} {:else}
<h3 class="dark:text-white text-lg m-0 flex items-center"> <h3 class="m-0 flex items-center text-lg dark:text-white">
<a <a
href={isStudent && !lesson.is_unlocked href={isStudent && !lesson.is_unlocked
? $page.url.pathname ? $page.url.pathname
: '/courses/' + $course.id + '/lessons/' + lesson.id} : '/courses/' + $course.id + '/lessons/' + lesson.id}
class="dark:text-white no-underline hover:underline font-medium text-black {isStudent && class="font-medium text-black no-underline hover:underline dark:text-white {isStudent &&
!lesson.is_unlocked !lesson.is_unlocked
? 'cursor-not-allowed' ? 'cursor-not-allowed'
: ''}" : ''}"
@@ -156,7 +156,7 @@
<!-- Lesson Educator --> <!-- Lesson Educator -->
<div <div
class="flex items-start justify-between flex-col lg:flex-row lg:items-center mt-2 w-4/5" class="mt-2 flex w-4/5 flex-col items-start justify-between lg:flex-row lg:items-center"
> >
<div class="lg:mb-0"> <div class="lg:mb-0">
{#if lessonEditing === lesson.id} {#if lessonEditing === lesson.id}
@@ -167,15 +167,15 @@
className="sm:my-1 w-[100%]" className="sm:my-1 w-[100%]"
/> />
{:else if !lesson.profile} {:else if !lesson.profile}
<p class="dark:text-white ml-2 text-sm mb-3">No tutor added</p> <p class="mb-3 ml-2 text-sm dark:text-white">No tutor added</p>
{:else} {:else}
<a href="." class="flex items-center hover:underline mb-2"> <a href="." class="mb-2 flex items-center hover:underline">
<Avatar <Avatar
className="w-6 h-6" className="w-6 h-6"
src={lesson.profile.avatar_url} src={lesson.profile.avatar_url}
name="Avatar placeholder" name="Avatar placeholder"
/> />
<p class="dark:text-white ml-2 text-sm"> <p class="ml-2 text-sm dark:text-white">
{lesson.profile.fullname} {lesson.profile.fullname}
</p> </p>
</a> </a>
@@ -191,9 +191,9 @@
onChange={(e) => (lesson.lesson_at = e.target.value)} onChange={(e) => (lesson.lesson_at = e.target.value)}
/> />
{:else} {:else}
<div class="flex mb-2"> <div class="mb-2 flex">
<Calendar size={20} class="carbon-icon text-gray-400 dark:text-white" /> <Calendar size={20} class="carbon-icon text-gray-400 dark:text-white" />
<p class="dark:text-white text-sm ml-2"> <p class="ml-2 text-sm dark:text-white">
{new Date(lesson.lesson_at || '').toDateString()} {new Date(lesson.lesson_at || '').toDateString()}
</p> </p>
</div> </div>
@@ -201,7 +201,7 @@
</div> </div>
<!-- Lesson Call url --> <!-- Lesson Call url -->
<div class="flex items-center mb-3 lg:mb-0"> <div class="mb-3 flex items-center lg:mb-0">
{#if lessonEditing === lesson.id} {#if lessonEditing === lesson.id}
<TextField <TextField
bind:value={lesson.call_url} bind:value={lesson.call_url}
@@ -211,9 +211,9 @@
/> />
{:else} {:else}
<div class="flex"> <div class="flex">
<Video size={20} class="carbon-icon text-gray-400 dark:text-white ml-0.5" /> <Video size={20} class="carbon-icon ml-0.5 text-gray-400 dark:text-white" />
<a <a
class="text-sm ml-2 text-primary-600" class="text-primary-600 ml-2 text-sm"
href={lesson.call_url || '#'} href={lesson.call_url || '#'}
target="_blank" target="_blank"
> >
@@ -228,7 +228,7 @@
<!-- 3 dot edit --> <!-- 3 dot edit -->
<div class="flex flex-row"> <div class="flex flex-row">
<RoleBasedSecurity allowedRoles={[1, 2]}> <RoleBasedSecurity allowedRoles={[1, 2]}>
<OverflowMenu flipped size="xl" class="absolute top-0 right-0"> <OverflowMenu size="xl" class="absolute right-0 top-0">
<OverflowMenuItem <OverflowMenuItem
disabled={isStudent} disabled={isStudent}
text={lesson.is_unlocked ? 'Lock' : 'Unlock'} text={lesson.is_unlocked ? 'Lock' : 'Unlock'}
@@ -268,10 +268,10 @@
</section> </section>
{:else} {:else}
<Box className="w-full lg:w-11/12 lg:px-4 m-auto"> <Box className="w-full lg:w-11/12 lg:px-4 m-auto">
<div class="flex justify-between flex-col items-center"> <div class="flex flex-col items-center justify-between">
<img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" /> <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="mx-auto my-2.5" />
<h2 class="text-xl my-1.5 font-normal">No lessons yet</h2> <h2 class="my-1.5 text-xl font-normal">No lessons yet</h2>
<p class="text-sm text-center text-slate-500"> <p class="text-center text-sm text-slate-500">
Share your knowledge with the world by creating engaging lessons. Start by clicking on Share your knowledge with the world by creating engaging lessons. Start by clicking on
the Add button. the Add button.
</p> </p>