diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/AssignLabs/PT.svelte | 18 |
1 files changed, 11 insertions, 7 deletions
diff --git a/src/components/AssignLabs/PT.svelte b/src/components/AssignLabs/PT.svelte index 297ee21..3ad50d1 100644 --- a/src/components/AssignLabs/PT.svelte +++ b/src/components/AssignLabs/PT.svelte @@ -2,11 +2,15 @@ import type PeerTeacher from "../../models/PeerTeacher"; import Icon from "../helpers/Icon.svelte"; export let pt: PeerTeacher; + + let modalID = () => { + return `my-modal-${pt.id}`; + } </script> <!-- PT Box --> <div - class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden" + class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden group" > <!-- Top half, name and button --> <div class="flex flex-row items-center "> @@ -15,19 +19,19 @@ <!-- Right half, button --> <!-- The button to open modal --> - <label for="my-modal-4" class=""> + <label for={modalID()} class=""> <Icon name="info" class="h-6 w-6" /> </label> <!-- Modal PT event info --> - <input type="checkbox" id="my-modal-4" class="modal-toggle" /> - <label for="my-modal-4" class="modal cursor-pointer"> - <label class="modal-box relative" for=""> - <h3 class="text-lg font-bold "> + <input type="checkbox" id={modalID()} class="modal-toggle" /> + <label for={modalID()} class="modal cursor-pointer"> + <label class="modal-box relative bg-slate-300" for=""> + <h3 class="text-lg font-bold font-serif underline"> {pt.name} </h3> {#each pt.events as e} - <p class="py-4"> + <p class="py-2"> {e.info} </p> {/each} |