From f2f9f46c4e13d9e748408d9e535345417d4cd65e Mon Sep 17 00:00:00 2001 From: nek0 Date: Tue, 24 Dec 2019 13:17:45 +0100 Subject: [PATCH] beginning polish --- matebeamter.cabal | 1 + src/API.hs | 6 ++-- src/Main.hs | 3 ++ src/Types/Page.hs | 8 ++++- src/View/Buy.hs | 69 +++++++++++++++++++++++--------------------- src/View/User.hs | 50 ++++++++++++++++++++------------ static/css/style.css | 36 +++++++++++++++++++---- 7 files changed, 112 insertions(+), 61 deletions(-) diff --git a/matebeamter.cabal b/matebeamter.cabal index 450c59d..a5ee721 100644 --- a/matebeamter.cabal +++ b/matebeamter.cabal @@ -63,6 +63,7 @@ executable matebeamter , hashable , warp , wai + , wai-app-static , wai-logger , wai-session , http-client diff --git a/src/API.hs b/src/API.hs index d754aec..be4a95e 100644 --- a/src/API.hs +++ b/src/API.hs @@ -11,7 +11,7 @@ module API where import Servant.API import Servant.Links --- import Servant.RawM +import Servant.RawM import Servant.HTML.Blaze import Data.Proxy @@ -96,6 +96,7 @@ type UserAPI = :> Post '[HTML] UserSelectPage :<|> "auth" :> "logout" :> Post '[HTML] UserOverviewPage + :<|> "static" :> RawM ) ( userSelectLink :<|> @@ -122,5 +123,6 @@ type UserAPI = productPostNewLink :<|> authLink :<|> authPostLink :<|> - authLogoutLink + authLogoutLink :<|> + staticLink ) = allLinks (Proxy :: Proxy UserAPI) diff --git a/src/Main.hs b/src/Main.hs index 312d953..93fa02f 100644 --- a/src/Main.hs +++ b/src/Main.hs @@ -20,6 +20,8 @@ import Data.YAML import Options.Applicative +import Network.Wai.Application.Static + -- imports from "mateamt" import qualified "mateamt" Types as MT @@ -107,6 +109,7 @@ userApp initState = serveWithContext userApi EmptyContext $ :<|> authControl mcookie :<|> authPostControl mcookie :<|> authLogoutControl mcookie + :<|> (\_ -> return $ staticApp (defaultFileServerSettings "static")) mcookie ) userApi :: Proxy UserAPI diff --git a/src/Types/Page.hs b/src/Types/Page.hs index b9a0f45..8aa87ac 100644 --- a/src/Types/Page.hs +++ b/src/Types/Page.hs @@ -1,8 +1,10 @@ +{-# LANGUAGE OverloadedStrings #-} module Types.Page where import qualified Data.Text as T import qualified Text.Blaze.Html5 as H +import qualified Text.Blaze.Html5.Attributes as HA data Page markup attr = Page { pageTitle :: attr -- ^ Page title @@ -34,7 +36,11 @@ initPage title = Page title mempty mempty - mempty + (H.link + H.! HA.rel "stylesheet" + H.! HA.type_ "text/css" + H.! HA.href "/static/css/style.css" + ) template :: Page H.Html T.Text diff --git a/src/View/Buy.hs b/src/View/Buy.hs index e959744..8d2742e 100644 --- a/src/View/Buy.hs +++ b/src/View/Buy.hs @@ -139,40 +139,43 @@ buyProductsForm -> [MT.ProductShortOverview] -> H.Html buyProductsForm l10n locale prods = do - mapM_ (\(MT.ProductShortOverview pid ident price amount ml maid) -> - H.div $ do + H.div H.! HA.class_ "tile-list" $ + mapM_ (\(MT.ProductShortOverview pid ident price amount ml maid) -> H.div - H.! HA.class_ "form-group optional" - H.!? - ( isJust maid - , productBgStyle (fromString $ show $ fromJust maid) - ) - $ do - H.label - H.! HA.for ("product-select-" <> fromString (show pid)) $ - H.toHtml ident - H.input - H.! HA.id ("product-select-" <> fromString (show pid)) - H.! HA.class_ "form-control product-select" - H.! HA.name ("productSelect-" <> fromString (show pid)) - H.! HA.type_ "checkbox" - H.! HA.value "true" - H.div - H.! HA.class_ "form-group optional" - $ do - H.label - H.! HA.for ("product-amount-" <> fromString (show pid)) $ - H.toHtml (translate "Amount") - H.input - H.! HA.id ("product-amount-" <> fromString (show pid)) - H.! HA.class_ "form-control product-amount" - H.! HA.name ("productAmount-" <> fromString (show pid)) - H.! HA.type_ "number" - H.! HA.min "0" - H.! HA.step "1" - H.! HA.value "1" - ) - prods + H.! HA.class_ "tile" + $ do + H.div + H.! HA.class_ "tile-content form-group optional" + H.!? + ( isJust maid + , productBgStyle (fromString $ show $ fromJust maid) + ) + $ do + H.label + H.! HA.for ("product-select-" <> fromString (show pid)) $ + H.toHtml ident + H.input + H.! HA.id ("product-select-" <> fromString (show pid)) + H.! HA.class_ "form-control product-select" + H.! HA.name ("productSelect-" <> fromString (show pid)) + H.! HA.type_ "checkbox" + H.! HA.value "true" + H.div + H.! HA.class_ "tile-content form-group optional" + $ do + H.label + H.! HA.for ("product-amount-" <> fromString (show pid)) $ + H.toHtml (translate "Amount") + H.input + H.! HA.id ("product-amount-" <> fromString (show pid)) + H.! HA.class_ "form-control product-amount" + H.! HA.name ("productAmount-" <> fromString (show pid)) + H.! HA.type_ "number" + H.! HA.min "0" + H.! HA.step "1" + H.! HA.value "1" + ) + prods H.div H.! HA.class_ "form-group optional" $ H.button H.! HA.class_ "btn btn-default" diff --git a/src/View/User.hs b/src/View/User.hs index c2c9dae..5ac00b7 100644 --- a/src/View/User.hs +++ b/src/View/User.hs @@ -39,18 +39,26 @@ userSelectPage l10n locale uss version mcookie = translate "Matebeamter" <> " - " <> translate "Home" - ) $ do - H.a H.! HA.href ("/" <> fromString - (show $ linkURI $ cashBuyLink Nothing) - ) $ - H.toHtml $ translate "Buy with cash" - mapM_ (\(MT.UserSummary uid ident _) -> - H.a H.! HA.href ("/" <> fromString (show $ linkURI $ - userOverviewLink uid Nothing)) $ - H.toHtml ident - ) uss - H.a H.! HA.href ("/" <> fromString (show $ linkURI userNewLink)) $ - H.toHtml $ translate "New user" + ) $ H.ul + H.! HA.class_ "tile-list" + $ do + H.li H.! HA.class_ "tile" $ H.a + H.! HA.class_ "tile-content function" + H.! HA.href ("/" <> fromString + (show $ linkURI $ cashBuyLink Nothing) + ) $ + H.toHtml $ translate "Buy with cash" + mapM_ (\(MT.UserSummary uid ident _) -> + H.li H.! HA.class_ "tile" $ H.a + H.! HA.class_ "tile-content" + H.! HA.href ("/" <> fromString (show $ linkURI $ + userOverviewLink uid Nothing)) $ + H.toHtml ident + ) uss + H.li H.! HA.class_ "tile" $ H.a + H.! HA.class_ "tile-content function" + H.! HA.href ("/" <> fromString (show $ linkURI userNewLink)) $ + H.toHtml $ translate "New user" where translate = localize l10n locale . gettext @@ -146,15 +154,19 @@ productList -> H.Html productList pos = H.p $ - H.ul H.! HA.class_ "product_list" $ + H.ul H.! HA.class_ "tile-list" $ mapM_ (\(MT.ProductShortOverview pid ident _ _ _ avatarid) -> - H.li H.! HA.class_ "product" H.!? - (isJust avatarid - , productBgStyle (fromString $ show $ fromJust avatarid) - ) $ - H.a H.! HA.href ("#" <> fromString (show pid)) $ - H.toHtml ident + H.li + H.! HA.class_ "tile" + H.!? + (isJust avatarid + , productBgStyle (fromString $ show $ fromJust avatarid) + ) $ + H.a + H.! HA.class_ "tile-content" + H.! HA.href ("#" <> fromString (show pid)) $ + H.toHtml ident ) pos diff --git a/static/css/style.css b/static/css/style.css index 76b4b94..380498b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,16 +1,40 @@ +.tile-content { + flex: 1 1 auto; + background-color: #36c30023; + display: flex; + justify-content: center; + flex-direction: column; +} + +.tile-content * { +} + +.tile-content label, .tile-content div { + width: 100%; +} + .tile { - display: inline-block; + display: inline-flex; + flex-direction: column; + align-content: stretch; + align-items: stretch; + justify-content: stretch; border-radius: 6px; - width: 100px; - height: 100px; - margin: 30px 15px 0; box-shadow: 0 0 3px #c3c3c3; + margin: 30px 15px 0; + width: 200px; + height: 200px; + text-align: center; +} + +.function { + background-color: #c300d223 } .tile-list { list-style: none; } -.tile-list li { - display: inline-block; +hr { + margin-top: 30px; }