add some css and structure to html

master
Josha von Gizycki 4 years ago
parent 0ac0d71141
commit 1b7561b297

@ -3,9 +3,10 @@
<component name="NewModuleRootManager" inherit-compiler-output="true"> <component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output /> <exclude-output />
<content url="file://$MODULE_DIR$"> <content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/resources" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" /> <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/test" isTestSource="true" /> <sourceFolder url="file://$MODULE_DIR$/test" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/resources/public/compiled" type="java-resource" /> <excludePattern pattern="elm-stuff" />
</content> </content>
<orderEntry type="inheritedJdk" /> <orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" /> <orderEntry type="sourceFolder" forTests="false" />

@ -3,7 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Open-Retro</title> <title>Open-Retro</title>
<script src="/compiled/js/app.js"></script> <link rel="stylesheet" href="compiled/css/style.css">
<script src="compiled/js/app.js"></script>
</head> </head>
<body> <body>
<script> <script>

@ -1,3 +1,37 @@
html { html {
font-family: sans-serif; font-family: sans-serif;
} }
body {
display: grid;
grid-template-areas:
"title navbar"
"content content";
grid-template-columns: 20rem 1fr;
margin: 0;
}
.app-title {
grid-area: title;
margin: 0;
}
nav {
grid-area: navbar;
align-self: center;
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
display: inline-block;
margin-right: 1rem;
}
}
}
main {
grid-area: content;
}

@ -83,8 +83,17 @@ view : Model -> Browser.Document Msg
view model = view model =
{ title = "Open-Retro" { title = "Open-Retro"
, body = , body =
[ h1 [] [ text "Open-Retro" ] [ h1 [ class "app-title" ] [ text "Open-Retro" ]
, nav [] [ Navigation.navTree ] , nav []
[ ul []
[ li []
[ input [ placeholder "Board ID..." ] []
]
, li []
[ text " New board"
]
]
]
, main_ [] (appContent model) , main_ [] (appContent model)
, node "link" [ rel "stylesheet", href "/compiled/css/style.css" ] [] , node "link" [ rel "stylesheet", href "/compiled/css/style.css" ] []
] ]
@ -100,5 +109,4 @@ appContent model =
homePage : Model -> List (Html Msg) homePage : Model -> List (Html Msg)
homePage model = homePage model =
[ h2 [] [ text "Home" ] []
]

@ -1,4 +1,4 @@
module Navigation exposing (Route(..), linkClicked, navTree, routeParser) module Navigation exposing (Route(..), linkClicked, routeParser)
import Browser import Browser
import Browser.Navigation as Nav import Browser.Navigation as Nav
@ -26,20 +26,6 @@ routeParser : Parser (Route -> Route) Route
routeParser = routeParser =
oneOf oneOf
[ map Home top [ map Home top
--, map ShowTicket (s "tickets" </> Url.Parser.int)
]
--, map ShowTicket (s "tickets" </> Url.Parser.int)
navTree : Html msg
navTree =
ul []
[ li [] [ a [ href "/" ] [ text "Home" ] ]
, li [] [ a [ href "/projects" ] [ text "Projects" ] ]
, li []
[ details [ Attr.attribute "open" "open" ]
[ summary [] [ a [ href "/tickets" ] [ text "Tickets" ] ]
, ul []
[ li [] [ a [ href "/tickets/new" ] [ text "New Ticket" ] ] ]
]
]
] ]

Loading…
Cancel
Save