mirror of
https://github.com/aelve/guide.git
synced 2024-11-30 20:31:17 +03:00
Style by using Bulma types only
(but no strings)
This commit is contained in:
Jens Krause
parent
413fe55383
commit
8c1ec8dd79
17
front-ps/bower_resolutions.txt
Normal file
17
front-ps/bower_resolutions.txt
Normal file
@ -0,0 +1,17 @@
|
||||
"purescript-arraybuffer-types": "^2.0.0",
|
||||
"purescript-foreign-generic": "^5.0.0",
|
||||
"purescript-js-date": "^4.0.0"
|
||||
|
||||
|
||||
Unable to find a suitable version for purescript-arraybuffer-types, please choose one by typing one of the numbers below:
|
||||
1) purescript-arraybuffer-types#^1.0.0 which resolved to 1.0.0 and is required by purescript-affjax#5.0.0, purescript-dom#4.10.0
|
||||
2) purescript-arraybuffer-types#^2.0.0 which resolved to 2.0.0 and is required by purescript-node-http#4.1.0
|
||||
|
||||
Prefix the choice with ! to persist it to bower.json
|
||||
|
||||
? Answer !2
|
||||
bower purescript-arraybuffer-types resolution Saved purescript-arraybuffer-types#^2.0.0 as resolution
|
||||
|
||||
Unable to find a suitable version for purescript-js-date, please choose one by typing one of the numbers below:
|
||||
1) purescript-js-date#^4.0.0 which resolved to 4.0.0 and is required by purescript-dom#4.10.0, purescript-node-fs#4.0.0
|
||||
2) purescript-js-date#^5.1.0 which resolved to 5.1.0 and is required by purescript-http-types#043c7e04f1
|
||||
@ -15,11 +15,14 @@ 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
|
||||
import Bulma.Core (Is(..), Breakpoint(..), runClassNames) as Bulma
|
||||
import Bulma.Elements.Title (subtitle, isSize) as Bulma
|
||||
import Bulma.Columns.Columns (column, columns, isMultiline) as Bulma
|
||||
import Bulma.Columns.Size (PercentSize(..), isPercentSize, isPercentSizeResponsive) as Bulma
|
||||
|
||||
view :: State -> P.HTML Event
|
||||
view st@(State state) =
|
||||
S.div
|
||||
! S.className "content"
|
||||
$ case state.categories of
|
||||
NotAsked -> S.div $ S.text "Categories not asked."
|
||||
Loading -> S.div $ S.text "Loading data..."
|
||||
@ -29,15 +32,26 @@ view st@(State state) =
|
||||
catsView :: State -> CCategories -> P.HTML Event
|
||||
catsView st@(State state) cats =
|
||||
S.div
|
||||
! S.className "columns is-multiline"
|
||||
! S.className (Bulma.runClassNames
|
||||
[ Bulma.columns
|
||||
, Bulma.isMultiline
|
||||
])
|
||||
$ for_ cats (catView st)
|
||||
|
||||
catView :: State -> CategoryInfo -> P.HTML Event
|
||||
catView (State state) (CategoryInfo cat) =
|
||||
S.div
|
||||
! S.className "column is-one-third-desktop is-half"
|
||||
! S.className (Bulma.runClassNames
|
||||
[ Bulma.column
|
||||
, Bulma.isPercentSizeResponsive Bulma.OneThird Bulma.Desktop
|
||||
, Bulma.isPercentSize Bulma.Half
|
||||
, Bulma.isSize Bulma.Is4
|
||||
])
|
||||
! P.key (unwrapUid cat.categoryInfoUid) $ do
|
||||
S.a
|
||||
! S.className "subtitle is-4"
|
||||
! S.className (Bulma.runClassNames
|
||||
[ Bulma.subtitle
|
||||
, Bulma.isSize Bulma.Is4
|
||||
])
|
||||
! S.href (categoryDetailUrl state.categoryName cat.categoryInfoUid)
|
||||
$ S.text cat.categoryInfoTitle
|
||||
|
||||
@ -13,11 +13,13 @@ 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 ((!))
|
||||
import Bulma.Core (runClassName) as Bulma
|
||||
import Bulma.Columns.Columns (column) as Bulma
|
||||
|
||||
view :: State -> P.HTML Event
|
||||
view state@(State st) =
|
||||
S.div
|
||||
! S.className "column" $ do
|
||||
! S.className (Bulma.runClassName Bulma.column) $ do
|
||||
Header.view state
|
||||
case st.route of
|
||||
(NotFound url) -> NotFound.view state
|
||||
|
||||
@ -10,26 +10,26 @@ 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
|
||||
import Bulma.Core (runClassName, runClassNames) as Bulma
|
||||
import Bulma.Modifiers.Typography (hasAlignment, Alignment(..)) as Bulma
|
||||
import Bulma.Modifiers.Responsive (isInlineFlex) 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
|
||||
! S.className (Bulma.runClassNames
|
||||
[ Bulma.footer
|
||||
, Bulma.alignment Bulma.Centered
|
||||
, Bulma.hasAlignment Bulma.Centered
|
||||
])
|
||||
$ S.ul
|
||||
! S.className (Bulma.runClazzNames
|
||||
! S.className (Bulma.runClassNames
|
||||
[ Bulma.navbar
|
||||
, Bulma.showInlineFlex'
|
||||
, Bulma.isInlineFlex
|
||||
])
|
||||
$ do
|
||||
S.li
|
||||
! S.className (Bulma.runClazzName Bulma.navbarItem)
|
||||
! S.className (Bulma.runClassName Bulma.navbarItem)
|
||||
$ S.div $ do
|
||||
S.text "made by "
|
||||
S.a
|
||||
@ -40,7 +40,7 @@ view st@(State state) =
|
||||
! S.href "https://github.com/aelve/guide/graphs/contributors"
|
||||
$ S.text "others"
|
||||
S.li
|
||||
! S.className (Bulma.runClazzName Bulma.navbarItem)
|
||||
! S.className (Bulma.runClassName Bulma.navbarItem)
|
||||
$ S.div $ do
|
||||
S.a
|
||||
! S.href "https://github.com/aelve/guide"
|
||||
@ -50,17 +50,17 @@ view st@(State state) =
|
||||
! S.href "https://github.com/aelve/guide/issues"
|
||||
$ S.text "issue tracker"
|
||||
S.li
|
||||
! S.className (Bulma.runClazzName Bulma.navbarItem)
|
||||
! S.className (Bulma.runClassName Bulma.navbarItem)
|
||||
$ S.a
|
||||
! S.href "https://guide.aelve.com/unwritten-rules"
|
||||
$ S.text "rules"
|
||||
S.li
|
||||
! S.className (Bulma.runClazzName Bulma.navbarItem)
|
||||
! S.className (Bulma.runClassName Bulma.navbarItem)
|
||||
$ S.a
|
||||
! S.href "https://guide.aelve.com/donate"
|
||||
$ S.text "donate"
|
||||
S.li
|
||||
! S.className (Bulma.runClazzName Bulma.navbarItem)
|
||||
! S.className (Bulma.runClassName Bulma.navbarItem)
|
||||
$ S.div $ do
|
||||
S.text "licensed under "
|
||||
S.a
|
||||
|
||||
@ -9,30 +9,44 @@ 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
|
||||
import Bulma.Core (Is(..), runClassName, runClassNames) as Bulma
|
||||
import Bulma.Components.Navbar (navbar, navbarBrand, navbarEnd) as Bulma
|
||||
import Bulma.Elements.Button (button) as Bulma
|
||||
import Bulma.Elements.Title (title, subtitle, isSize) as Bulma
|
||||
import Bulma.Layout.Layout (container, hero, heroBody, level) as Bulma
|
||||
import Bulma.Modifiers.Typography (hasWeight, Weight(..)) as Bulma
|
||||
|
||||
view :: State -> P.HTML Event
|
||||
view st@(State state) =
|
||||
S.section
|
||||
! S.className "hero"
|
||||
! S.className (Bulma.runClassName Bulma.hero)
|
||||
$ S.div
|
||||
! S.className "hero-body"
|
||||
! S.className (Bulma.runClassName Bulma.heroBody)
|
||||
$ S.div
|
||||
! S.className "navbar"
|
||||
! S.className (Bulma.runClassName Bulma.navbar)
|
||||
$ S.div
|
||||
! S.className "container" $ do
|
||||
! S.className (Bulma.runClassName Bulma.container) $ do
|
||||
S.div
|
||||
! S.className "navbar-brand"
|
||||
! S.className (Bulma.runClassName Bulma.navbarBrand)
|
||||
$ S.div
|
||||
! S.className "level" $ do
|
||||
! S.className (Bulma.runClassName Bulma.level) $ do
|
||||
S.h1
|
||||
! S.className "title is-1" $ do
|
||||
! S.className (Bulma.runClassNames
|
||||
[ Bulma.title
|
||||
, Bulma.isSize Bulma.Is1
|
||||
])
|
||||
$ do
|
||||
S.text "Guide |"
|
||||
S.span
|
||||
! S.className "subtitle is-2 has-text-weight-light"
|
||||
! S.className (Bulma.runClassNames
|
||||
[ Bulma.subtitle
|
||||
, Bulma.isSize Bulma.Is2
|
||||
, Bulma.hasWeight Bulma.LightWeight
|
||||
])
|
||||
$ S.text " Haskell" -- TODO(sectore): Grap title from state
|
||||
S.div
|
||||
! S.className "navbar-end"
|
||||
! S.className (Bulma.runClassName Bulma.navbarEnd)
|
||||
$ S.a
|
||||
! S.className "button"
|
||||
! S.className (Bulma.runClassName Bulma.button)
|
||||
! S.href "./auth"
|
||||
$ S.text "login"
|
||||
|
||||
@ -7,14 +7,15 @@ 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, style, title, br) as S
|
||||
import Text.Smolder.HTML (body, div, head, html, link, meta, script, style, title) 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
|
||||
import Bulma.Core (runClassName) as Bulma
|
||||
import Bulma.Layout.Layout (container) as Bulma
|
||||
|
||||
globalStyle :: CSS
|
||||
globalStyle = do
|
||||
@ -32,11 +33,12 @@ htmlWrapper app_html state_json file_name =
|
||||
S.link ! S.rel "stylesheet" ! S.href ("/vendor.css")
|
||||
-- ^ vendor styles (Bluma & Co.)
|
||||
S.style ! P.dangerouslySetInnerHTML (fromMaybe "" (renderedSheet (render globalStyle))) $ S.empty
|
||||
-- ^ global styles
|
||||
S.body do
|
||||
S.div
|
||||
! P.key "guide"
|
||||
! S.id "guide"
|
||||
! S.className "container"
|
||||
! S.className (Bulma.runClassName Bulma.container)
|
||||
! P.dangerouslySetInnerHTML app_html
|
||||
$ S.empty
|
||||
S.script
|
||||
|
||||
Loading…
Reference in New Issue
Block a user