load animation

src/lib/components/Layout.svelte

@@ -0,0 +1,62 @@
+
+<main>
+	<section class="title">
+		<slot name="title" />
+	</section>
+
+	{#if $$slots.toolbar}
+		<section class="toolbar">
+			<slot name="toolbar" />
+		</section>
+	{/if}
+
+	<section class="content">
+		<slot />
+	</section>
+</main>
+
+
+<!-- Styles -->
+
+
+<style lang="sass">
+
+	@use "$styles/variables.sass" as *
+	@use "$styles/palette.sass" as *
+
+	main
+		display: flex
+		flex-flow: column nowrap
+		place-items: stretch start
+
+		box-sizing: content-box
+		min-width: $small-column
+		max-width: $big-column
+
+		margin: auto
+		padding: $main-padding $tudelft-logo-width
+
+		@media screen and (max-width: $phone-breakpoint)
+			width: $small-column
+			padding: $main-padding
+			padding-bottom: $footer-height
+
+		.title
+			margin-bottom: 2rem
+			color: $dark-gray
+
+		.toolbar
+			display: flex
+			flex-flow: row nowrap
+			place-items: center start
+			gap: $form-small-gap
+
+			margin-bottom: 1rem
+
+		.content
+			display: flex
+			flex-flow: column nowrap
+			place-items: stretch start
+			gap: 2rem
+
+</style>

src/lib/components/ListRow.svelte

@@ -1,34 +1,33 @@
 
-<div class="list-row">
+<span class="list-row">
 	<slot />
-</div>
+</span>
 
 <style lang="sass">
 
 	@use "$styles/variables.sass" as *
 	@use "$styles/palette.sass" as *
 
 	.list-row
-		dsplay: flex
 		align-content: center
 		justify-content: center
 
+		box-sizing: content-box
 		height: $list-row-height
 		padding: $input-thin-padding $input-thick-padding
-		box-sizing: content-box
 
 		color: $dark-gray
 		border-bottom: 1px solid $gray
 
 		&:hover
 			background: $light-gray
 
-		&:first-child
+		&:first-of-type
 			margin-top: -$input-thin-padding
 			border-top-left-radius: $border-radius
 			border-top-right-radius: $border-radius
 
-		&:last-child
+		&:last-of-type
 			border-bottom: none
 			margin-bottom: -$input-thin-padding
 			border-bottom-left-radius: $border-radius

src/lib/components/Loading.svelte

@@ -0,0 +1,100 @@
+
+<div class="loader" />
+<div class="loader" />
+<div class="loader" />
+
+<style lang="sass">
+
+	@use 'sass:math'
+
+	@use "$styles/variables.sass" as *
+	@use "$styles/palette.sass" as *
+	
+	$radius: 10px
+	$diagonal: math.sqrt(2) * $radius
+	$duration: 1.25s
+		
+	.loader
+		position: absolute
+		right: 50%
+		bottom: 50%
+
+		width: $diagonal
+		height: $diagonal
+
+		animation: figure-eight $duration infinite linear
+
+		&:nth-child(2)
+			animation-delay: -$duration / 3
+
+		&:nth-child(3)
+			animation-delay: -$duration / 1.5
+
+		&::after
+			content: ''
+
+			position: absolute
+			translate: -50% -50%
+			top: 50%
+			left: 50%
+
+			width: 10px
+			height: 10px
+			border-radius: 50%
+			background: $purple
+
+	@keyframes figure-eight
+		0%, 100%
+			transform-origin: bottom right
+			translate: $diagonal 0
+			rotate: 0deg
+		
+		35%
+			transform-origin: bottom right
+			translate: $diagonal 0
+			rotate: 270deg
+
+		50%
+			transform-origin: top left
+			translate: 0 $diagonal
+			rotate: 270deg
+		
+		85%
+			transform-origin: top left
+			translate: 0 $diagonal
+			rotate: 0deg
+
+</style>
+
+<!-- .loader {
+  width: calc(100px - 14px);
+  height: 50px;
+  border-radius: 50px;
+  background: 
+   radial-gradient(farthest-side,#0000 calc(100% - 15px),#ccc calc(100% - 14px) 99%,#0000) left,
+   radial-gradient(farthest-side,#0000 calc(100% - 15px),#ccc calc(100% - 14px) 99%,#0000) right;
+  background-size: calc(50% + 7px) 100%;
+  background-repeat: no-repeat;
+  position: relative;
+  animation: l10-0 1s infinite linear;
+}
+.loader:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto; 
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #f03355;
+  transform-origin: -14px 50%;
+  animation: l10-1 0.5s infinite linear;
+}
+@keyframes l10-0 { 
+    0%,49.99% { transform:scaleX(1)}
+    50%,100% { transform:scaleX(-1)} 
+}
+@keyframes l10-1 { 
+    100% { transform:rotate(1turn)} 
+}
+ -->

src/lib/components/Modal.svelte

@@ -38,7 +38,6 @@
 
 <!-- Markup -->
 
-
 {#if visible}
 	<div class="background" />
 	<dialog class="modal" bind:this={modal} >
@@ -79,16 +78,16 @@
 		background-color: black
 
 	.modal
-		display: flex
-		flex-flow: column nowrap
-		gap: 1rem
-
 		position: fixed
 		translate: -50% -50%
 		z-index: 1000
 		top: 50%
 		left: 50%
 
+		display: flex
+		flex-flow: column nowrap
+		gap: 1rem
+
 		width: 100%
 		max-width: $small-column
 		padding: $card-thick-padding

src/lib/components/SortableList.svelte

@@ -1,15 +1,13 @@
 
 <script lang="ts">
 
-	import { flip } from 'svelte/animate'
-
-	export let list: any[]
+	const ANIMATION_DURATION = 250
 
-	let origin: number | null = null
-	let animating: boolean = false
-
-	const ANIMATION_DURATION = 100
+	// External dependencies
+	import { createEventDispatcher } from 'svelte'
+	import { flip } from 'svelte/animate'
 
+	// Functions
 	function getDataset(node: any) {
 		if (!node.dataset.index) {
 			return getDataset(node.parentElement)
@@ -28,8 +26,8 @@
 
 	function onDragOver(event: DragEvent) {
 		const data = getDataset(event.target)
-		if (!animating && data.index !== origin && origin !== null) {
-			rearrange(origin, data.index)
+		if (!animating.includes(data.id) && data.index !== origin && origin !== null) {
+			rearrange(data.id, origin, data.index)
 			origin = data.index
 		} 
 	}
@@ -38,18 +36,28 @@
 		origin = null
 	}
 
-	function rearrange(source: number, target: number) {
+	function rearrange(dropzone: number, from: number, to: number) {
 		const new_list = [...list]
-		const moved = new_list.splice(source, 1)
-		new_list.splice(target, 0, moved[0])
-		animating = true
+		const moved = new_list.splice(from, 1)
+		new_list.splice(to, 0, moved[0])
 		list = new_list
 
+		animating.push(dropzone)
+		dispatch('rearrange', { from, to })
+
 		setTimeout(() => {
-			animating = false
+			animating = animating.filter(id => id !== dropzone)
 		}, ANIMATION_DURATION)
 	}
 
+	// Variables
+	export let list: any[]
+
+	const dispatch = createEventDispatcher()
+	
+	let origin: number | null = null // Index of the element being dragged
+	let animating: number[] = []	 // List of elements currently being animated
+
 </script>
 
 {#if list?.length}
@@ -109,7 +117,7 @@
 				width: $total-icon-size
 				height: $total-icon-size
 
-				cursor: grab
+				cursor: ns-resize
 				user-select: none
 
 </style>

src/lib/scripts/controllers/CourseController.ts

@@ -119,6 +119,16 @@ class CourseController {
 		return result
 	}
 
+	// Copy properties
+	get copy_options(): DropdownOption<CourseController>[] {
+		const courses = this.cache.all(CourseController)
+		return courses.map(course => ({
+			value: course,
+			label: course.name,
+			validation: Validation.success()
+		}))
+	}
+
 	// Graph properties
 	get graph_ids(): number[] {
 		if (this._graph_ids === undefined)