Add Lesson Container #18

src/components/LessonButtonCollab.svelte

@@ -0,0 +1,45 @@
+<script>
+ export let active = false
+ export let namespace = '/platform/classroom/v1'
+ export let number
+</script>
+
+<style>
+ .lesson {
+ --lesson-size: 50px;
+ display: inline-block;
+ box-sizing: border-box;
+ width: var(--lesson-size);
+ height: var(--lesson-size);
+ margin: auto var(--gap-normal);
+
+ background: var(--color-floral-white);
+ color: var(--color-granite-grey);
+ border-radius: 50%;
+ border: 2px solid transparent;
+
+ font-family: Comfortaa;
+ font-size: 20px;
+ text-align: center;
+ line-height: var(--lesson-size);
+ letter-spacing: 0.15px;
+ text-decoration: none;
+ }
+
+ .lesson.-active,
+ .lesson:hover {
+ background-color: var(--color-fiery-rose);
+ color: var(--color-floral-white);
+ }
+ .lesson.-active {
+ --lesson-size: 60px;
+ }
+ .lesson:not(.-active):hover {
+ --lesson-size: 50px;
+ border: 2px solid var(--color-floral-white);
+ }
+</style>
+
+<a class={`lesson ${active && '-active'}`} href={`${namespace}/${number}`}>
+ {String(number).padStart(3, '0')}
+</a>

src/containers/LessonsCollab.svelte

@@ -0,0 +1,30 @@
+<script>
+ import { onMount } from 'svelte'
+ import TitleCollab from '../components/TitleCollab.svelte'
+ import LessonButtonCollab from '../components/LessonButtonCollab.svelte'
+
+ export let courseUrl = '/platform/classroom/v1'
+ export let activeLesson = 56
+ export let lessons = 90
+
+ const lessonsCounter = Array.from({ length: lessons }, (_, k) => k)
+</script>
+
+<style>
+ .lessons-collab {
+ padding: var(--gap-small) 0;
+ margin: var(--gap-normal) 0;
+ white-space: nowrap;
+ overflow-x: scroll;
+ }
+</style>
+
+<TitleCollab content="Aulas" />
+<div class="lessons-collab">
+ {#each lessonsCounter as lesson, lessonNumber}
+ <LessonButtonCollab
+ active={activeLesson === lessonNumber}
+ number={lessonNumber}
+ namespace={courseUrl} />
+ {/each}
+</div>

src/routes/platform/classroom.svelte

@@ -1,6 +1,7 @@
 <script>
  import PlayerCollab from '../../containers/PlayerCollab.svelte'
  import TagCollab from '../../components/TagCollab.svelte'
+ import LessonsCollab from '../../containers/LessonsCollab.svelte'
 </script>
 
 <svelte:head>
@@ -11,3 +12,5 @@
 
 <TagCollab content="Aula 056" />
 <TagCollab content="Vídeo 1" />
+
+<LessonsCollab />

static/styles/generic/index.css

@@ -1 +1,2 @@
 @import 'reset.css';
+@import 'scrollbar.css';

static/styles/generic/scrollbar.css

@@ -0,0 +1,17 @@
+*::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ border-radius: 10px;
+ background-color: transparent;
+}
+
+*::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ background-color: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ background-color: var(--color-fiery-rose);
+}

static/styles/settings/color.css

@@ -1,6 +1,7 @@
 :root {
  --color-arsenic: #3a4042;
  --color-arsenic-light: rgba(58, 64, 66, 0.5);
+ --color-granite-grey: #646165;
  --color-old-silver: #828282;
  --color-eggshell: #eae6da;
  --color-eggshell-light: rgba(234, 230, 218, 0.3);