Merge branch '17.spike-material2-ui'

obelisk/frontend/src/Frontend.hs

@@ -39,9 +39,71 @@ import Network.HTTP.Req (HttpException, GET(GET), NoReqBody(NoReqBody), https, r
 frontend :: Frontend (R FrontendRoute)
 frontend = Frontend
   { _frontend_head = do
-      el "title" $ text "Obelisk Minimal Example"
+      el "title" $ text "Tahoe-LAFS Mobile"
+
+      -- Include external Material 2 assets as per the tutorial at
+      -- https://m2.material.io/develop/web/getting-started
+      elAttr "link" ("href" =: "https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" <> "rel" =: "stylesheet") blank
+      elAttr "link" ("href" =: "https://fonts.googleapis.com/icon?family=Material+Icons" <> "rel" =: "stylesheet") blank
+      elAttr "link" ("href" =: "https://fonts.googleapis.com/css?family=Roboto:300,400,500" <> "rel" =: "stylesheet") blank
+      elAttr "script" ("src" =: "https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js") blank
+
       elAttr "link" ("href" =: $(static "main.css") <> "type" =: "text/css" <> "rel" =: "stylesheet") blank
+
+
   , _frontend_body = do
+
+      elClass "header" "mdc-top-app-bar mdc-ripple-surface" $
+        divClass "mdc-top-app-bar__row" $
+          elClass "section" "mdc-top-app-bar__section mdc-top-app-bar__section--align-start" $ do
+            elAttr "button" ("class" =: "material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" <> "aria-label" =: "Close") $
+              text "close"
+            elClass "span" "mdc-top-app-bar__title" $
+              text "Documents"
+
+            elAttr "section" ("class" =: "mdc-top-app-bar__section mdc-top-app-bar__section--align-end" <> "role" =: "toolbar") $ do
+              elAttr "button" ("class" =: "material-icons mdc-top-app-bar__action-item mdc-icon-button" <> "aria-label" =: "Share") $
+                text "share"
+              elAttr "button" ("class" =: "material-icons mdc-top-app-bar__action-item mdc-icon-button" <> "aria-label" =: "Delete") $
+                text "delete"
+              elAttr "button" ("Class" =: "material-icons mdc-top-app-bar__action-item mdc-icon-button" <> "aria-label" =: "Open menu") $
+                text "more_vert"
+
+      elClass "main" "mdc-top-app-bar--fixed-adjust" $ do
+
+        elClass "ul" "mdc-list mdc-list--two-line inline-demo-list" $ do
+          elClass "li" "mdc-list-item mdc-ripple-surface" $ do
+            elAttr "span" ("class" =: "mdc-list-item__graphic material-icons" <> "aria-hidden" =: "true") $
+              text "folder_open"
+            elAttr "span" ("class" =: "mdc-list-item__text") $ do
+              elAttr "span" ("class" =: "mdc-list-item__primary-text") $
+                text "Taxes"
+              elAttr "span" ("class" =: "mdc-list-item__secondary-text") $
+                text "1 file; 4 MB"
+
+          elClass "li" "mdc-list-item mdc-ripple-surface" $ do
+            elAttr "span" ("class" =: "mdc-list-item__graphic material-icons" <> "aria-hidden" =: "true") $
+              text "insert_drive_file"
+            elAttr "span" ("class" =: "mdc-list-item__text") $ do
+              elAttr "span" ("class" =: "mdc-list-item__primary-text") $
+                text "Notes.txt"
+              elAttr "span" ("class" =: "mdc-list-item__secondary-text") $
+                text "3 MB"
+
+          elClass "li" "mdc-list-item mdc-ripple-surface" $ do
+            elAttr "span" ("class" =: "mdc-list-item__graphic material-icons" <> "aria-hidden" =: "true") $
+              text "insert_drive_file"
+            elAttr "span" ("class" =: "mdc-list-item__text") $ do
+              elAttr "span" ("class" =: "mdc-list-item__primary-text") $
+                text "2023 Resume.pdf"
+              elAttr "span" ("class" =: "mdc-list-item__secondary-text") $
+                text "5 MB"
+
+        el "script" $
+          text "mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-ripple-surface'));"
+
+
+
       el "h1" $ text "Tahoe-LAFS Mobile"
 
       -- The API for encoding a CHK requires some servers to upload to.  We

obelisk/static/main.css

-p {
-  color: red;  
+body {
+  margin: 0;  
 }
+
+
+.mdc-list {
+  padding: 1em 0 0 0;
+}
+
+.mdc-list-item {
+  padding: 1em 1em 0 1em;
+}
+
+.mdc-list-item__graphic {
+  color: #6200ee;
+  font-size: 48px;
+}
+
+.mdc-list-item__text {
+  width: 100%;
+  margin: 0 0 0 1em;
+  padding: 0 0 1em 0;
+  border-bottom: 1px solid silver;
+}
+
+.mdc-list-item__secondary-text {
+  margin-top: -0.6em;
+}
+