From 6b121bf634e2736ca9b7959e72fe3f859a96cf64 Mon Sep 17 00:00:00 2001
From: aqquq <jannik.wurche@student.uni-halle.de>
Date: Tue, 2 Jul 2024 13:51:18 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=20display=20current=20index=20in?=
=?UTF-8?q?=20navBar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Pages/QuizView.elm | 16 ++++++++++++----
src/style.css | 14 +++++++++++---
2 files changed, 23 insertions(+), 7 deletions(-)
diff --git a/src/Pages/QuizView.elm b/src/Pages/QuizView.elm
index b78abd7..1a4d5ae 100644
--- a/src/Pages/QuizView.elm
+++ b/src/Pages/QuizView.elm
@@ -20,7 +20,7 @@ questionView i q =
displayQuestionPage question
_ ->
displayEndPage
- navBarDiv = navBar (List.length q.questions)
+ navBarDiv = navBar i (List.length q.questions)
in
div [ class "questionView" ]
[ navBarDiv, toDisplay ]
@@ -142,10 +142,18 @@ prevPageBtn =
[ onClick GoToPrevQuestion, class "navBtn" ]
[ text "Zurück" ]
-navBar : Int -> Html Msg
-navBar n =
+navBar : Int -> Int -> Html Msg
+navBar index n =
let
- buttons = List.range 0 (n - 1) |> List.map (\x -> button [ onClick (GoToQuestion x), class "navBarBtn" ] [ text ("Frage " ++ String.fromInt (x + 1))])
+ buttons = List.range 0 (n - 1) |> List.map
+ (\x ->
+ let
+ classAttribute = if x == index then "navBarBtn curIndex" else "navBarBtn"
+ in
+ button
+ [ onClick (GoToQuestion x), class classAttribute ]
+ [ text ("Frage " ++ String.fromInt (x + 1))]
+ )
in
div [ class "navBar" ]
[ div [ class "navBarBtns" ] buttons
diff --git a/src/style.css b/src/style.css
index 87d17d0..336706f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -311,12 +311,20 @@ button.navBarBtn {
margin-bottom: 4px;
background-color: transparent;
color: #fff;
- border: none;
- transition: color 0.2s ease;
+ border: solid;
+ border-radius: 5px;
+ border-width: thin;
+ border-color: transparent;
+ transition: color 0.2s ease, border-color 1.0s ease;
}
-button.navBarBtn:hover {
+button.navBarBtn:hover:not(.curIndex) {
color: #007acc;
+ cursor: pointer;
+}
+
+button.navBarBtn.curIndex {
+ border-color: #fff;
}
button.navBtn {
--
GitLab