path: root/Hero/Look.hs

{-# LANGUAGE GeneralizedNewtypeDeriving #-}
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE NoImplicitPrelude #-}

-- | Styles
--
-- Eventually move make this mostly well-typed. Use this EDSL:
-- http://fvisser.nl/clay/
module Hero.Look where

import Clay
import qualified Clay.Flexbox as Flexbox
import qualified Clay.Media as Media
import qualified Clay.Render as Clay
import qualified Clay.Stylesheet as Stylesheet
import qualified Data.Map as Map
import qualified Data.Text.Lazy as L
import Hero.Look.Typography as Typo
import Miso ((=:), Attribute, style_)
import Miso.String (MisoString, toMisoString)
import Protolude hiding ((&), (**), rem)

main :: Css
main = do
  -- bulma adjustments
  input ? marginRight (px 10) <> marginBottom (px 10)
  -- base
  ".fixed" ? position fixed
  ".clickable" ? clickable
  ".row" ? centerJustify
  a <> a # hover <> a # visited ? do
    color white
    textDecoration none
  ".loading" ? do
    centered
    height $ vh 100
    width $ vw 100
  -- animations
  ".grow" ? do
    transition "all" (sec 0.2) easeInOut (sec 0.2)
    ":hover" & transform (scale 1.1 1.1)
  ".blur-out" ? do
    position absolute
    animation
      "blur"
      (sec 1)
      easeInOut
      (sec 1)
      (iterationCount 1)
      normal
      forwards
    keyframes
      "blur"
      [ (0, Clay.filter $ blur (px 0)),
        (50, Clay.filter $ blur (px 0)),
        (100, Clay.filter $ blur (px 10))
      ]
  html <> body ? do
    background nite
    mobile $ do
      overflowX hidden
      width (vw 100)
  -- general app wrapper stuf
  ".app" ? do
    display flex
    justifyContent spaceBetween
    alignItems stretch
    flexDirection column
    color white
  "#hero-logo" ? zIndex (-1)
  "#app-head" <> "#app-body" <> "#app-foot" ? flexGrow 1
  "#app-head" <> "#app-foot" ? do
    display flex
    alignItems center
    flexShrink 0
    justifyContent spaceBetween
    padding 0 (rem 2) 0 (rem 2)
    width (pct 100)
    height (px navbarHeight)
    background nite
    position fixed
    zIndex 999
  "#app-head" ? do
    alignSelf flexStart
    borderBottom solid (px 3) grai
    wide
    top (px 0)
    mobile $ noBorder <> width (vw 100)
  "#app-body" ? do
    display flex
    desktop $ width (vw 93)
    alignContent center
    alignItems flexStart
    justifyContent flexStart
    flexDirection column
    flexShrink 0
    padding (px 0) 0 0 0
    marginY $ px 74
    mobile $ flexDirection column
  "#discover #app-body" ? do desktop $ marginLeft appmenuWidth
  "#app-head-right" ? do
    display flex
    justifyContent spaceBetween
    textTransform Clay.uppercase
    thicc
    alignItems center
    width (px 200)
  "#app-foot" ? do
    alignSelf flexEnd
    bottom (px 0)
    mobile remove
  "#app-foot-social" ? do
    display flex
    flexDirection column
    alignSelf flexStart
    ".social-icon" ? padding 0 (px 20) (px 10) 0
  "#app-foot-logo" ? do
    display flex
    flexDirection column
    alignItems flexEnd
  "#app-foot-quote" ? do
    textTransform Clay.uppercase
    textAlign center
    -- hide app-foot-quote when it gets crowded
    query
      Clay.all
      [Media.maxDeviceWidth (px 800)]
      hide
  -- login
  "#login" ? do
    -- TODO: next 3 lines can be DRYed up, methinks
    centered
    height (vh 100)
  "#login-inner" ? do
    centered
    flexDirection column
    zIndex 1
    height (vh 100)
    width (px 400)
    mobile $ width (vw 90)
  "#login" ** ".help" ** a ? do
    color white
    display flex
    alignItems center
    flexDirection column
  "#login" ** form <> "#login" ** hr
    ? width (pct 100)
  "#login" ** hr ? border solid (px 1) grai
  "#login" ** ".button" ? do
    marginTop (px 10)
    display inlineBlock
    border solid (px 2) white
  "#login" ** ".action" ? do
    display flex
    justifyContent spaceBetween
    alignItems baseline
  -- choose your experience
  "#choose-experience" ** "#app-body" ? do
    euro <> wide
    flexCenter
    width (pct 100)
    desktop $ marginLeft appmenuWidth <> height (vh 90)
    mobile $ marginX (rem 0) <> marginTop (rem 0) <> minHeight (vh 90)
    h2 ? do
      thicc <> wide <> smol <> lower <> coat 2
      textAlign center
      mobile $ coat 0.8
    p ? do
      thicc <> coat 0.8 <> textAlign center
      maxWidth (px 900)
      marginAll (rem 1)
      mobile $ coat 0.6
    ul ? do
      display flex
      flexDirection row
      flexWrap Flexbox.wrap
      justifyContent spaceAround
      li ? do
        width (px 111)
        position relative
        display flex
        flexDirection column
        textAlign center
        mobile $ coat 0.6
        coat 0.8 <> clickable
        divv <? do
          position relative
          flexCenter
          flexDirection column
          span <? do
            position absolute
            width (pct 100)
            smol <> thicc
  -- comic player
  ".comic-player" ? marginAll auto
  ".comic-page" <> ".comic-page-full" ? do
    width auto
    marginAll auto
    transform (scale 1 1)
  ".comic-page" ? height (vh 90)
  let ccb = ".comic-controls" ** button
  ccb <> ccb # hover ? do
    background nite
    borderColor nite
    color white
  ".comic-controls-pages" ? do
    justifyContent center
    alignItems center
    display flex
  ".comic-video" |> iframe ? do
    position absolute
    height (pct 93)
    width (pct 100)
  "#close-button" ? do
    euro <> wide
    position fixed
    cursor pointer
    let z = rem 1.8
    fontSize z
    lineHeight z
    let m = 24 :: Double
    top $ px $ navbarHeight + m
    left $ px m
    zIndex 999
  -- zoom button and slider
  "#zoom-button" ? do
    position relative
    let sliderY = 75
    let sliderYY = 250
    euro <> wide
    input ? do
      transform $ Clay.rotate (deg (-90))
      margin 0 0 (px sliderYY) 0
      position absolute
      height $ px sliderY
      width $ px 200
      hide
    label ? do
      coat 0.9
      marginBottom $ px $ 2 * sliderYY
      position absolute
      hide
    ":hover" & ".ctrl" ? visibility visible
  -- discover
  "#discover" ? do
    alignItems flexStart
    flexDirection column
  ".media-info" ? do
    padding (rem 2) 0 (rem 2) (rem 2)
    margin (rem 2) 0 (rem 2) (rem 2)
    borderTop solid (px 1) white
    borderBottom solid (px 1) white
    flexDirection row
    centerJustify
    mobile $ do
      margin (rem 2) 0 (rem 2) 0
      padding 0 0 0 (rem 0)
      noBorder
      width (vw 100)
      flexDirection column
  ".media-info-meta" ? do
    Flexbox.flex 2 1 (px 0)
    display flex
    flexDirection row
    divv # lastChild <? paddingLeft (rem 1)
    mobile $ do
      width (vw 90) -- this line can be commented if you want to center the meta
      img ? width (px 150)
      order (-1)
      Flexbox.flex 1 1 auto
  ".media-info-summary" ? do
    Flexbox.flex 2 1 (px 0)
    paddingRight (rem 3)
    mobile $ do
      marginAll (rem 1)
      padding 0 0 0 (rem 0)
  ".media-info-actions" ? do
    Flexbox.flex 1 1 (px 132)
    maxWidth (px 132)
    display flex
    flexDirection column
    justifyContent spaceAround
    mobile $ do
      maxWidth (vw 100)
      flexDirection row
      order 1
      flexBasis auto -- initial
      height (px 50)
  -- appmenu
  "#appmenu" ? do
    euro <> wide
    fontVariant smallCaps
    position fixed
    height (pct 100)
    display flex
    justifyContent center
    zIndex 99
    alignContent center
    alignItems center
    flexDirection column
    minWidth appmenuWidth
    a ? do
      display flex
      flexDirection column
      color white
      background nite
      borderColor nite
    a |> img ? do
      width (px 22)
      height (px 22)
    desktop $ a |> span ? remove
    mobile $ do
      order 2
      flexDirection row
      position fixed
      bottom (px 0)
      width (vw 100)
      height (px 74)
      background nite
      justifyContent center
      alignItems center
      a |> span ? fontSize (rem 0.5)
    button ? margin (rem 0.5) 0 (rem 0.5) 0
  -- feature
  "#featured-comic" ? do
    centered
    flexDirection column
    Typo.euro
    height (px 411)
    mobile $ do
      padding (px 0) 0 0 0
      margin 0 0 (px 50) 0
    after & do
      display block
      position relative
      background $
        linearGradient
          (straight sideTop)
          [ (setA 0 nite, pct 0),
            (nite, pct 100)
          ]
      let h = 149
      marginTop (px (- h))
      -- without +1, the gradient is offset by 1 px in chrome
      height (px (h + 1))
      content blank
    ".hero-original" ? do
      textTransform Clay.uppercase
      fontSize (rem 1.2)
    ".description" ? do
      width (px 400)
      mobile remove
  "#featured-banner" ? do
    position relative
    minHeight (px 411)
    minWidth (px 1214)
    mobile $ marginLeft (px (-310))
  "#featured-content" ? do
    position absolute
    width (pct 100)
    zIndex 9
    top (px 200) -- b/c Firefox & WebKit autocalc "top" differently
    mobile $ do
      marginTop (px 200)
      alignItems center
      display flex
      flexDirection column
      padding (rem 0.5) (rem 0.5) (rem 0.5) (rem 0.5)
      width (vw 100)
  -- buttons
  "a.wrs-button" ? do
    -- the "watch/read/save" button
    flexCenter
    height (px 36)
    width (px 132)
    border solid (px 2) white
    rounded
    color white
    margin 0 (px 15) (rem 1) 0
    fontSize (rem 0.8)
    fontVariant smallCaps
    euro <> thicc <> wide
    mobile $ do
      height (px 26)
      width (px 100)
      margin 0 (px 5) 0 (px 5)
      fontSize (rem 0.6)
    let alive = backgroundColor hero <> borderColor hero <> color white
    ":hover" & alive
    ".saved" & alive
    img ? do
      marginRight (px 7)
      height (px 15)
      mobile $ height (px 10)
  --
  ".comic-action-menu" ? display flex <> justifyContent (JustifyContentValue "left")
  -- shelving
  ".shelf" ? do
    display flex
    flexDirection column
    justifyContent flexStart
    alignItems flexStart
    mobile $ do
      padding (rem 0.5) (rem 0.5) (rem 0.5) (rem 0.5)
      width (vw 100)
    ".comic" ? do
      centered
      flexDirection column
      textAlign center
      euro
      maxWidth (px 110)
      img ? do
        marginBottom (rem 0.5)
        minHeight (px 170)
        minWidth (px 110)
  ".shelf-head" ? do
    width (pct 100)
    margin (rem 1.5) 0 (rem 1.5) 0
    borderBottom solid (px 1) white
    padding (rem 0.5) 0 0.5 0
    euro <> thicc
  ".shelf-body" ? do
    display flex
    flexDirection row
    justifyContent spaceBetween
    width (vw 93)
    alignItems baseline
    li ? padding 0 (rem 0.5) 0 (rem 0.5)
    overflowY visible
    star ? overflowY visible
    overflowX scroll
    flexWrap Flexbox.nowrap
    li <? do
      margin 0 (rem 1) (rem 1) 0
      Flexbox.flex 0 0 auto

navbarHeight :: Double
navbarHeight = 74

centered :: Css
centered = do
  display flex
  justifyContent center
  alignItems center
  alignSelf center

centerJustify :: Css
centerJustify = do
  display flex
  alignItems center
  justifyContent spaceBetween

hide :: Css
hide = visibility hidden

remove :: Css
remove = display none

noBorder :: Css
noBorder = border none 0 transparent

mobile :: Css -> Css
mobile = query Clay.all [Media.maxDeviceWidth (px 500)]

desktop :: Css -> Css
desktop = query Clay.all [Media.minDeviceWidth (px 500)]

rounded :: Css
rounded = borderRadius (px 30) (px 30) (px 30) (px 30)

appmenuWidth :: Size LengthUnit
appmenuWidth = px 67

flexCenter :: Css
flexCenter = do
  display flex
  justifyContent center
  justifyItems center
  alignContent center
  alignItems center

blank :: Content
blank = stringContent ""

divv :: Clay.Selector
divv = Clay.div

marginAll :: Size a -> Css
marginAll x = margin x x x x

marginX :: Size a -> Css
marginX n = marginLeft n <> marginRight n

marginY :: Size a -> Css
marginY n = marginTop n <> marginBottom n

clickable :: Css
clickable = cursor pointer

-- heroic colors ---------------------------------------------------------------

hero :: Color
hero = rgb 241 32 32 -- #f12020

nite :: Color
nite = rgb 10 10 10 -- #0a0a0a

grai :: Color
grai = rgb 221 221 221 -- #dddddd

-- runtime (client) style stuff ------------------------------------------------

-- | Put 'Clay.Css' into a Miso-compatible style property.
--
-- Allows us to use any amount of CSS written with Clay inlined in HTML or
-- dynamically as JavaScript object properties. The implementation is a bit
-- hacky, but works.
css :: Clay.Css -> Attribute action
css = Miso.style_ . Map.fromList . f . Clay.renderWith Clay.htmlInline []
  where
    f :: L.Text -> [(MisoString, MisoString)]
    f t = L.splitOn ";" t
      <&> L.splitOn ":"
      <&> \(x : y) -> (toMisoString x, toMisoString $ L.intercalate ":" y)

inlineCss :: Css -> MisoString
inlineCss = toMisoString . render

type Style = Map MisoString MisoString

red :: MisoString
red = "#f12020"

bold :: Style
bold = "font-weight" =: "bold"

condensed :: Style
condensed = "font-stretch" =: "condensed"

expanded :: Style
expanded = "font-stretch" =: "expanded"

uppercase :: Style
uppercase = "text-transform" =: "uppercase"

---------------------------------------------------------------------------------
-- upstream this to Clay
---------------------------------------------------------------------------------

newtype JustifyItemsValue = JustifyItemsValue Value
  deriving
    ( Val,
      Other,
      Inherit,
      Center,
      FlexEnd,
      FlexStart,
      SpaceAround,
      SpaceBetween
    )

justifyItems :: JustifyItemsValue -> Css
justifyItems = Stylesheet.key "justify-items"