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

CLASSROOMIO-T-3: Make pages mobile friendly

Browse Source
This commit is contained in:
rotimi-best
2021-09-17 06:33:49 +03:00
parent 11d6b0616a
commit 2edfee4990
16 changed files with 152 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Course/components/Lesson/Materials/index.svelte
+14
View File
@@ -101,6 +101,7 @@
frameborder="0"
width="100%"
height="569"
class="iframe"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"
@@ -144,6 +145,7 @@
<iframe
width="100%"
height="569"
class="iframe"
src={formatYoutubeVideo(url)}
title="YouTube video player"
frameborder="0"
@@ -161,3 +163,15 @@
</TabContent>
</slot:fragment>
</Tabs>
<style>
.iframe {
height: 569px;
}
@media (max-width: 760px) {
.iframe {
height: 209px;
}
}
</style>
src/components/Course/components/Navigation/index.svelte
+68 -38
View File
@@ -24,6 +24,7 @@
import { course, group } from '../../store';
import { updateCourse } from '../../../../utils/services/courses';
import { profile } from '../../../../utils/store/user';
import { isMobile } from '../../../../utils/store/useMobile';
// export let lessonId;
export let path;
@@ -34,6 +35,9 @@
function handleMainGroupClick(href) {
return () => {
if ($isMobile) {
show = false;
}
goto(href);
};
}
@@ -49,6 +53,11 @@
updateCourse($course.id, { title: $course.title });
}
function handleMobileChange(isMobile) {
if (isMobile) show = false;
else show = true;
}
onMount(() => {
if (localStorage.getItem('hideCourseNav')) {
show = localStorage.getItem('hideCourseNav') === 'false';
@@ -66,6 +75,8 @@
});
});
$: handleMobileChange($isMobile);
$: {
if (process.browser && show !== null) {
localStorage.setItem('hideCourseNav', `${!show}`);
@@ -125,7 +136,9 @@
<Settings />
<div class="root z-10 {!show && 'hide'}">
<div
class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}"
>
{#if show}
<div class="relative h-full">
<PageNav bind:title={$course.title} paddingClass="pl-2">
@@ -142,43 +155,47 @@
</RoleBasedSecurity>
</slot:fragment>
</PageNav>
{#each navItems as navItem}
{#if !navItem.show || (typeof navItem.show === 'function' && navItem.show($group.people, $profile.id))}
<Expandable
label={navItem.label}
handleClick={handleMainGroupClick(navItem.to)}
isGroupActive={(path || $page.path) === navItem.to}
hideSortIcon={navItem.hideSortIcon}
>
{#if navItem.isLecture}
{#each $lessons as item, index}
<a
class="item flex items-center {(path || $page.path).includes(
item.id
) && 'active'} pl-7 py-2 {isStudent && !item.is_complete
? 'cursor-not-allowed'
: ''}"
href={isStudent && !item.is_complete
? $page.path
: getLessonsRoute($course.id, item.id)}
>
<span class="course-counter">
{getLectureNo(index + 1)}
</span>
<span>{item.title}</span>
{#if item.is_complete}
<span class="ml-2 success">
<CheckmarkFilled20 class="carbon-icon" />
<div class="navItems">
{#each navItems as navItem}
{#if !navItem.show || (typeof navItem.show === 'function' && navItem.show($group.people, $profile.id))}
<Expandable
label={navItem.label}
handleClick={handleMainGroupClick(navItem.to)}
isGroupActive={(path || $page.path) === navItem.to}
hideSortIcon={navItem.hideSortIcon}
>
{#if navItem.isLecture}
{#each $lessons as item, index}
<a
class="item flex items-center {(
path || $page.path
).includes(item.id) && 'active'} pl-7 py-2 {isStudent &&
!item.is_complete
? 'cursor-not-allowed'
: ''}"
href={isStudent && !item.is_complete
? $page.path
: getLessonsRoute($course.id, item.id)}
on:click={() => $isMobile && (show = false)}
>
<span class="course-counter">
{getLectureNo(index + 1)}
</span>
{:else}
<span class="text-md ml-2">🔒</span>
{/if}
</a>
{/each}
{/if}
</Expandable>
{/if}
{/each}
<span>{item.title}</span>
{#if item.is_complete}
<span class="ml-2 success">
<CheckmarkFilled20 class="carbon-icon" />
</span>
{:else}
<span class="text-md ml-2">🔒</span>
{/if}
</a>
{/each}
{/if}
</Expandable>
{/if}
{/each}
</div>
<div
class="w-full footer p-3 absolute bottom-2 flex items-center justify-between"
@@ -187,6 +204,7 @@
value="toggle"
onClick={() => goto('/courses')}
buttonClassName="mx-3"
size={$isMobile ? 'large' : 'small'}
>
<Home32 class="carbon-icon" />
</IconButton>
@@ -223,7 +241,6 @@
flex-direction: column;
min-width: 360px;
max-width: 360px;
position: sticky;
top: 0;
border-right: 1px solid var(--border-color);
background-color: rgb(250, 251, 252);
@@ -260,6 +277,11 @@
}
}
.navItems {
height: 82%;
overflow-y: scroll;
}
.toggler {
right: -15px;
z-index: 10;
@@ -268,4 +290,12 @@
height: fit-content;
background: var(--border-color);
}
@media (max-width: 760px) {
.root {
width: 95%;
min-width: unset;
max-width: unset;
}
}
</style>
src/components/CourseContainer/index.svelte
+6 -1
View File
@@ -7,6 +7,7 @@
// import { questionnaireMetaData } from '../Course/components/Lesson/store/answers';
import { course } from '../Course/store';
import Confetti from '../Confetti/index.svelte';
import { isMobile } from '../../utils/store/useMobile';
export let path = '';
export let isExercisePage = false;
@@ -33,7 +34,7 @@
<div class="root">
<Navigation {path} />
<div class="rightBar">
<div class="rightBar" class:isMobile={$isMobile}>
{#if isExercisePage}
<Confetti />
{/if}
@@ -51,4 +52,8 @@
flex-grow: 1;
width: calc(100% - 360px);
}
.rightBar.isMobile {
margin-left: 10px;
}
</style>
src/components/Courses/index.svelte
+3 -1
View File
@@ -4,7 +4,9 @@
import { courses } from './store';
</script>
<div class="flex items-center flex-wrap my-4 m-auto">
<div
class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto"
>
{#each $courses as courseData}
<Card
id={courseData.id}
src/components/Navigation/index.svelte
-3
View File
@@ -171,8 +171,5 @@
ul {
align-items: center;
}
li a {
display: none;
}
}
</style>
src/components/PageBody/index.svelte
+1 -1
View File
@@ -1,7 +1,7 @@
<script>
// import
// border border-gray-300 rounded-md p-3 bg-blue-200 bg-opacity-25
export let width = 'max-w-3xl w-11/12';
export let width = 'max-w-3xl w-full lg:w-11/12';
export let padding = 'pb-5 px-4';
export let className = '';
</script>
src/components/PageNav/index.svelte
+6
View File
@@ -138,4 +138,10 @@
text-overflow: ellipsis;
padding: 10px;
}
@media (max-width: 760px) {
.title {
width: fit-content;
}
}
</style>
src/components/Question/CheckboxQuestion/index.svelte
+1 -1
View File
@@ -60,7 +60,7 @@
<form on:submit|preventDefault={handleFormSubmit}>
<div class="flex items-center justify-between">
<h2 class={!isNaN(grade) && 'w-3/4'}>{title}</h2>
<h3 class={!isNaN(grade) && 'w-3/4'}>{title}</h3>
{#if !isNaN(grade)}
<div class="flex items-center">
<TextField
src/components/Question/RadioQuestion/index.svelte
+1 -1
View File
@@ -60,7 +60,7 @@
<form on:submit|preventDefault={handleFormSubmit}>
<div class="flex items-center justify-between">
<h2 class={!isNaN(grade) && 'w-3/4'}>{title}</h2>
<h3 class={!isNaN(grade) && 'w-3/4'}>{title}</h3>
{#if !isNaN(grade)}
<div class="flex items-center">
<TextField
src/components/Question/TextareaQuestion/index.svelte
+1 -1
View File
@@ -35,7 +35,7 @@
<form on:submit|preventDefault={handleFormSubmit}>
<div class="flex items-center justify-between">
<h2 class={!isNaN(grade) && 'w-3/4'}>{title}</h2>
<h3 class={!isNaN(grade) && 'w-3/4'}>{title}</h3>
{#if !isNaN(grade)}
<div class="flex items-center">
<TextField