diff options
| -rw-r--r-- | src/App.svelte | 28 | ||||
| -rw-r--r-- | src/components/AssignLabs.svelte | 41 |
2 files changed, 61 insertions, 8 deletions
diff --git a/src/App.svelte b/src/App.svelte index 1242e0d..4664e1e 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -15,4 +15,32 @@ font-family: sans-serif, Proxima Nova; } } + + /* Custom Styles */ + @layer utilities { + .assign-box { + /* w-1/3 bg-green-500 flex flex-col border-solid hover:border-4 border-2 border-slate-400 */ + width: 33.33%; + display: flex; + flex-direction: column; + border-width: 4px; + border: solid; + border-color: rgb(148 163 184); + } + .assign-box:hover { + border-width: 6px; + border-color: black; + } + + .assign-box-header { + font-size: 1.5rem; + font-family: sans; + border: solid; + text-align: center; + height: 10%; + overflow: hidden; + } + + + } </style> diff --git a/src/components/AssignLabs.svelte b/src/components/AssignLabs.svelte index ce68dca..2655853 100644 --- a/src/components/AssignLabs.svelte +++ b/src/components/AssignLabs.svelte @@ -88,9 +88,18 @@ } $: clicked = 0; + + $: columns = [ + { header: "Peer Teachers", body: [...peerTeachers] }, + { header: "Labs", body: [...compatibleLabs] }, + { + header: selectedPeerTeacher?.name ?? "PT's Labs", + body: [...assignedLabs], + }, + ]; </script> -<div class="assign-labs"> +<!-- <div class="assign-labs"> <div class="column"> <div class="col-header">Peer Teachers</div> <List threeLine avatarList singleSelection class="editor-list"> @@ -165,10 +174,31 @@ {/each} </List> </div> +</div> --> + +<div class="flex flex-row h-full px-[10%] pt-[3%] pb-[10%]"> + <!-- Peer Teachers --> + <div class="flex flex-none flex-col w-1/3 border-4 border-solid rounded-lg border-slate-500 hover:border-8 hover:border-slate-700 overflow-hidden"> + <!-- Header --> + <div class="flex font-sans text-lg text-center flex-none h-10 border-2 rounded-t-md border-slate-400 overflow-hidden"> + Peer Teachers + </div> + <!-- Body --> + <div class="">Body</div> + </div> + + <!-- Labs --> + <!-- <div class="assign-box bg-red-500"> + <div class="assign-box-header">Labs</div> + <div /> + </div> --> + + <!-- Currently assigned to PT --> + <!-- <div class="assign-box bg-blue-500">Current</div> --> </div> <style> - .assign-labs { + /* .assign-labs { display: flex; min-height: 0; max-width: 100vw; @@ -188,11 +218,6 @@ border: 0.1em solid rgb(6, 69, 48); border-radius: 20em 20em; margin: 0.3em 1em 0em 1em; - /* font-size: 0.90em; */ - - /* border: 5px solid red; - border-style: solid; - background-color: pink; */ } .column { @@ -209,5 +234,5 @@ font-weight: 600; height: 70vh; overflow: auto; - } + } */ </style> |