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

Add mode functionality + create form component

Browse Source
This commit is contained in:
Ibitoye Rotimi Best
2021-05-22 12:32:32 +03:00
parent c614e691ed
commit ab92f59c85
25 changed files with 6177 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Course/components/Lecture/Homework.svelte
+2
View File
@@ -117,6 +117,8 @@
}
</script>
<div class="bg-gray-100 rounded-xl p-8" />
{#if currentQuestionIndex === 0}
<div>
<h2>Home task 1</h2>
src/components/Course/components/Lecture/Readme/EditMode.svelte
+3 -89
View File
@@ -1,94 +1,8 @@
<script>
import marked from "marked";
import PrimaryButton from "../../../../PrimaryButton/index.svelte";
import EditContent from "../../../../EditContent/index.svelte";
import readme from "../../readme.js";
let isWriteMode = true;
export let value = readme;
export let placeholder = ``;
const activeClassName = "border-b-2 border-blue-700";
const handleTabClick = (tab) => (event) => {
isWriteMode = tab === 1;
};
let value = readme;
</script>
<div class="root">
<div class="flex justify-center">
<button
on:click={handleTabClick(1)}
class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}"
>
Write
</button>
<button
on:click={handleTabClick(2)}
class="focus:outline-none p-2 {!isWriteMode && `${activeClassName}`}"
>
Preview
</button>
</div>
<div class="m-2 mb-0 p-0">
{#if isWriteMode}
<textarea
bind:value
{placeholder}
class="border border-gray rounded-md p-2"
/>
{:else}
<article class="preview prose prose-sm sm:prose p-2">
{@html marked(value)}
</article>
{/if}
</div>
{#if !isWriteMode}
<hr />
{/if}
<div class="flex justify-between items-center px-2 pb-1">
<div class="flex items-center text-sm">
<svg
class="octicon mr-2"
height="16"
viewBox="0 0 16 16"
version="1.1"
width="16"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"
/>
</svg>
<span>Styling with Markdown is supported</span>
</div>
<PrimaryButton label="Answer" />
</div>
</div>
<!-- {@html marked(readme, {
breaks: true,
gfm: true,
})} -->
<style>
.root {
width: 100%;
min-height: 200px;
}
textarea {
width: 100%;
height: 500px;
}
.preview {
min-height: 150px;
}
.octicon {
display: inline-block;
vertical-align: text-top;
fill: currentColor;
}
</style>
<EditContent {value} placeholder="Start typing your lesson" />
src/components/Course/components/Lecture/Readme/ViewMode.svelte
+1 -13
View File
@@ -1,6 +1,5 @@
<script>
import marked from "marked";
import PageNav from "../../PageNav/index.svelte";
const readme = `
# Introduction
@@ -15,15 +14,4 @@
`;
</script>
<PageNav title="Overview" disableSticky={true} />
<div class="body">
{@html marked(readme, { breaks: true, gfm: true })}
</div>
<style>
.body {
max-width: 1000px;
margin: 10px;
}
</style>
{@html marked(readme, { breaks: true, gfm: true })}
src/components/Course/components/Lecture/Readme/index.svelte
+14
View File
@@ -0,0 +1,14 @@
<script>
import MODES from "../../../../../utils/constants/mode.js";
import EditMode from "./EditMode.svelte";
import ViewMode from "./ViewMode.svelte";
export let mode = "";
$: console.log("mode", mode);
</script>
{#if mode === MODES.edit}
<EditMode />
{:else}
<ViewMode />
{/if}
src/components/Course/components/Lecture/index.svelte
+18 -6
View File
@@ -2,14 +2,23 @@
import PageNav from "../../../PageNav/index.svelte";
import Classwork from "./Classwork.svelte";
import Homework from "./Homework.svelte";
// import Readme from "./Readme.svelte";
import ReadmeInEditMode from "./Readme/EditMode.svelte";
import Switcher from "../../../Switcher/index.svelte";
import Readme from "./Readme/index.svelte";
import PrimaryContainedButton from "../../../PrimaryContainedButton/index.svelte";
import MODES from "../../../../utils/constants/mode.js";
export let path;
export let tab;
export let mode;
$: console.log("path", path);
let modeLabel = "Edit";
$: modeLabel = mode === MODES.edit ? "Save" : "Edit";
function handleModeChange(e) {
e.preventDefault();
mode = mode === MODES.edit ? MODES.view : MODES.edit;
}
</script>
<div>
@@ -33,13 +42,16 @@
]}
>
<div slot="widget">
<Switcher />
<PrimaryContainedButton
label={modeLabel}
handleClick={handleModeChange}
/>
</div>
</PageNav>
<div class="course">
{#if tab === "lectures"}
<ReadmeInEditMode />
<Readme {mode} />
{:else if tab === "classwork"}
<Classwork />
{:else if tab === "hometasks"}
src/components/Course/components/readme.js
-21
View File
@@ -3,26 +3,6 @@ export default `# 1. Soft Skills
## Notes
Here I can write some notes to my students
## Slide
<iframe
title="Lecture"
src="https://docs.google.com/presentation/d/e/2PACX-1vTi_ATSrNBL-FMP7oDSi2DtXU7L8yzL0KAocNc-k7EqXaMM-oCbnbVmQjHYP0QKAw3r-QZayNfx5EpM/embed?start=false&loop=false&delayms=3000"
frameborder="0"
width="100%"
height="569"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"></iframe>
## Video
<iframe
width="100%"
height="315"
src="https://www.youtube.com/embed/8pLZkbN9h_s"
title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
webkitallowfullscreen="true"></iframe>
## Community
The Next.js community can be found on [GitHub Discussions](https://github.com/vercel/next.js/discussions), where you can ask questions, voice ideas, and share your projects.
@@ -43,5 +23,4 @@ Please see our [contributing.md](/contributing.md).
- Arunoda Susiripala ([@arunoda](https://twitter.com/arunoda))
- Tony Kovanen ([@tonykovanen](https://twitter.com/tonykovanen))
- Dan Zajdband ([@impronunciable](https://twitter.com/impronunciable))
`