Very basic styling for the tasks page.
This commit is contained in:
parent
376039869d
commit
df2604aabd
|
@ -4,6 +4,12 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Captains Log</title>
|
<title>Captains Log</title>
|
||||||
<script type="text/javascript" src="/build/main.js"></script>
|
<script type="text/javascript" src="/build/main.js"></script>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
||||||
|
crossorigin="anonymous" />
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -2,8 +2,8 @@ module Dashboard exposing (Model, Msg, Task, init, update, view)
|
||||||
|
|
||||||
import Browser exposing (Document)
|
import Browser exposing (Document)
|
||||||
import Browser.Navigation as Nav
|
import Browser.Navigation as Nav
|
||||||
import Html exposing (Html, button, div, input, li, text, textarea)
|
import Html exposing (Html, button, div, h6, input, p, text, textarea)
|
||||||
import Html.Attributes exposing (placeholder, value)
|
import Html.Attributes exposing (class, placeholder, value)
|
||||||
import Html.Events exposing (onClick, onInput)
|
import Html.Events exposing (onClick, onInput)
|
||||||
import Http
|
import Http
|
||||||
import Json.Decode exposing (Decoder, field, int, list, map3, maybe, string)
|
import Json.Decode exposing (Decoder, field, int, list, map3, maybe, string)
|
||||||
|
@ -174,7 +174,7 @@ viewBody model =
|
||||||
div [] [ text "Loading" ]
|
div [] [ text "Loading" ]
|
||||||
|
|
||||||
Success tasks ->
|
Success tasks ->
|
||||||
div []
|
div [ class "container", class "bg-light" ]
|
||||||
[ viewTaskList tasks
|
[ viewTaskList tasks
|
||||||
, viewCreate model
|
, viewCreate model
|
||||||
]
|
]
|
||||||
|
@ -182,34 +182,49 @@ viewBody model =
|
||||||
|
|
||||||
viewTaskList : List Task -> Html Msg
|
viewTaskList : List Task -> Html Msg
|
||||||
viewTaskList tasks =
|
viewTaskList tasks =
|
||||||
div
|
div [ class "p-3" ]
|
||||||
[]
|
[ div
|
||||||
(text
|
[ class "list-group" ]
|
||||||
|
(List.map viewTaskListItem tasks
|
||||||
|
++ [ div [ class "list-group-item" ]
|
||||||
|
[ text
|
||||||
("Loaded "
|
("Loaded "
|
||||||
++ String.fromInt (List.length tasks)
|
++ String.fromInt (List.length tasks)
|
||||||
++ " tasks"
|
++ " tasks"
|
||||||
)
|
)
|
||||||
:: List.map viewTaskListItem tasks
|
]
|
||||||
|
]
|
||||||
)
|
)
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
viewTaskListItem : Task -> Html Msg
|
viewTaskListItem : Task -> Html Msg
|
||||||
viewTaskListItem task =
|
viewTaskListItem task =
|
||||||
li []
|
div [ class "list-group-item d-flex justify-content-between" ]
|
||||||
|
[ input [ Html.Attributes.type_ "checkbox" ] []
|
||||||
|
, div []
|
||||||
|
[ h6 []
|
||||||
|
[ text task.title ]
|
||||||
|
, p []
|
||||||
[ text
|
[ text
|
||||||
(task.title
|
(case task.description of
|
||||||
++ (case task.description of
|
|
||||||
Just "" ->
|
|
||||||
""
|
|
||||||
|
|
||||||
Just desc ->
|
Just desc ->
|
||||||
": " ++ desc
|
desc
|
||||||
|
|
||||||
_ ->
|
_ ->
|
||||||
""
|
""
|
||||||
)
|
)
|
||||||
)
|
]
|
||||||
, button [ onClick (DeleteTask task.id) ] [ text "Delete Task" ]
|
]
|
||||||
|
, div []
|
||||||
|
[ button
|
||||||
|
[ class "btn"
|
||||||
|
, class "btn-danger"
|
||||||
|
, onClick (DeleteTask task.id)
|
||||||
|
]
|
||||||
|
[ Html.i [ class "bi-trash3" ] []
|
||||||
|
]
|
||||||
|
]
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue