drew
/
captains-log
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Very basic styling for the tasks page.

This commit is contained in:
Drew Galbraith 2024-07-06 18:12:29 -07:00
parent 376039869d
commit df2604aabd
2 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/index.html
View File

@ -4,6 +4,12 @@
<meta charset="UTF-8" />
<title>Captains Log</title>
<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>
<body>
<script>

59
frontend/src/Dashboard.elm
View File

@ -2,8 +2,8 @@ module Dashboard exposing (Model, Msg, Task, init, update, view)
import Browser exposing (Document)
import Browser.Navigation as Nav
import Html exposing (Html, button, div, input, li, text, textarea)
import Html.Attributes exposing (placeholder, value)
import Html exposing (Html, button, div, h6, input, p, text, textarea)
import Html.Attributes exposing (class, placeholder, value)
import Html.Events exposing (onClick, onInput)
import Http
import Json.Decode exposing (Decoder, field, int, list, map3, maybe, string)
@ -174,7 +174,7 @@ viewBody model =
div [] [ text "Loading" ]
Success tasks ->
div []
div [ class "container", class "bg-light" ]
[ viewTaskList tasks
, viewCreate model
]
@ -182,34 +182,49 @@ viewBody model =
viewTaskList : List Task -> Html Msg
viewTaskList tasks =
div
[]
(text
("Loaded "
++ String.fromInt (List.length tasks)
++ "tasks"
div [ class "p-3" ]
[ div
[ class "list-group" ]
(List.map viewTaskListItem tasks
++ [ div [ class "list-group-item" ]
[ text
("Loaded "
++ String.fromInt (List.length tasks)
++ " tasks"
)
]
]
)
:: List.map viewTaskListItem tasks
)
]
viewTaskListItem : Task -> Html Msg
viewTaskListItem task =
li []
[ text
(task.title
++ (case task.description of
Just "" ->
""
div [ class "list-group-item d-flex justify-content-between" ]
[ input [ Html.Attributes.type_ "checkbox" ] []
, div []
[ h6 []
[ text task.title ]
, p []
[ text
(case task.description of
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" ] []
]
]
]