Draft up a checking animation (ebaf2cf0) · Commits · Technik / teaching / yalikejazz

static/css/yalikejazz.css

+91 −0

Original line number	Diff line number	Diff line
		@@ -31,6 +31,7 @@ code {
		border-radius: 10px;
		box-shadow: 4px 2px 6px black;
		margin-top: 10px;
		overflow: hidden;
		}

		.card .title {
		@@ -67,6 +68,96 @@ code {

		.card .content {
		padding: 10px;
		position: relative;
		overflow: hidden;
		}

		.card .content .loader {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: none;
		justify-content: center;
		align-items: center;
		opacity: 0;
		flex-direction: column;
		color: #ffd533;
		}

		.card .content .loader .loader-bg {
		background-color: #334859;
		filter: blur(7px);
		opacity: .4;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		}

		.card .content .loader .loader-desc {
		z-index: 10;
		}

		.card .content .loader .loader-animation-wrapper {
		height: 2.4rem;
		position: relative;
		}

		.card .content .loader .loader-animation,
		.card .content .loader .loader-animation:before,
		.card .content .loader .loader-animation:after {
		background-color: #ffd533;
		display: block;
		width: .5rem;
		height: .7rem;
		border-radius: 50em;
		animation: escaleY 1s infinite ease-in-out;
		}

		.card .content .loader .loader-animation {
		position: relative;
		animation-delay: -0.16s;
		}

		.card .content .loader .loader-animation:before {
		content: '';
		position: absolute;
		top: 0;
		left: -1.4rem;
		animation-delay: -0.32s;
		}

		.card .content .loader .loader-animation:after {
		content: '';
		position: absolute;
		top: 0;
		left: 1.4rem;
		}


		@keyframes escaleY {
		0%, 80%, 100% {
		box-shadow: 0 0;
		height: 1.8rem;
		}
		40% {
		box-shadow: 0 -1em;
		height: 2.4rem;
		}
		}

		.card.loading .content .loader {
		display: flex;
		transition: opacity .1s ease-in-out;
		opacity: 1;
		}

		.card.loading .description, .card.loading .actions {
		transition: filter .1s ease-in-out;
		filter: blur(1px);
		}

		.actions button, .actions a.btn {

static/js/exercises.api.mjs

+10 −0

Original line number	Diff line number	Diff line
		@@ -111,6 +111,16 @@ export class Exercise {
		markAsCurrent(state) {
		state.exerciseIndex = this.index
		}

		// TODO: make nicer, relocate, ... ?
		markChecking() {
		let div = document.querySelector(".card[data-exercise-index='" + this.index + "']")
		div.classList.add("loading");
		}
		unmarkChecking() {
		let div = document.querySelector(".card[data-exercise-index='" + this.index + "']")
		div.classList.remove("loading");
		}
		}

		/**

static/js/exercises.cards.mjs

+9 −1

Original line number	Diff line number	Diff line
		@@ -73,7 +73,15 @@ export function createExerciseCard(exercise, onTitleClick) {
		actionsEl.append(...createExerciseCardActionButtons(
		exercise.manuallyConfirm.bind(exercise)
		))
		cardEl.querySelector(".content").append(descriptionEl, actionsEl)
		const loaderEl = createElementWithClass("div", "loader")
		loaderEl.innerHTML = `
		<div class="loader-bg"></div>
		<div class="loader-animation-wrapper">
		<span class="loader-animation"></span>
		</div>
		<span class="loader-desc">Checking your solution</span>
		`
		cardEl.querySelector(".content").append(descriptionEl, actionsEl, loaderEl)

		// When the title bar of an exercise is clicked, skip to that exercise
		const titleEl = cardEl.querySelector(".title")