{-# LANGUAGE OverloadedStrings #-}

module Design.LoggedIn.Table
  ( tableDesign
  ) where

import Data.Monoid ((<>))

import Clay
import qualified Clay.Display as D

import Design.Color as C
import Design.Media
import Design.Constants

tableDesign :: Css
tableDesign =

  ".table" ? do
    display D.table
    width (pct 100)
    textAlign (alignSide (sideCenter))
    "border-spacing" -: "10 px"

    ".header" <> ".row" ? display tableRow
    let headerHeight = (px 70)

    ".header" ? do
      fontWeight bold
      backgroundColor C.blue
      color C.white
      fontSize iconFontSize
      lineHeight headerHeight

    ".row" ? do
      fontSize (px 20)
      cursor pointer
      lineHeight rowHeight
      nthChild "odd" & backgroundColor C.lightGrey
      ".edition" & do
        backgroundColor C.paymentFocus
        ".delete" ? visibility visible

    ".cell" ? do
      display tableCell
      ".category" & width (pct 40)
      ".cost" & do
        width (pct 17)
        ".refund" & color C.greenSuccess
      ".user" & width (pct 20)
      ".date" & do
        width (pct 20)
        smallScreen $ do
          ".shortDate" ? display inline
          ".longDate" ? display none
        largeScreen $ do
          ".shortDate" ? display none
          ".longDate" ? display inline
      ".delete" & do
        width (pct 3)
        height rowHeight
        textAlign (alignSide sideCenter)
        backgroundColor C.red
        visibility hidden
        button ? do
          width (pct 100)
          height (pct 100)
          color C.white