Commit 0d08f7d7 authored by Jakob Moser's avatar Jakob Moser
Browse files

Move UI code to exercises.cards.mjs, rename class

parent ebaf2cf0

static/css/yalikejazz.css

+2 −2
Original line number Diff line number Diff line
@@ -149,13 +149,13 @@ code { 
    }

}



.card.loading .content .loader {

.card.verifying .content .loader {

    display: flex;

    transition: opacity .1s ease-in-out;

    opacity: 1;

}



.card.loading .description, .card.loading .actions {

.card.verifying .description, .card.verifying .actions {

    transition: filter .1s ease-in-out;

    filter: blur(1px);

}

static/js/exercises.api.mjs

+0 −10
Original line number Diff line number Diff line
@@ -111,16 +111,6 @@ 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

+16 −0
Original line number Diff line number Diff line
@@ -35,6 +35,22 @@ export function displayAsNonCurrent(cardEl) { 
    }

}



/**

 * Changes the appearance of the given exercise card so it looks like it is currently being verified

 * @param {HTMLElement} cardEl The .card element

 */

export function displayAsVerifying(cardEl) {

    cardEl.classList.add("verifying")

}



/**

 * Changes the appearance of the given exercise card so it looks normal (no verification indicator)

 * @param {HTMLElement} cardEl The .card element

 */

export function displayAsNonVerifying(cardEl) {

    cardEl.classList.remove("verifying")

}



/**

 * Create a confirm and a reset button that can be appended to the actions section of

 * an exercise card.