Redesign front page and the header

Fixes #63

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

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;
 }

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%;
 }