From 6eaaf3d8ce6025932990de6fa697d14c9651be76 Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bsima.me>
Date: Thu, 24 Dec 2020 14:24:16 -0500
Subject: linting fixes and cleanup
---
Hero/Look.hs | 93 +++++++++++++++++++++++++++++++-----------------------------
1 file changed, 48 insertions(+), 45 deletions(-)
(limited to 'Hero/Look.hs')
diff --git a/Hero/Look.hs b/Hero/Look.hs
index 03f64b3..e3958d5 100644
--- a/Hero/Look.hs
+++ b/Hero/Look.hs
@@ -2,12 +2,15 @@
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE NoImplicitPrelude #-}
+{- HLINT ignore "Use |>" -}
+
-- | Styles
--
-- Eventually move make this mostly well-typed. Use this EDSL:
-- http://fvisser.nl/clay/
module Hero.Look where
+import Alpha hiding (rem, (**), (|>))
import Clay
import qualified Clay.Flexbox as Flexbox
import qualified Clay.Media as Media
@@ -16,9 +19,8 @@ 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 (Attribute, style_, (=:))
import Miso.String (MisoString, toMisoString)
-import Protolude hiding ((&), (**), rem)
main :: Css
main = do
@@ -33,8 +35,8 @@ main = do
textDecoration none
".loading" ? do
centered
- height $ vh 100
- width $ vw 100
+ height <| vh 100
+ width <| vw 100
-- animations
".grow" ? do
transition "all" (sec 0.2) easeInOut (sec 0.2)
@@ -51,13 +53,13 @@ main = do
forwards
keyframes
"blur"
- [ (0, Clay.filter $ blur (px 0)),
- (50, Clay.filter $ blur (px 0)),
- (100, Clay.filter $ blur (px 10))
+ [ (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
+ mobile <| do
overflowX hidden
width (vw 100)
-- general app wrapper stuf
@@ -85,19 +87,19 @@ main = do
borderBottom solid (px 3) grai
wide
top (px 0)
- mobile $ noBorder <> width (vw 100)
+ mobile <| noBorder <> width (vw 100)
"#app-body" ? do
display flex
- desktop $ width (vw 93)
+ 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
+ marginY <| px 74
+ mobile <| flexDirection column
+ "#discover #app-body" ? do desktop <| marginLeft appmenuWidth
"#app-head-right" ? do
display flex
justifyContent spaceBetween
@@ -137,7 +139,7 @@ main = do
zIndex 1
height (vh 100)
width (px 400)
- mobile $ width (vw 90)
+ mobile <| width (vw 90)
"#login" ** ".help" ** a ? do
color white
display flex
@@ -159,17 +161,17 @@ main = do
euro <> wide
flexCenter
width (pct 100)
- desktop $ marginLeft appmenuWidth <> height (vh 90)
- mobile $ marginX (rem 0) <> marginTop (rem 0) <> minHeight (vh 90)
+ 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
+ mobile <| coat 0.8
p ? do
thicc <> coat 0.8 <> textAlign center
maxWidth (px 900)
marginAll (rem 1)
- mobile $ coat 0.6
+ mobile <| coat 0.6
ul ? do
display flex
flexDirection row
@@ -181,7 +183,7 @@ main = do
display flex
flexDirection column
textAlign center
- mobile $ coat 0.6
+ mobile <| coat 0.6
coat 0.8 <> clickable
divv <? do
position relative
@@ -207,7 +209,7 @@ main = do
justifyContent center
alignItems center
display flex
- ".comic-video" |> iframe ? do
+ ".comic-video" & iframe ? do
position absolute
height (pct 93)
width (pct 100)
@@ -219,8 +221,8 @@ main = do
fontSize z
lineHeight z
let m = 24 :: Double
- top $ px $ navbarHeight + m
- left $ px m
+ top <| px <| navbarHeight + m
+ left <| px m
zIndex 999
-- zoom button and slider
"#zoom-button" ? do
@@ -229,15 +231,15 @@ main = do
let sliderYY = 250
euro <> wide
input ? do
- transform $ Clay.rotate (deg (-90))
+ transform <| Clay.rotate (deg (-90))
margin 0 0 (px sliderYY) 0
position absolute
- height $ px sliderY
- width $ px 200
+ height <| px sliderY
+ width <| px 200
hide
label ? do
coat 0.9
- marginBottom $ px $ 2 * sliderYY
+ marginBottom <| px <| 2 * sliderYY
position absolute
hide
":hover" & ".ctrl" ? visibility visible
@@ -252,7 +254,7 @@ main = do
borderBottom solid (px 1) white
flexDirection row
centerJustify
- mobile $ do
+ mobile <| do
margin (rem 2) 0 (rem 2) 0
padding 0 0 0 (rem 0)
noBorder
@@ -263,7 +265,7 @@ main = do
display flex
flexDirection row
divv # lastChild <? paddingLeft (rem 1)
- mobile $ do
+ mobile <| do
width (vw 90) -- this line can be commented if you want to center the meta
img ? width (px 150)
order (-1)
@@ -271,7 +273,7 @@ main = do
".media-info-summary" ? do
Flexbox.flex 2 1 (px 0)
paddingRight (rem 3)
- mobile $ do
+ mobile <| do
marginAll (rem 1)
padding 0 0 0 (rem 0)
".media-info-actions" ? do
@@ -280,7 +282,7 @@ main = do
display flex
flexDirection column
justifyContent spaceAround
- mobile $ do
+ mobile <| do
maxWidth (vw 100)
flexDirection row
order 1
@@ -308,8 +310,8 @@ main = do
a |> img ? do
width (px 22)
height (px 22)
- desktop $ a |> span ? remove
- mobile $ do
+ desktop <| a |> span ? remove
+ mobile <| do
order 2
flexDirection row
position fixed
@@ -329,14 +331,14 @@ main = do
flexDirection column
Typo.euro
height (px 411)
- mobile $ do
+ mobile <| do
padding (px 0) 0 0 0
margin 0 0 (px 50) 0
after & do
display block
position relative
- background $
- linearGradient
+ background
+ <| linearGradient
(straight sideTop)
[ (setA 0 nite, pct 0),
(nite, pct 100)
@@ -356,13 +358,13 @@ main = do
position relative
minHeight (px 411)
minWidth (px 1214)
- mobile $ marginLeft (px (-310))
+ 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
+ mobile <| do
marginTop (px 200)
alignItems center
display flex
@@ -382,7 +384,7 @@ main = do
fontSize (rem 0.8)
fontVariant smallCaps
euro <> thicc <> wide
- mobile $ do
+ mobile <| do
height (px 26)
width (px 100)
margin 0 (px 5) 0 (px 5)
@@ -393,7 +395,7 @@ main = do
img ? do
marginRight (px 7)
height (px 15)
- mobile $ height (px 10)
+ mobile <| height (px 10)
--
".comic-action-menu" ? display flex <> justifyContent (JustifyContentValue "left")
-- shelving
@@ -402,7 +404,7 @@ main = do
flexDirection column
justifyContent flexStart
alignItems flexStart
- mobile $ do
+ mobile <| do
padding (rem 0.5) (rem 0.5) (rem 0.5) (rem 0.5)
width (vw 100)
".comic" ? do
@@ -518,15 +520,16 @@ grai = rgb 221 221 221 -- #dddddd
-- 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 []
+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)
+ f t =
+ L.splitOn ";" t
+ <&> L.splitOn ":"
+ <&> \(x : y) -> (toMisoString x, toMisoString <| L.intercalate ":" y)
inlineCss :: Css -> MisoString
-inlineCss = toMisoString . render
+inlineCss = toMisoString <. render
type Style = Map MisoString MisoString
--
cgit v1.2.3