Add CSS

haskell-jp · Feb 10, 2020 · 97bc030 · 97bc030
1 parent a6db4ee
commit 97bc030
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 40 deletions.
diff --git a/docs/main.css b/docs/main.css
@@ -0,0 +1,5 @@
+@import "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css";
+
+details summary {
+    font-size: larger;
+}
diff --git a/src/SlackLog/Html.hs b/src/SlackLog/Html.hs
@@ -108,16 +108,18 @@ renderSlackMessages wsi@WorkspaceInfo {..} PageInfo {..} =
         # H.title_ title
         # H.link_A
           ( A.rel_ "stylesheet"
-          # A.href_ "../../messages.css"
+          # A.href_ "../../main.css"
           # A.type_ "text/css"
           # A.media_ "screen"
           )
         )
       # H.body_
-        ( H.h1_ title
-        # pager
-        # H.div_A (A.class_ "message_list") (map messageDiv msgs)
-        # pager
+        ( H.div_A (A.class_ "ui container")
+          ( H.h1_ title
+          # pager
+          # H.div_A (A.class_ "message_list ui feed") (map messageDiv msgs)
+          # pager
+          )
         )
       )
     )
@@ -128,34 +130,41 @@ renderSlackMessages wsi@WorkspaceInfo {..} PageInfo {..} =
     <> T.pack " #" <> T.pack (show (parsePageNumber currentPagePath))
     )
 
-  pager = H.div_A (A.class_ "pager")
+  pager = H.div_A (A.class_ "pager ui pagination menu")
     ( ((\pp -> H.a_A (A.href_ ("../../" ++ pp) # prevClass) prevLabel) . ensurePathIn "html" channelId <$> previousPagePath)
     #          H.a_A (A.href_ "../../" # topClass ) topLabel
     # ((\pp -> H.a_A (A.href_ ("../../" ++ pp) # nextClass) nextLabel) . ensurePathIn "html" channelId <$> nextPagePath)
     )
    where
-    topClass = A.class_ "pager__top"
-    prevClass = A.class_ "pager__previous"
-    nextClass = A.class_ "pager__next"
+    topClass = A.class_ "pager__top item"
+    prevClass = A.class_ "pager__previous item"
+    nextClass = A.class_ "pager__next item"
 
     topLabel = "Top"
     prevLabel = "Previous"
     nextLabel = "Next"
 
   messageDiv Slack.Message { messageTs, messageUser, messageText } =
-    H.div_A (A.class_ "message" # A.id_ (T.pack "message-" <> Slack.slackTimestampTs messageTs))
-      ( H.div_A (A.class_ "message__timestamp")
-        (H.Raw . timestampBlock $ Slack.slackTimestampTime messageTs)
-      # H.div_A (A.class_ "message__header")
-        userName
-      # H.div_A (A.class_ "message__body")
-        (H.Raw $ mkMessageBody wsi messageText)
+    H.div_A (A.class_ "message event" # A.id_ (T.pack "message-" <> Slack.slackTimestampTs messageTs))
+      ( H.div_A (A.class_ "label")
+        ( H.i_A (A.class_ "user outline icon") ()
+        )
+      # H.div_A (A.class_ "content")
+        ( H.div_A (A.class_ "summary")
+          ( H.div_A (A.class_ "message__header user")
+            userName
+          # H.div_A (A.class_ "message__timestamp date")
+            (H.Raw . timestampBlock $ Slack.slackTimestampTime messageTs)
+          )
+        # H.div_A (A.class_ "message__body description")
+          (H.Raw $ mkMessageBody wsi messageText)
+        )
       )
    where
     userName = getUserScreenName wsi messageUser
     timestampBlock tm =
       let lt = LT.utcToZonedTime (getTimeDiff tm) tm
-      in TF.formatTime TF.defaultTimeLocale "%Y-%m-%d<br/>%T %z" lt
+      in TF.formatTime TF.defaultTimeLocale "%Y-%m-%d&nbsp;%T %z" lt
 
 
 loadWorkspaceInfo :: Config -> FilePath -> IO WorkspaceInfo
@@ -193,46 +202,50 @@ renderIndexOfPages wsi@WorkspaceInfo {..} =
           # H.title_ title
           # H.link_A
             ( A.rel_ "stylesheet"
-            # A.href_ "index.css"
+            # A.href_ "main.css"
             # A.type_ "text/css"
             # A.media_ "screen"
             )
           )
         # H.body_
-          ( H.h1_ title
-          # H.div_A (A.class_ "channels_list") body
+          ( H.div_A (A.class_ "ui container")
+            ( H.h1_ title
+            # H.div_A (A.class_ "channels_list ui relaxed divided list") body
+            )
           )
         )
       )
   title = T.pack "Slack log of " <> workspaceInfoName
 
   channelSummary cid lastJsonPath Slack.Message { messageTs } details =
-    H.details_A (A.class_ "channel")
-    ( H.summary_A (A.class_ "channel__name")
-      ( H.a_A (A.href_ (ensurePathIn "html" cid lastJsonPath)) (getChannelScreenName wsi cid)
-      # (" (Last updated at " <> timestampWords (Slack.slackTimestampTime messageTs) <> ")")
+    H.div_A (A.class_ "item")
+      ( H.div_A (A.class_ "content")
+        ( H.details_A (A.class_ "channel")
+          ( H.summary_A (A.class_ "channel__name")
+            ( H.a_A (A.href_ (ensurePathIn "html" cid lastJsonPath)) (getChannelScreenName wsi cid)
+            # " "
+            # H.span_A () ("(Last updated at " <> timestampWords (Slack.slackTimestampTime messageTs) <> ")")
+            )
+          # H.div_A (A.class_ "pages_list ui items") details
+          )
+        )
       )
-      # details
-    )
 
   channelDetail cid jsonPath Slack.Message { messageTs, messageUser, messageText } =
-    H.ul_A (A.class_ "pages_list")
-    ( H.li_A (A.class_ "page")
-      ( H.a_A (A.href_ (ensurePathIn "html" cid jsonPath))
-        (T.pack "#" <> T.pack (show (parsePageNumber jsonPath)))
-      # " "
-      # H.span_A (A.class_ "page__first_message")
-        ( H.span_A (A.class_ "page__first_message__header") (getUserScreenName wsi messageUser)
-        # ": "
-        # H.span_A (A.class_ "page__first_message__body")
-            (H.Raw $ mkMessageBody wsi messageText)
-        # " at "
-        # ( H.span_A (A.class_ "page__first_message__timestamp")
-            . timestampWords $ Slack.slackTimestampTime messageTs
+    H.div_A (A.class_ "page item")
+      ( H.div_A (A.class_ "content")
+        ( H.a_A (A.class_ "header" # A.href_ (ensurePathIn "html" cid jsonPath))
+          (T.pack "#" <> T.pack (show (parsePageNumber jsonPath)))
+        # H.div_A (A.class_ "meta")
+          ( H.span_A (A.class_ "message__header")
+            (getUserScreenName wsi messageUser)
+          # H.span_A (A.class_ "message__timestamp")
+            (timestampWords $ Slack.slackTimestampTime messageTs)
           )
+        # H.div_A (A.class_ "page__first_body description")
+          (H.Raw $ mkMessageBody wsi messageText)
         )
       )
-    )
 
   readFirstMessage :: FilePath -> IO Slack.Message
   readFirstMessage = fmap head . readJsonFile