add some css and structure to html

5 years ago · 1b7561b297
parent 0ac0d71141
commit 1b7561b297
5 changed files with 52 additions and 22 deletions
--- a/backend/backend.iml
+++ b/backend/backend.iml
@ -3,9 +3,10 @@
  <component name="NewModuleRootManager" inherit-compiler-output="true">
    <exclude-output />
    <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$/test" isTestSource="true" />
-      <sourceFolder url="file://$MODULE_DIR$/resources/public/compiled" type="java-resource" />
+      <excludePattern pattern="elm-stuff" />
    </content>
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
--- a/backend/resources/public/index.html
+++ b/backend/resources/public/index.html
@ -3,7 +3,8 @@
    <head>
        <meta charset="utf-8">
        <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>
    <body>
        <script>
--- a/frontend/assets/sass/style.scss
+++ b/frontend/assets/sass/style.scss
@ -1,3 +1,37 @@
 html {
  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;
+}
--- a/frontend/src/Main.elm
+++ b/frontend/src/Main.elm
@ -83,8 +83,17 @@ view : Model -> Browser.Document Msg
 view model =
    { title = "Open-Retro"
    , body =
-        [ h1 [] [ text "Open-Retro" ]
-        , nav [] [ Navigation.navTree ]
+        [ h1 [ class "app-title" ] [ text "Open-Retro" ]
+        , nav []
+            [ ul []
+                [ li []
+                    [ input [ placeholder "Board ID..." ] []
+                    ]
+                , li []
+                    [ text "⊕ New board"
+                    ]
+                ]
+            ]
        , main_ [] (appContent model)
        , node "link" [ rel "stylesheet", href "/compiled/css/style.css" ] []
        ]
@ -100,5 +109,4 @@ appContent model =

 homePage : Model -> List (Html Msg)
 homePage model =
-    [ h2 [] [ text "Home" ]
-    ]
+    []
--- a/frontend/src/Navigation.elm
+++ b/frontend/src/Navigation.elm
@ -1,4 +1,4 @@
-module Navigation exposing (Route(..), linkClicked, navTree, routeParser)
+module Navigation exposing (Route(..), linkClicked, routeParser)

 import Browser
 import Browser.Navigation as Nav
@ -26,20 +26,6 @@ routeParser : Parser (Route -> Route) Route
 routeParser =
    oneOf
        [ map Home top
-        --, 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" ] ] ]
-                ]
-            ]
+        --, map ShowTicket (s "tickets" </> Url.Parser.int)
        ]