1
1
mirror of https://github.com/aelve/guide.git synced 2025-01-08 23:39:18 +03:00

Styling of category-overview page (#173)

This commit is contained in:
Jens Krause 2017-12-31 17:41:50 +01:00
parent 554f40ceb2
commit 0f4c783829
No known key found for this signature in database
GPG Key ID: 3B2FAFBCEFA5906D
6 changed files with 279 additions and 74 deletions

View File

@ -2,23 +2,24 @@ module Guide.CategoryOverview.View.CategoryOverview where
import Prelude
import Bulma.Columns.Columns (column, columns, isMultiline) as B
import Bulma.Columns.Size (PercentSize(..), isPercentSize, isPercentSizeResponsive) as B
import Bulma.Common (Is(..), Breakpoint(..), runClassNames, runClassName) as B
import Bulma.Elements.Title (title, isSize) as B
import Data.Foldable (for_)
import Guide.Api.Types (CategoryInfo(..))
import Guide.CategoryOverview.Events (Event)
import Guide.CategoryOverview.State (State(..))
import Guide.Common.CSS.Global (catColumn, catLink, catHeadline, catSubheadline, catsWip, catsFinished, catsStub) as CSS
import Guide.Common.Routes (categoryDetailUrl)
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, a) as S
import Text.Smolder.HTML (a, div, h2, p) as S
import Text.Smolder.HTML.Attributes (href, className) as S
import Text.Smolder.Markup ((!))
import Text.Smolder.Markup (text) as S
import Bulma.Common (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) =
@ -32,26 +33,58 @@ view st@(State state) =
catsView :: State -> CCategories -> P.HTML Event
catsView st@(State state) cats =
S.div
! S.className (Bulma.runClassNames
[ Bulma.columns
, Bulma.isMultiline
! S.className (B.runClassNames
[ B.columns
, B.isMultiline
])
$ for_ cats (catView st)
catView :: State -> CategoryInfo -> P.HTML Event
catView (State state) (CategoryInfo cat) =
S.div
! S.className (Bulma.runClassNames
[ Bulma.column
, Bulma.isPercentSizeResponsive Bulma.OneThird Bulma.Desktop
, Bulma.isPercentSize Bulma.Half
, Bulma.isSize Bulma.Is4
! S.className (B.runClassNames
[ B.column
, B.isPercentSize B.Half
, B.isPercentSizeResponsive B.OneThird B.Desktop
, CSS.catColumn
])
! P.key (unwrapUid cat.categoryInfoUid) $ do
S.a
! S.className (Bulma.runClassNames
[ Bulma.subtitle
, Bulma.isSize Bulma.Is4
])
! S.href (categoryDetailUrl state.categoryName cat.categoryInfoUid)
$ S.text cat.categoryInfoTitle
S.h2
! S.className (B.runClassNames
[ B.title
, B.isSize B.Is3
, CSS.catHeadline
]
)
$ S.text "Headline"
S.div
! S.className (B.runClassName CSS.catsFinished)
$ do
S.a
! S.className (B.runClassName CSS.catLink)
! S.href (categoryDetailUrl state.categoryName cat.categoryInfoUid)
$ S.text cat.categoryInfoTitle
S.div
! S.className (B.runClassName CSS.catsWip)
$ do
S.p
! S.className (B.runClassNames
[ CSS.catSubheadline
]
)
$ S.text "In progress"
S.p
! S.className (B.runClassName CSS.catLink)
$ S.text "lorem ipsum"
S.div
! S.className (B.runClassName CSS.catsStub)
$ do
S.p
! S.className (B.runClassNames
[ CSS.catSubheadline
]
)
$ S.text "To be written"
S.p
! S.className (B.runClassName CSS.catLink)
$ S.text "lorem ipsum"

View File

@ -0,0 +1,69 @@
module Guide.Common.CSS.Global where
import Prelude
import Bulma.Common (ClassName, ClassPart(..), joinClassParts, toClassName)
import Data.Monoid (mempty)
------------------------------------------------
-- header classes
------------------------------------------------
header :: ClassName
header = toGuideClassName $ ClassPart "header"
------------------------------------------------
-- category classes
------------------------------------------------
catClass :: ClassPart -> ClassName
catClass cp =
toGuideClassName $ joinClassParts [ClassPart "category", cp]
catColumn :: ClassName
catColumn = catClass $ ClassPart "column"
catLink :: ClassName
catLink = catClass $ ClassPart "link"
catHeadline :: ClassName
catHeadline = catClass $ ClassPart "headline"
catSubheadline :: ClassName
catSubheadline = catClass $ ClassPart "subheadline"
catsClass :: ClassPart -> ClassName
catsClass cp =
toGuideClassName $ joinClassParts [ClassPart "categories", cp]
------------------------------------------------
-- categories classes
------------------------------------------------
catsFinished :: ClassName
catsFinished = catsClass $ ClassPart "finished"
catsWip :: ClassName
catsWip = catsClass $ ClassPart "wip"
catsStub :: ClassName
catsStub = catsClass $ ClassPart "stub"
------------------------------------------------
-- footer classes
------------------------------------------------
footerClass :: ClassPart -> ClassName
footerClass cp =
toGuideClassName $ joinClassParts [ClassPart "footer", cp]
footerContainer :: ClassName
footerContainer = footerClass $ ClassPart "container"
------------------------------------------------
-- Helpers
------------------------------------------------
toGuideClassName :: ClassPart -> ClassName
toGuideClassName cp =
toClassName $ joinClassParts [ClassPart "guide", cp]

View File

@ -0,0 +1,62 @@
.guide {
&-header {
padding: 2rem 0;
}
&-category {
&-column {
padding-bottom: 4rem;
}
&-headline {
color: $color1;
font-weight: $bold;
}
&-link {
color: $color2;
font-weight: $bold;
}
&-subheadline {
color: $color1;
font-weight: $bold;
margin-top: 1rem;
margin-bottm: 0;
}
}
&-categories {
&-finished {
padding-left: 2em;
.guide-category-link {
font-size: 1.8rem;
}
}
&-wip {
.guide-category-link {
font-size: 1rem;
padding-left: 1.5em;
}
}
&-stub {
.guide-category-link {
font-size: 1rem;
padding-left: 1.5em;
}
}
}
&-footer {
&-container {
border-top: 1px solid $color1;
padding-top: 1rem;
}
}
}

View File

@ -2,6 +2,11 @@ module Guide.Common.View.Footer where
import Prelude
import Bulma.Common (Breakpoint(..), runClassName, runClassNames) as B
import Bulma.Components.Navbar (navbar, navbarItem) as B
import Bulma.Layout.Layout (footer) as B
import Bulma.Modifiers.Responsive (isInlineFlexResponsive, isInlineBlockResponsive) as B
import Bulma.Modifiers.Typography (hasAlignment, Alignment(..)) as B
import Guide.CategoryOverview.Events (Event)
import Guide.CategoryOverview.State (State(..))
import Pux.DOM.HTML (HTML) as P
@ -9,27 +14,25 @@ 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.Common (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
import Guide.Common.CSS.Global (footerContainer) as CSS
view :: State -> P.HTML Event
view st@(State state) =
S.div
! S.className (Bulma.runClassNames
[ Bulma.footer
, Bulma.hasAlignment Bulma.Centered
! S.className (B.runClassNames
[ B.footer
, B.hasAlignment B.Centered
, CSS.footerContainer
])
$ S.ul
! S.className (Bulma.runClassNames
[ Bulma.navbar
, Bulma.isInlineFlex
! S.className (B.runClassNames
[ B.navbar
, B.isInlineFlexResponsive B.Desktop
, B.isInlineBlockResponsive B.Mobile
])
$ do
S.li
! S.className (Bulma.runClassName Bulma.navbarItem)
! S.className (B.runClassName B.navbarItem)
$ S.div $ do
S.text "made by "
S.a
@ -38,9 +41,9 @@ view st@(State state) =
S.text " & "
S.a
! S.href "https://github.com/aelve/guide/graphs/contributors"
$ S.text "others"
$ S.text "contributors"
S.li
! S.className (Bulma.runClassName Bulma.navbarItem)
! S.className (B.runClassName B.navbarItem)
$ S.div $ do
S.a
! S.href "https://github.com/aelve/guide"
@ -50,17 +53,17 @@ view st@(State state) =
! S.href "https://github.com/aelve/guide/issues"
$ S.text "issue tracker"
S.li
! S.className (Bulma.runClassName Bulma.navbarItem)
! S.className (B.runClassName B.navbarItem)
$ S.a
! S.href "https://guide.aelve.com/unwritten-rules"
$ S.text "rules"
S.li
! S.className (Bulma.runClassName Bulma.navbarItem)
! S.className (B.runClassName B.navbarItem)
$ S.a
! S.href "https://guide.aelve.com/donate"
$ S.text "donate"
S.li
! S.className (Bulma.runClassName Bulma.navbarItem)
! S.className (B.runClassName B.navbarItem)
$ S.div $ do
S.text "licensed under "
S.a

View File

@ -2,51 +2,82 @@ module Guide.Common.View.Header where
import Prelude
import Bulma.Columns.Columns (columns, column) as B
import Bulma.Columns.Size (PercentSize(..), isPercentSizeResponsive) as B
import Bulma.Common (Breakpoint(..), Is(..), Size(..), runClassName, runClassNames) as B
import Bulma.Elements.Button (button) as B
import Bulma.Elements.Title (title, subtitle, isSize) as B
import Bulma.Form.Common (isSize) as BF
import Bulma.Form.Input (input) as BF
import Bulma.Layout.Layout (level, levelItem, levelLeft, levelRight) as B
import Bulma.Modifiers.Typography (hasWeight, Weight(..)) as B
import Guide.CategoryOverview.Events (Event)
import Guide.CategoryOverview.State (State(..))
import Guide.Common.CSS.Global (header) as CSS
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.HTML (div, h1, a, input, section, span) as S
import Text.Smolder.HTML.Attributes (href, className, placeholder, type') as S
import Text.Smolder.Markup ((!))
import Text.Smolder.Markup (text) as S
import Bulma.Common (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
import Text.Smolder.Markup (empty, text) as S
view :: State -> P.HTML Event
view st@(State state) =
S.section
! S.className (Bulma.runClassName Bulma.hero)
$ S.div
! S.className (Bulma.runClassName Bulma.heroBody)
$ S.div
! S.className (Bulma.runClassName Bulma.navbar)
$ S.div
! S.className (Bulma.runClassName Bulma.container) $ do
S.div
! S.className (Bulma.runClassName Bulma.navbarBrand)
$ S.div
! S.className (Bulma.runClassName Bulma.level) $ do
S.h1
! S.className (Bulma.runClassNames
[ Bulma.title
, Bulma.isSize Bulma.Is1
])
$ do
S.text "Guide |"
S.span
! 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 (Bulma.runClassName Bulma.navbarEnd)
! S.className (B.runClassName CSS.header)
$ do
S.div
! S.className (B.runClassName B.level)
$ do
S.div
! S.className (B.runClassName B.levelLeft)
$ S.div
! S.className (B.runClassName B.levelItem)
$ S.h1
! S.className (B.runClassNames
[ B.title
, B.isSize B.Is1
])
$ do
S.text "Aelve Guide |"
S.span
! S.className (B.runClassNames
[ B.subtitle
, B.isSize B.Is2
, B.hasWeight B.LightWeight
])
$ S.text " Haskell" -- TODO(sectore): Grap title from state
S.div
! S.className (B.runClassName B.levelRight)
$ S.div
! S.className (B.runClassName B.levelItem)
$ S.a
! S.className (Bulma.runClassName Bulma.button)
! S.className (B.runClassName B.button)
! S.href "./auth"
$ S.text "login"
S.div
$ S.input
! S.className (B.runClassNames
[ BF.input
, BF.isSize B.Large
])
! S.placeholder "Search"
! S.type' "text"
S.div
! S.className (B.runClassNames [B.columns])
$ do
S.div
! S.className (B.runClassNames
[ B.column
, BF.isSize B.Small
, B.isPercentSizeResponsive B.Half B.Tablet
, B.isPercentSizeResponsive B.OneThird B.Desktop
])
$ S.input
! S.className (B.runClassNames
[ BF.input
])
! S.placeholder "Add category"
! S.type' "text"
S.div
! S.className (B.runClassNames [B.column])
$ S.empty

View File

@ -7,12 +7,19 @@ $color1: black;
$color2: #008ACE;
$footer-background-color: $color0;
$dark: $color1;
$link: $color2;
$link-hover: $color2;
$title-color: $color1;
$subtitle-color: $color1;
// fonts
$family-serif: sans-serif;
$family-primary: $family-serif;
// font weight
$bold: 600;
// import bulma from node-modules folder at least
@import "~bulma/bulma";
@import "./Guide/Common/CSS/Global.scss";