diff --git a/src/Pages/QuizView.elm b/src/Pages/QuizView.elm index b78abd77fe4f00e938ae87101ebb01171b40d282..1a4d5aef3ccf4ab0c9015d2c04dab8c83c735134 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 87d17d0c94cc3aeecb1a5e9b24ac43fbfff4a66c..336706f2cacf0c80431879b272d586bb3ebe617f 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 {