From d466faf56e91c1ba6ffc52a9fbd1d749933a104d Mon Sep 17 00:00:00 2001 From: Artyom Date: Mon, 14 Nov 2016 22:10:59 +0300 Subject: [PATCH] Redesign front page and the header Fixes #63 --- lib/View.hs | 74 ++++++++++++++++++++------------ templates/css.widget | 94 ++++++++++++++++++++++++++++++----------- templates/search.widget | 4 +- 3 files changed, 119 insertions(+), 53 deletions(-) diff --git a/lib/View.hs b/lib/View.hs index 3148f04..ae591da 100644 --- a/lib/View.hs +++ b/lib/View.hs @@ -535,17 +535,27 @@ renderEdit globalState edit = do -- TODO: use “data Direction = Up | Down” for directions instead of Bool +-- | “Aelve Guide | Haskell” +haskellHeader :: (Monad m, MonadReader Config m) => HtmlT m () +haskellHeader = do + h1_ $ mkLink ("Aelve Guide " >> span_ "| Haskell") "/haskell" + renderSubtitle + +haskellHeaderMain :: (Monad m, MonadReader Config m) => HtmlT m () +haskellHeaderMain = do + h1_ $ "Aelve Guide " >> span_ "| Haskell" + renderSubtitle + renderHaskellRoot :: (MonadIO m, MonadThrow m, MonadReader Config m) => GlobalState -> Maybe Text -> HtmlT m () renderHaskellRoot globalState mbSearchQuery = - wrapPage "Aelve Guide: Haskell" $ do + wrapPage "Aelve Guide | Haskell" $ do onPageLoad $ JS.expandHash () case mbSearchQuery of - Nothing -> h1_ "Aelve Guide: Haskell" + Nothing -> haskellHeaderMain -- A search page isn't the main page, so we need a link to the main page - Just _ -> h1_ (mkLink "Aelve Guide: Haskell" "/haskell") - renderSubtitle + Just _ -> haskellHeader renderNoScriptWarning renderSearch mbSearchQuery textInput [ @@ -576,9 +586,7 @@ renderCategoryPage renderCategoryPage category = do wrapPage (category^.title <> " – Haskell – Aelve Guide") $ do onPageLoad $ JS.expandHash () - -- TODO: another absolute link [absolute-links] - h1_ (mkLink "Aelve Guide: Haskell" "/haskell") - renderSubtitle + haskellHeader renderNoScriptWarning renderSearch Nothing renderCategory category @@ -687,34 +695,44 @@ renderSearch mbSearchQuery = -- have to start invalidating 'CacheCategoryList' in more things in -- 'Cache.invalidateCache'. renderCategoryList :: MonadIO m => [Category] -> HtmlT m () -renderCategoryList cats = cached CacheCategoryList $ do +renderCategoryList allCats = cached CacheCategoryList $ do div_ [id_ "categories"] $ - for_ (groupWith (view group_) cats) $ \gr -> + for_ (groupWith (view group_) allCats) $ \catsInGroup -> div_ [class_ "category-group"] $ do - h2_ $ toHtml (gr^?!_head.group_) - for_ gr $ \category -> do - -- TODO: this link shouldn't be absolute [absolute-links] - let cl = case category^.status of - CategoryFinished -> "status-finished" - CategoryMostlyDone -> "status-mostly-done" - CategoryWIP -> "status-wip" - CategoryStub -> "status-stub" - a_ [class_ cl, href_ (categoryLink category)] $ - toHtml (category^.title) - case category^.status of - CategoryFinished -> return () - CategoryMostlyDone -> span_ [class_ "status"] "mostly done" - CategoryWIP -> span_ [class_ "status"] "work in progress" - CategoryStub -> span_ [class_ "status"] "stub" - br_ [] + -- Grandcategory name + h2_ $ toHtml (catsInGroup^?!_head.group_) + -- Finished categories + do let cats = filter ((== CategoryFinished) . view status) catsInGroup + unless (null cats) $ + div_ [class_ "categories-finished"] $ do + mapM_ mkCategoryLink cats + -- In-progress categories, separated with commas + do let cats = filter ((== CategoryWIP) . view status) catsInGroup + unless (null cats) $ + div_ [class_ "categories-wip"] $ do + h3_ "In progress" + p_ $ sequence_ $ intersperse ", " $ + map mkCategoryLink cats + -- Stub categories, separated with commas + do let cats = filter ((== CategoryStub) . view status) catsInGroup + unless (null cats) $ + div_ [class_ "categories-stub"] $ do + h3_ "To be written" + p_ $ sequence_ $ intersperse ", " $ + map mkCategoryLink cats + where + -- TODO: this link shouldn't be absolute [absolute-links] + mkCategoryLink :: Category -> HtmlT IO () + mkCategoryLink category = + a_ [class_ "category-link", href_ (categoryLink category)] $ + toHtml (category^.title) renderSearchResults :: Monad m => [Category] -> HtmlT m () renderSearchResults cats = do - div_ [id_ "categories"] $ + div_ [id_ "categories-search-results"] $ for_ cats $ \category -> do - a_ [href_ (categoryLink category)] $ + a_ [class_ "category-link", href_ (categoryLink category)] $ toHtml (category^.title) - br_ [] renderCategoryInfo :: MonadIO m => Category -> HtmlT m () renderCategoryInfo category = cached (CacheCategoryInfo (category^.uid)) $ do diff --git a/templates/css.widget b/templates/css.widget index c4800f7..3b32a18 100644 --- a/templates/css.widget +++ b/templates/css.widget @@ -22,12 +22,19 @@ body { } #main > h1 { + font-size: 250%; + font-weight: 600; margin-bottom: 0px; } +#main > h1 span { + font-weight: 200; +} + .subtitle { - font-weight: bold; + font-weight: 500; color: #e03; + margin-top: 0.4em; margin-bottom: 2em; } .subtitle a { @@ -81,39 +88,78 @@ body { display: flex; flex-flow: row wrap; justify-content: space-between; - margin-top: 1em; + margin-top: 3em; } -#categories a { - font-weight: bold; - line-height: 140%; - font-size: 110%; - padding: 2px 1px; +#categories-search-results { + margin-top: 3em; + margin-bottom: 1em; + padding-left: 2em; } -#categories a.status-mostly-done { - background-color: #fdd; -} -#categories a.status-wip { - background-color: #faa; -} -#categories a.status-stub { - background-color: #f78; -} - -#categories .status { - margin-left: 5px; - color: gray; - font-weight: bold; - font-size: 70%; } - .category-group { - min-width: 350px; } + width: 340px; + padding: 0 30px; + padding-bottom: 50px; +} + +.category-group h2 { + font-size: 190%; + font-weight: 600; + padding: 0px 10px; + margin: 0 -36px; + margin-top: 0px; + margin-bottom: 30px; +} + +/* inside .category-group we have .categories-finished|wip|stub */ + +.categories-finished { + margin-top: -5px; + margin-bottom: 17px; +} + +.categories-wip, .categories-stub { + margin-bottom: 13px; +} + +.categories-wip, .categories-wip h3, +.categories-stub, .categories-stub h3 { + font-size: 15px; + font-weight: 600; +} + +.categories-wip h3, .categories-stub h3 { + margin: 0px; +} + +.categories-wip p, .categories-stub p { + padding-left: 2em; + margin: 1px 0px; + line-height: 18px; +} + +#categories-search-results .category-link, +.categories-finished .category-link { + font-size: 21px; + font-weight: 600; + line-height: 28px; + display: block; +} +.categories-wip .category-link, .categories-stub .category-link { + white-space: nowrap; +} + +/* category pages */ .category { margin-top: 3em; } +.category-title { + font-weight: 600; +} + .item { margin-top: 20px; } diff --git a/templates/search.widget b/templates/search.widget index 7c4ee98..f5bd7e6 100644 --- a/templates/search.widget +++ b/templates/search.widget @@ -24,7 +24,9 @@ CSS #search { font-size: 200%; - border: 1px solid #d0d0d0; + font-weight: 200; + border: 1px solid #aaa; + border-radius: 3px; padding: 3px 10px; width: 100%; }