diff --git a/index.html b/index.html index 84d90b1..b12c3cc 100644 --- a/index.html +++ b/index.html @@ -9,42 +9,53 @@
-
-
- {{ store_text(item_idx) }} -
-
-
-
{{ helptext }}
- -
-
-
- - - -
- +
+
+ {{ store_text(item_idx) }} +
+
+
diff --git a/quiz.css b/quiz.css index 248b9f8..48435be 100644 --- a/quiz.css +++ b/quiz.css @@ -13,10 +13,46 @@ body { margin: 0 auto; width: 960px; } -#quiz .store { - border-bottom: 2px solid #000; - padding: 5px; +#quiz .overlay { + background-color: rgba(0, 0, 0, 0.4); + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; } +#quiz .dialog { + background-color: #fff; + height: calc(100vh - 100px); + margin: 50px; + + display: grid; + grid-template-columns: calc(66.667vw - 89px) auto 30px; + grid-template-rows: 30px 100px auto; +} + +#quiz .solution { + border-right: 3px solid #444; + grid-area: 1 / 1 / 4 / 2; +} +#quiz .description { + grid-area: 1 / 2 / 3 / 3; + padding: 10px; +} +#quiz .close_button { + cursor: pointer; + grid-area: 1 / 3 / 2 / 4; +} +#quiz .close_button:hover { + background-color: #e8912a; +} +#quiz .store { + border-top: 3px solid #444; + grid-area: 3 / 2 / 4 / 4; + overflow-y: auto; + padding: 5px 0 0 5px; +} + #quiz .card { background-color: #eee; display: inline-block; @@ -24,7 +60,7 @@ body { min-height: 50px; padding: 5px; vertical-align: top; - width: 166px; + width: calc(16.667vw - 45.5px); } #quiz .store .card { cursor: pointer; @@ -39,27 +75,9 @@ body { #quiz .card.incorrect { background-color: #faa; } -#quiz .state { - border-bottom: 2px solid #000; - padding: 5px; -} -#quiz .state .helptext { - margin: 5px; -} -#quiz .state button { - background-color: #e8912a; - border-radius: 0; - border-width: 0; - cursor: pointer; - font-family: "Roboto Slab"; - font-size: 16px; - margin: 5px; - padding: 5px; -} -#quiz .state button:hover { - background-color: #facc99; -} + #quiz .solution { + overflow-y: auto; padding: 20px 5px; } #quiz .row .card { @@ -82,7 +100,7 @@ body { } #quiz .arrow svg { cursor: pointer; - left: 190px; + left: calc(16.667vw - 26px); position: relative; top: -10px; } diff --git a/quiz.js b/quiz.js index d8a4b17..9b59716 100644 --- a/quiz.js +++ b/quiz.js @@ -93,6 +93,7 @@ function choose_incorrects(idx_vals) { var app = new Vue({ el: "#quiz", data: { + is_open: true, cards_content, store: { section: 0, @@ -112,12 +113,12 @@ var app = new Vue({ } } else { if (this.solution.length == 0) { - return "Klicke oben auf ein Element des Gottesdienstablaufs, um es nach unten zu übernehmen."; + return "Klicke rechts auf ein Element des Gottesdienstablaufs, um es nach links zu übernehmen."; } else if (this.solution.length == 1) { if (this.store.selected == null) { - return "Wähle nun von oben das nächste Element aus."; + return "Wähle nun von rechts das nächste Element aus."; } else { - return "Klicke unten auf einen grünen Pfeil, um es an der richtigen Stelle in die Liste einzuordnen."; + return "Klicke links auf einen grünen Pfeil, um es an der richtigen Stelle in die Liste einzuordnen."; } } else { return "Bringe nun auch alle weiteren Elemente in die richtige Reihenfolge.";