Add mode functionality + create form component
This commit is contained in:
Ibitoye Rotimi Best
Generated
+5815
-266
File diff suppressed because it is too large
Load Diff
+4
-2
@@ -28,7 +28,8 @@ export default {
|
||||
plugins: [
|
||||
replace({
|
||||
"process.browser": true,
|
||||
"process.env.NODE_ENV": JSON.stringify(mode)
|
||||
"process.env.NODE_ENV": JSON.stringify(mode),
|
||||
preventAssignment: true
|
||||
}),
|
||||
svelte({
|
||||
preprocess,
|
||||
@@ -82,7 +83,8 @@ export default {
|
||||
plugins: [
|
||||
replace({
|
||||
"process.browser": false,
|
||||
"process.env.NODE_ENV": JSON.stringify(mode)
|
||||
"process.env.NODE_ENV": JSON.stringify(mode),
|
||||
preventAssignment: true
|
||||
}),
|
||||
svelte({
|
||||
preprocess,
|
||||
|
||||
@@ -117,6 +117,8 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="bg-gray-100 rounded-xl p-8" />
|
||||
|
||||
{#if currentQuestionIndex === 0}
|
||||
<div>
|
||||
<h2>Home task 1</h2>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
@@ -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"}
|
||||
|
||||
@@ -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))
|
||||
|
||||
`
|
||||
@@ -0,0 +1,130 @@
|
||||
<script>
|
||||
import marked from "marked";
|
||||
import PrimaryButton from "../PrimaryButton/index.svelte";
|
||||
|
||||
let isWriteMode = true;
|
||||
export let value;
|
||||
export let placeholder = ``;
|
||||
const activeClassName = "border-b-2 border-blue-700";
|
||||
|
||||
const handleTabClick = (tab) => () => {
|
||||
isWriteMode = tab === 1;
|
||||
};
|
||||
</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="block">
|
||||
<span class="text-gray-700">Radio Buttons</span>
|
||||
<div class="mt-2">
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input
|
||||
class="form-radio"
|
||||
type="radio"
|
||||
checked
|
||||
name="radio-direct"
|
||||
value="1"
|
||||
/>
|
||||
<span class="ml-2">Option 1</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input
|
||||
class="form-radio"
|
||||
type="radio"
|
||||
name="radio-direct"
|
||||
value="2"
|
||||
/>
|
||||
<span class="ml-2">Option 2</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="inline-flex items-center">
|
||||
<input
|
||||
class="form-radio"
|
||||
type="radio"
|
||||
name="radio-direct"
|
||||
value="3"
|
||||
/>
|
||||
<span class="ml-2">Option 3</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script>
|
||||
export let label;
|
||||
export let value;
|
||||
export let checked;
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<label class="inline-flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50"
|
||||
{name}
|
||||
{value}
|
||||
bind:checked
|
||||
/>
|
||||
<span class="ml-2">{label}</span>
|
||||
</label>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script>
|
||||
export let label;
|
||||
export let placeholder;
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<label class="block">
|
||||
<span class="text-gray-700">{label}</span>
|
||||
<input
|
||||
bind:value
|
||||
{placeholder}
|
||||
type="date"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
||||
/>
|
||||
</label>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script>
|
||||
export let label;
|
||||
export let value;
|
||||
export let checked;
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<label class="inline-flex items-center">
|
||||
<input class="form-radio" type="radio" {checked} {name} {value} />
|
||||
<span class="ml-2">{label}</span>
|
||||
</label>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script>
|
||||
export let label;
|
||||
export let placeholder;
|
||||
export let value;
|
||||
export let options = [];
|
||||
|
||||
let answer = "Work on ";
|
||||
</script>
|
||||
|
||||
<label class="block">
|
||||
<span class="text-gray-700">{label}</span>
|
||||
<select bind:value class="form-select block w-full mt-1">
|
||||
{#each options as option}
|
||||
<option value={option.id}>
|
||||
{option.text}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script>
|
||||
export let label;
|
||||
export let placeholder;
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<label class="block">
|
||||
<span class="text-gray-700">{label}</span>
|
||||
<textarea
|
||||
class="form-textarea mt-1 block w-full h-24"
|
||||
rows="3"
|
||||
{placeholder}
|
||||
bind:value
|
||||
/>
|
||||
</label>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script>
|
||||
export let label;
|
||||
export let placeholder;
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<label class="block">
|
||||
<span class="text-gray-700">{label}</span>
|
||||
<input
|
||||
class="form-input mt-1 block w-full"
|
||||
type="text"
|
||||
{placeholder}
|
||||
bind:value
|
||||
/>
|
||||
</label>
|
||||
@@ -1,30 +0,0 @@
|
||||
<script>
|
||||
import AddAlt32 from "carbon-icons-svelte/lib/AddAlt32";
|
||||
export let href;
|
||||
export let label = "";
|
||||
</script>
|
||||
|
||||
<a
|
||||
class="root bg-blue-700 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded inline-flex items-center float-right"
|
||||
{href}
|
||||
>
|
||||
<AddAlt32 class="carbon-icon fill-current w-4 h-4 mr-1" />
|
||||
{label}
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
height: fit-content;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1002px) {
|
||||
a {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
a :global(svg.carbon-icon) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import NewButton from "../NewButton/index.svelte";
|
||||
import NewButton from "../PrimaryContainedButton/index.svelte";
|
||||
export let title = "";
|
||||
export let navItems = [];
|
||||
export let addButtonHref;
|
||||
@@ -11,7 +11,10 @@
|
||||
Array.isArray(navItems) && navItems.length > 4 ? "bring-down" : "";
|
||||
</script>
|
||||
|
||||
<div class="header flex items-center justify-between mb-2 {!disableSticky && 'sticky'} {dynamicRootClass}">
|
||||
<div
|
||||
class="header flex items-center justify-between mb-2 {!disableSticky &&
|
||||
'sticky'} {dynamicRootClass}"
|
||||
>
|
||||
{#if !!title}
|
||||
<h4 class="title">{title}</h4>
|
||||
{/if}
|
||||
@@ -27,6 +30,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<slot name="widget" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -72,6 +76,9 @@
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.spacing {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1002px) {
|
||||
.header {
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<script>
|
||||
// import AddAlt32 from "carbon-icons-svelte/lib/AddAlt32";
|
||||
export let href = "";
|
||||
export let label = "";
|
||||
export let handleClick;
|
||||
</script>
|
||||
|
||||
<a
|
||||
class="root bg-blue-700 hover:bg-blue-900 text-white font-bold rounded inline-flex items-center float-right"
|
||||
{href}
|
||||
on:click={handleClick}
|
||||
>
|
||||
<!-- <AddAlt32 class="carbon-icon fill-current w-4 h-4 mr-1" /> -->
|
||||
{label}
|
||||
</a>
|
||||
|
||||
<style lang="scss">
|
||||
.root {
|
||||
height: fit-content;
|
||||
border-radius: 5px;
|
||||
padding: 4px 20px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1002px) {
|
||||
a {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
a :global(svg.carbon-icon) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<script>
|
||||
import PrimaryButton from "../PrimaryButton/index.svelte";
|
||||
import RadioItem from "../Form/RadioItem.svelte";
|
||||
|
||||
export let title = "";
|
||||
export let name = "";
|
||||
@@ -24,7 +25,6 @@
|
||||
}
|
||||
|
||||
function handleFormSubmit(event) {
|
||||
event.preventDefault();
|
||||
const value = getRadioVal(event.target, name);
|
||||
onSubmit(name, value);
|
||||
event.target.reset();
|
||||
@@ -36,19 +36,18 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<form on:submit={handleFormSubmit}>
|
||||
<form on:submit|preventDefault={handleFormSubmit}>
|
||||
<h2>{title}</h2>
|
||||
|
||||
<div class="ml-4">
|
||||
{#each options as option}
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
<RadioItem
|
||||
{name}
|
||||
value={option.value}
|
||||
checked={option.value === defaultValue}
|
||||
label={option.label}
|
||||
/>
|
||||
<label for={option.value}>{option.label}</label>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -1,182 +0,0 @@
|
||||
<script>
|
||||
export let checked = false;
|
||||
|
||||
function onChange() {
|
||||
checked = !checked;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="neumorphism-toggle">
|
||||
<input type="checkbox" id="neumorphism" {checked} {onChange} />
|
||||
<label for="neumorphism">
|
||||
<div class="switch">
|
||||
<div class="dot" />
|
||||
</div>
|
||||
<span>Neumorphism</span>
|
||||
</label>
|
||||
<span>... not allowed to toggle again :(</span>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.neumorphism-toggle {
|
||||
position: relative;
|
||||
transition: transform 0.3s;
|
||||
transform: scale(var(--scale, 1)) translateZ(0);
|
||||
&:active {
|
||||
--scale: 0.96;
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
& + label {
|
||||
background: #fff;
|
||||
border-radius: 9px;
|
||||
padding: 16px 0 16px 20px;
|
||||
min-width: 208px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-shadow: -12px -12px 24px var(--light-shadow, transparent),
|
||||
12px 12px 24px var(--shadow, transparent);
|
||||
transition: box-shadow 0.4s;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(160deg, #f1f4ff, #f9faff);
|
||||
opacity: var(--gradient, 0);
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
z-index: 1;
|
||||
vertical-align: top;
|
||||
height: 22px;
|
||||
width: 40px;
|
||||
border-radius: 11px;
|
||||
background: #eceffc;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #4f97ff, #275efe);
|
||||
opacity: var(--gradient, 0);
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
.dot {
|
||||
background: #d1d6ee;
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
transform: translateX(var(--offset, 0));
|
||||
transition: transform 0.4s, box-shadow 0.4s;
|
||||
box-shadow: -4px -4px 8px var(--light-shadow-2, transparent),
|
||||
4px 4px 8px var(--shadow, transparent);
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(160deg, #f1f4ff, #f9faff);
|
||||
opacity: var(--gradient, 0);
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
line-height: 22px;
|
||||
font-size: 16px;
|
||||
color: var(--text, #646b8c);
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
margin-left: 12px;
|
||||
transition: color 0.4s;
|
||||
}
|
||||
& + span {
|
||||
text-align: center;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
opacity: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #a6accd;
|
||||
transform: translateY(4px);
|
||||
transition: opacity 0.4s, transform 0.4s;
|
||||
}
|
||||
}
|
||||
&:not(:checked) {
|
||||
& + label {
|
||||
pointer-events: none;
|
||||
& + span {
|
||||
opacity: 1;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
& + label {
|
||||
--offset: 18px;
|
||||
--text: #404660;
|
||||
--gradient: 1;
|
||||
--shadow: rgba(0, 6, 39, 0.1);
|
||||
--light-shadow: rgba(255, 255, 255, 0.8);
|
||||
--light-shadow-2: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
&:before,
|
||||
&:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// dribbble & twitter
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "Inter", "Inter UI", Arial;
|
||||
background: #f6f8ff;
|
||||
.twitter {
|
||||
position: fixed;
|
||||
display: block;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: #1da1f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,4 @@
|
||||
<style global>
|
||||
<style global lang="scss">
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -14,6 +14,20 @@
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
|
||||
.prose {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import Tailwindcss from "../components/Tailwindcss.svelte";
|
||||
// import Nav from "../components/Nav.svelte";
|
||||
import LeftNav from "../components/LeftNav/index.svelte";
|
||||
import SideBar from "../components/SideBar/index.svelte";
|
||||
// import SideBar from "../components/SideBar/index.svelte";
|
||||
import Footer from "../components/Footer/index.svelte";
|
||||
|
||||
export let segment;
|
||||
|
||||
@@ -16,16 +16,41 @@
|
||||
import TimeTable from "../../components/Course/components/TimeTable.svelte";
|
||||
import CourseNav from "../../components/Course/components/CourseNav.svelte";
|
||||
|
||||
export let slug;
|
||||
// export let slug;
|
||||
export let courseNavItem;
|
||||
export let lectureId;
|
||||
// export let lectureId;
|
||||
|
||||
const { page } = stores();
|
||||
let tab = "";
|
||||
let mode = "";
|
||||
|
||||
$: tab = $page.query.tab || "lectures";
|
||||
$: mode = $page.query.mode;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>ReactJS</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="root">
|
||||
<CourseNav />
|
||||
<div class="rightBar">
|
||||
{#if !courseNavItem}
|
||||
<Overview />
|
||||
{:else if courseNavItem === "score"}
|
||||
<Scoreboard />
|
||||
{:else if courseNavItem === "timetable"}
|
||||
<TimeTable />
|
||||
{:else if courseNavItem === "hometasks"}
|
||||
<HomeTask />
|
||||
{:else if courseNavItem === "lecture"}
|
||||
<Lecture path={$page.path} {tab} {mode} />
|
||||
{:else if courseNavItem === "people"}
|
||||
<People />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
display: flex;
|
||||
@@ -37,26 +62,3 @@
|
||||
width: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>ReactJS</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="root">
|
||||
<CourseNav />
|
||||
<div class="rightBar">
|
||||
{#if !courseNavItem}
|
||||
<Overview />
|
||||
{:else if courseNavItem === 'score'}
|
||||
<Scoreboard />
|
||||
{:else if courseNavItem === 'timetable'}
|
||||
<TimeTable />
|
||||
{:else if courseNavItem === 'hometasks'}
|
||||
<HomeTask />
|
||||
{:else if courseNavItem === 'lecture'}
|
||||
<Lecture path={$page.path} {tab} />
|
||||
{:else if courseNavItem === 'people'}
|
||||
<People />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
export default {
|
||||
edit: 'edit',
|
||||
view: 'view',
|
||||
};
|
||||
Reference in New Issue
Block a user