Add footer + header + start styling #173

2024-11-24 05:45:11 +03:00 · 2017-11-05 20:15:49 +01:00 · 2017-11-05 20:15:49 +01:00 · eeae27b86e
commit eeae27b86e
parent b7b6afce76
7 changed files with 179 additions and 134 deletions
--- a/front-ps/common/Guide/CategoryDetail/View/Layout.purs
+++ b/front-ps/common/Guide/CategoryDetail/View/Layout.purs
@ -5,15 +5,8 @@ import Guide.CategoryDetail.View.NotFound as NotFound
 import Guide.CategoryDetail.Routes (Route(..))
 import Guide.CategoryDetail.State (State(..))
 import Guide.CategoryDetail.Events (Event)
-import CSS (CSS, fromString, (?), fontSize, display, inlineBlock, marginTop, marginRight, marginLeft, px, value, key, color, backgroundColor, padding, borderRadius)
-import CSS.Border (border, solid)
-import CSS.TextAlign (center, textAlign)
-import CSS.Text (textDecoration, noneTextDecoration, letterSpacing)
-import CSS.Text.Transform (textTransform, uppercase)
-import Color (rgb)
-import Control.Bind (discard)
-import Data.Function (($), (#))
-import Pux.DOM.HTML (HTML, style)
+import Data.Function (($))
+import Pux.DOM.HTML (HTML)
 import Text.Smolder.HTML (div)
 import Text.Smolder.HTML.Attributes (className)
 import Text.Smolder.Markup ((!))
@ -21,50 +14,6 @@ import Text.Smolder.Markup ((!))
 view :: State -> HTML Event
 view (State st) =
  div ! className "app" $ do
-    style css
-
    case st.route of
      (NotFound url) -> NotFound.view (State st)
      (CategoryDetail _ _)-> CategoryDetail.view (State st)
-
-css :: CSS
-css = do
-  let green = rgb 14 196 172
-      blue = rgb 14 154 196
-      white = rgb 250 250 250
-
-  fromString "body" ? do
-    backgroundColor (rgb 0 20 30)
-    key (fromString "font-family") (value "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif")
-    color white
-    textAlign center
-
-  fromString "h1" ? do
-    fontSize (48.0 #px)
-    marginTop (48.0 #px)
-    textTransform uppercase
-    letterSpacing (6.0 #px)
-
-  fromString "a" ? do
-    display inlineBlock
-    borderRadius (2.0 #px) (2.0 #px) (2.0 #px) (2.0 #px)
-    padding (6.0 #px) (6.0 #px) (6.0 #px) (6.0 #px)
-    textDecoration noneTextDecoration
-
-  fromString ".guide" ? do
-    border solid (2.0 #px) green
-    color green
-    marginRight (10.0 #px)
-
-  fromString ".guide:hover" ? do
-    backgroundColor green
-    color white
-
-  fromString ".github" ? do
-    border solid (2.0 #px) blue
-    color blue
-    marginLeft (10.0 #px)
-
-  fromString ".github:hover" ? do
-    backgroundColor blue
-    color white
--- a/front-ps/common/Guide/CategoryOverview/View/CategoryOverview.purs
+++ b/front-ps/common/Guide/CategoryOverview/View/CategoryOverview.purs
@ -11,16 +11,16 @@ import Guide.Common.Types (CCategories, unwrapUid)
 import Network.RemoteData (RemoteData(..))
 import Pux.DOM.HTML (HTML) as P
 import Pux.DOM.HTML.Attributes (key) as P
-import Text.Smolder.HTML (div, h1, a, ul, li) as S
-import Text.Smolder.HTML.Attributes (href) as S
+import Text.Smolder.HTML (div, a) as S
+import Text.Smolder.HTML.Attributes (href, className) as S
 import Text.Smolder.Markup ((!))
 import Text.Smolder.Markup (text) as S

 view :: State -> P.HTML Event
 view st@(State state) =
-  S.div do
-    S.h1 $ S.text "Category Overview"
-    case state.categories of
+  S.div
+    ! S.className "content"
+    $ case state.categories of
        NotAsked -> S.div $ S.text "Categories not asked."
        Loading -> S.div $ S.text "Loading data..."
        Failure error -> S.div $ S.text $ "Error loading data: " <> (show error)
@ -28,13 +28,16 @@ view st@(State state) =

 catsView :: State -> CCategories -> P.HTML Event
 catsView st@(State state) cats =
-  S.ul
+  S.div
+    ! S.className "columns is-multiline"
    $ for_ cats (catView st)

 catView :: State -> CategoryInfo -> P.HTML Event
 catView (State state) (CategoryInfo cat) =
-  S.li
+  S.div
+    ! S.className "column is-one-third-desktop is-half"
    ! P.key (unwrapUid cat.categoryInfoUid) $ do
    S.a
+      ! S.className "subtitle is-4"
      ! S.href (categoryDetailUrl state.categoryName cat.categoryInfoUid)
      $ S.text cat.categoryInfoTitle
--- a/front-ps/common/Guide/CategoryOverview/View/Layout.purs
+++ b/front-ps/common/Guide/CategoryOverview/View/Layout.purs
@ -1,70 +1,25 @@
 module Guide.CategoryOverview.View.Layout where

+import Prelude
+
 import Guide.CategoryOverview.View.CategoryOverview as CategoryOverview
+import Guide.Common.View.Header as Header
+import Guide.Common.View.Footer as Footer
 import Guide.CategoryOverview.View.NotFound as NotFound
 import Guide.CategoryOverview.Routes (Route(..))
 import Guide.CategoryOverview.State (State(..))
 import Guide.CategoryOverview.Events (Event)
-import CSS (CSS, fromString, (?), fontSize, display, inlineBlock, marginTop, marginRight, marginLeft, px, value, key, color, backgroundColor, padding, borderRadius)
-import CSS.Border (border, solid)
-import CSS.TextAlign (center, textAlign)
-import CSS.Text (textDecoration, noneTextDecoration, letterSpacing)
-import CSS.Text.Transform (textTransform, uppercase)
-import Color (rgb)
-import Control.Bind (discard)
-import Data.Function (($), (#))
-import Pux.DOM.HTML (HTML, style)
-import Text.Smolder.HTML (div)
-import Text.Smolder.HTML.Attributes (className)
+import Pux.DOM.HTML (HTML) as P
+import Text.Smolder.HTML (div) as S
+import Text.Smolder.HTML.Attributes (className) as S
 import Text.Smolder.Markup ((!))

-view :: State -> HTML Event
-view (State st) =
-  div ! className "app" $ do
-    style css
-
+view :: State -> P.HTML Event
+view state@(State st) =
+  S.div
+    ! S.className "column" $ do
+      Header.view state
      case st.route of
-      (NotFound url) -> NotFound.view (State st)
-      (CategoryOverview name)-> CategoryOverview.view (State st)
-
-css :: CSS
-css = do
-  let green = rgb 14 196 172
-      blue = rgb 14 154 196
-      white = rgb 250 250 250
-
-  fromString "body" ? do
-    backgroundColor (rgb 0 20 30)
-    key (fromString "font-family") (value "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif")
-    color white
-    textAlign center
-
-  fromString "h1" ? do
-    fontSize (48.0 #px)
-    marginTop (48.0 #px)
-    textTransform uppercase
-    letterSpacing (6.0 #px)
-
-  fromString "a" ? do
-    display inlineBlock
-    borderRadius (2.0 #px) (2.0 #px) (2.0 #px) (2.0 #px)
-    padding (6.0 #px) (6.0 #px) (6.0 #px) (6.0 #px)
-    textDecoration noneTextDecoration
-
-  fromString ".guide" ? do
-    border solid (2.0 #px) green
-    color green
-    marginRight (10.0 #px)
-
-  fromString ".guide:hover" ? do
-    backgroundColor green
-    color white
-
-  fromString ".github" ? do
-    border solid (2.0 #px) blue
-    color blue
-    marginLeft (10.0 #px)
-
-  fromString ".github:hover" ? do
-    backgroundColor blue
-    color white
+        (NotFound url) -> NotFound.view state
+        (CategoryOverview name)-> CategoryOverview.view state
+      Footer.view state
--- a/front-ps/common/Guide/Common/View/Footer.purs
+++ b/front-ps/common/Guide/Common/View/Footer.purs
@ -0,0 +1,68 @@
+module Guide.Common.View.Footer where
+
+import Prelude
+
+import Guide.CategoryOverview.Events (Event)
+import Guide.CategoryOverview.State (State(..))
+import Pux.DOM.HTML (HTML) as P
+import Text.Smolder.HTML (div, a, ul, li) as S
+import Text.Smolder.HTML.Attributes (href, className) as S
+import Text.Smolder.Markup ((!))
+import Text.Smolder.Markup (text) as S
+import Bulma.Layout.Layout (footer) as Bulma
+import Bulma.Core (runClazzName, runClazzNames) as Bulma
+import Bulma.Modifiers.Typography (alignment, Alignment(..)) as Bulma
+import Bulma.Modifiers.Responsive (showInlineFlex') as Bulma
+import Bulma.Components.NavBar (navbar, navbarItem) as Bulma
+
+view :: State -> P.HTML Event
+view st@(State state) =
+  S.div
+    ! S.className (Bulma.runClazzNames
+                    [ Bulma.footer
+                    , Bulma.alignment Bulma.Centered
+                    ])
+    $ S.ul
+      ! S.className (Bulma.runClazzNames
+                      [ Bulma.navbar
+                      , Bulma.showInlineFlex'
+                      ])
+      $ do
+        S.li
+          ! S.className (Bulma.runClazzName Bulma.navbarItem)
+          $ S.div $ do
+            S.text "made by "
+            S.a
+              ! S.href "https://artyom.me/"
+              $ S.text "Artyom"
+            S.text " & "
+            S.a
+              ! S.href "https://github.com/aelve/guide/graphs/contributors"
+              $ S.text "others"
+        S.li
+          ! S.className (Bulma.runClazzName Bulma.navbarItem)
+          $ S.div $ do
+            S.a
+              ! S.href "https://github.com/aelve/guide"
+              $ S.text "source"
+            S.text "/"
+            S.a
+              ! S.href "https://github.com/aelve/guide/issues"
+              $ S.text "issue tracker"
+        S.li
+          ! S.className (Bulma.runClazzName Bulma.navbarItem)
+          $ S.a
+              ! S.href "https://guide.aelve.com/unwritten-rules"
+              $ S.text "rules"
+        S.li
+          ! S.className (Bulma.runClazzName Bulma.navbarItem)
+          $ S.a
+              ! S.href "https://guide.aelve.com/donate"
+              $ S.text "donate"
+        S.li
+          ! S.className (Bulma.runClazzName Bulma.navbarItem)
+          $ S.div $ do
+            S.text "licensed under "
+            S.a
+              ! S.href "https://guide.aelve.com/license"
+              $ S.text "CC+ BY-SA 4.0"
--- a/front-ps/common/Guide/Common/View/Header.purs
+++ b/front-ps/common/Guide/Common/View/Header.purs
@ -0,0 +1,38 @@
+module Guide.Common.View.Header where
+
+import Prelude
+
+import Guide.CategoryOverview.Events (Event)
+import Guide.CategoryOverview.State (State(..))
+import Pux.DOM.HTML (HTML) as P
+import Text.Smolder.HTML (div, h1, a, section, span) as S
+import Text.Smolder.HTML.Attributes (href, className) as S
+import Text.Smolder.Markup ((!))
+import Text.Smolder.Markup (text) as S
+
+view :: State -> P.HTML Event
+view st@(State state) =
+  S.section
+    ! S.className "hero"
+    $ S.div
+      ! S.className "hero-body"
+      $ S.div
+        ! S.className "navbar"
+        $ S.div
+          ! S.className "container" $ do
+            S.div
+              ! S.className "navbar-brand"
+              $ S.div
+                ! S.className "level" $ do
+                  S.h1
+                    ! S.className "title is-1" $ do
+                      S.text "Guide |"
+                      S.span
+                        ! S.className "subtitle is-2 has-text-weight-light"
+                        $ S.text " Haskell" -- TODO(sectore): Grap title from state
+            S.div
+              ! S.className "navbar-end"
+              $ S.a
+                ! S.className "button"
+                ! S.href "./auth"
+                $ S.text "login"
--- a/front-ps/common/vendor.scss
+++ b/front-ps/common/vendor.scss
@ -0,0 +1,18 @@
+@import "~bulma/sass/utilities/initial-variables.sass";
+// overrride everything of bluma variables here
+
+// colors
+$color0: white;
+$color1: black;
+$color2: #008ACE;
+
+$footer-background-color: $color0;
+$dark: $color1;
+$link: $color2;
+$link-hover: $color2;
+// fonts
+$family-serif: sans-serif;
+$family-primary: $family-serif;
+
+// import bulma from node-modules folder at least
+@import "~bulma/bulma";
--- a/front-ps/server/Guide/Server/HTMLWrapper.purs
+++ b/front-ps/server/Guide/Server/HTMLWrapper.purs
@ -2,36 +2,50 @@ module Guide.Server.HTMLWrapper where

 import Prelude

+import CSS.Render (render, renderedSheet)
+import CSS.String (fromString)
+import CSS.Stylesheet (CSS, (?))
+import CSS.Text (textDecoration, underline)
+import Data.Maybe (fromMaybe)
+import Data.Monoid (mempty)
 import Pux.DOM.HTML (HTML) as P
 import Pux.DOM.HTML.Attributes (key) as P
 import Pux.Renderer.React (dangerouslySetInnerHTML) as P
-
-import Text.Smolder.HTML (body, div, head, html, link, meta, script, title, br) as S
-import Text.Smolder.HTML.Attributes (charset, content, href, id, name, rel, src, type') as S
-import Text.Smolder.Markup (text) as S
+import Text.Smolder.HTML (body, div, head, html, link, meta, script, style, title, br) as S
+import Text.Smolder.HTML.Attributes (charset, className, content, href, id, name, rel, src, type') as S
 import Text.Smolder.Markup ((!))
+import Text.Smolder.Markup (empty, text) as S
+
+globalStyle :: CSS
+globalStyle = do
+  fromString "a:hover" ? do
+    textDecoration underline

 htmlWrapper :: forall eff . String -> String -> String -> P.HTML eff
-htmlWrapper app_html state_json js_name =
+htmlWrapper app_html state_json file_name =
  S.html do
    S.head do
      S.meta ! S.charset "UTF-8"
      S.meta ! S.name "viewport" ! S.content "width=device-width, initial-scale=1"
      S.title $ S.text "Aelve-Guide" -- TODO (sectore): Provide title
      S.link ! S.rel "icon" ! S.type' "image/x-icon" ! S.href "/favicon.ico"
+      S.link ! S.rel "stylesheet" ! S.href ("/vendor.css")
+      -- ^ vendor styles (Bluma & Co.)
+      S.style ! P.dangerouslySetInnerHTML (fromMaybe "" (renderedSheet (render globalStyle))) $ S.empty
    S.body do
      S.div
        ! P.key "guide"
        ! S.id "guide"
+        ! S.className "container"
        ! P.dangerouslySetInnerHTML app_html
-        $ S.br
+        $ S.empty
      S.script
        ! P.key "initial_state"
        ! S.type' "text/javascript"
        ! P.dangerouslySetInnerHTML state_json
-        $ S.br
+        $ S.empty
      S.script
        ! P.key "js_bundle"
        ! S.type' "text/javascript"
-        ! S.src ("/" <> js_name <> ".js")
-        $ S.br
+        ! S.src ("/" <> file_name <> ".js")
+        $ S.empty