Commit 083e1408 authored by Jakob Moser's avatar Jakob Moser
Browse files

Replace browser hand-in popup with one of our own 

See issue #49
parent 962bce91

static/css/test.css

+16 −3
Original line number Diff line number Diff line
@@ -4,7 +4,7 @@ body { 
    grid-template-columns: 1fr 1fr;

}



body.welcome-shown {

body.welcome-shown, body.hand-in-shown {

    overflow: hidden;

}
@@ -21,7 +21,7 @@ body.welcome-shown { 
    grid-template-columns: 1fr 2fr 1fr;

}



.welcome-shown .overlay {

.welcome-shown .overlay, .hand-in-shown .overlay {

    display: grid;

}
@@ -43,10 +43,23 @@ body.welcome-shown { 
    box-shadow: 4px 4px 4px black;

}



.welcome-shown #welcome-dialog {

.welcome-shown #welcome-dialog, .hand-in-shown #hand-in-dialog  {

    display: block;

}



#hand-in-dialog .actions button, #hand-in-dialog .actions a.btn {

    /* I don't know why, but in this particular dialog, the margin above the action buttons just doesn't look good. */

    margin-top: 0;

}



.token-container {

    overflow-wrap: anywhere;

    background-color: #001220;

    color: #f0f0f0;

    border-radius: 5px;

    padding: 8px 10px;

}



.dialog h1 {

    margin-top: 0;

}

static/js/yalikejazz.mjs

+7 −3
Original line number Diff line number Diff line
@@ -89,9 +89,10 @@ function initActionLinks() { 
    document.querySelectorAll("[data-action]").forEach(el => {

        const handler = {

            "hand-in": function () {

                navigator.clipboard.writeText(currentTest.getHandInToken(currentState))

                alert("Bitte schreibe von deiner CL-Mail-Adresse aus eine Mail an die GT, und schicke das folgende Token mit:\n\n" + currentTest.getHandInToken(currentState)

                + "\nDas Token wurde in die Zwischenablage kopiert, du kannst es in der Mail also direkt einfach einfügen.")

                const handInToken = currentTest.getHandInToken(currentState)

                navigator.clipboard.writeText(handInToken)

                document.querySelector("#hand-in-token").textContent = handInToken

                document.body.classList.add("hand-in-shown")

            },

            "begin": function () {

                document.body.classList.remove("welcome-shown")
@@ -100,6 +101,9 @@ function initActionLinks() { 
            "continue": function () {

                document.body.classList.remove("welcome-shown")

            },

            "complete": function () {

                document.body.classList.remove("hand-in-shown")

            },

            "welcome-again": function () {

                document.querySelector("#welcome-dialog [data-action='begin']").style.display = "none"

                document.querySelector("#welcome-dialog [data-action='continue']").style.display = "block"

static/test.html

+17 −0
Original line number Diff line number Diff line
@@ -23,6 +23,23 @@ 
                <button class="big" data-action="continue">Weiter geht's :)</button>

            </div>

        </div>

        <div class="dialog" id="hand-in-dialog">

            <div class="message">

                <h1>Abgeben</h1>

                <p>

                    Bitte schreibe von deiner CL-Mail-Adresse aus eine Mail an die Gruppe Technik, und schicke das folgende Token mit:

                </p>

                <p class="token-container">

                    <code id="hand-in-token"></code>

                </p>

                <p>

                    Das Token wurde in die Zwischenablage kopiert, du kannst es in der Mail also direkt einfügen.

                </p>

            </div>

            <div class="actions">

                <button class="primary big" data-action="complete">Fertig.</button>

            </div>

        </div>

    </div>



    <div id="term_wrap">