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:
parent
554f40ceb2
commit
0f4c783829
@ -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"
|
||||
|
69
front-ps/common/Guide/Common/CSS/Global.purs
Normal file
69
front-ps/common/Guide/Common/CSS/Global.purs
Normal 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]
|
62
front-ps/common/Guide/Common/CSS/Global.scss
Normal file
62
front-ps/common/Guide/Common/CSS/Global.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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";
|
||||
|
Loading…
Reference in New Issue
Block a user