Skip to content

Commit

Permalink
Add CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
Mizunashi Mana committed Feb 11, 2020
1 parent a6db4ee commit 2d4e256
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 77 deletions.
5 changes: 5 additions & 0 deletions docs/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css";

details summary {
font-size: larger;
}
93 changes: 53 additions & 40 deletions src/SlackLog/Html.hs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
)
)
)
)
Expand All @@ -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
Expand Down Expand Up @@ -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_ "page__first_message__header")
(getUserScreenName wsi messageUser)
# H.span_A (A.class_ "page__first_message__timestamp")
(timestampWords $ Slack.slackTimestampTime messageTs)
)
# H.div_A (A.class_ "page__first_message__body description")
(H.Raw $ mkMessageBody wsi messageText)
)
)
)

readFirstMessage :: FilePath -> IO Slack.Message
readFirstMessage = fmap head . readJsonFile
Expand Down
37 changes: 28 additions & 9 deletions test/assets/expected-index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,36 @@
<head>
<meta charset="utf-8">
<title>Slack log of haskell-jp</title>
<link rel="stylesheet" href="index.css" type="text/css" media="screen">
<link rel="stylesheet" href="main.css" type="text/css" media="screen">
</head>
<body>
<h1>Slack log of haskell-jp</h1>
<div class="channels_list">
<details class="channel">
<summary class="channel__name"><a href="html/C4M4TT8JJ/35.html">random</a> (Last updated at 2019-01-17 12:14:43 +0900)</summary>
<ul class="pages_list">
<li class="page"><a href="html/C4M4TT8JJ/35.html">#35</a> <span class="page__first_message"><span class="page__first_message__header">U11111</span>: <span class="page__first_message__body">First 7890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</span> at <span class="page__first_message__timestamp">2019-01-17 12:14:41 +0900</span></span></li>
</ul>
</details>
<div class="ui container">
<h1>Slack log of haskell-jp</h1>
<div class="channels_list ui relaxed divided list">
<div class="item">
<div class="content">
<details class="channel">
<summary class="channel__name">
<a href="html/C4M4TT8JJ/35.html">random</a> <span>(Last updated at 2019-01-17 12:14:43 +0900)</span>
</summary>
<div class="pages_list ui items">
<div class="page item">
<div class="content">
<a class="header" href="html/C4M4TT8JJ/35.html">#35</a>
<div class="meta">
<span class="page__first_message__header">U11111</span>
<span class="page__first_message__timestamp">2019-01-17 12:14:41 +0900</span>
</div>
<div class="page__first_message__body description">
First 7890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
</div>
</div>
</div>
</div>
</details>
</div>
</div>
</div>
</div>
</body>
</html>
85 changes: 57 additions & 28 deletions test/assets/expected-messages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,65 @@
<head>
<meta charset="utf-8">
<title>haskell-jp / random #35</title>
<link rel="stylesheet" href="../../messages.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../main.css" type="text/css" media="screen">
</head>
<body>
<h1>haskell-jp / random #35</h1>
<div class="pager">
<a href="../../html/C4M4TT8JJ/34.html" class="pager__previous">Previous</a>
<a href="../../" class="pager__top">Top</a>
<a href="../../html/C4M4TT8JJ/36.html" class="pager__next">Next</a>
</div>
<div class="message_list">
<div class="message" id="message-1547694881.115200">
<div class="message__timestamp">2019-01-17<br/>12:14:41 +0900</div>
<div class="message__header">U11111</div>
<div class="message__body">First 7890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div>
<div class="ui container">
<h1>haskell-jp / random #35</h1>
<div class="pager ui pagination menu">
<a href="../../html/C4M4TT8JJ/34.html" class="pager__previous item">Previous</a>
<a href="../../" class="pager__top item">Top</a>
<a href="../../html/C4M4TT8JJ/36.html" class="pager__next item">Next</a>
</div>
<div class="message_list ui feed">
<div class="message event" id="message-1547694881.115200">
<div class="label">
<i class="user outline icon"></i>
</div>
<div class="content">
<div class="summary">
<div class="message__header user">U11111</div>
<div class="message__timestamp date">2019-01-17&nbsp;12:14:41 +0900</div>
</div>
<div class="message__body description">
First 7890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
</div>
</div>
</div>
<div class="message event" id="message-1547694882.115200">
<div class="label">
<i class="user outline icon"></i>
</div>
<div class="content">
<div class="summary">
<div class="message__header user">example_user</div>
<div class="message__timestamp date">2019-01-17&nbsp;12:14:42 +0900</div>
</div>
<div class="message__body description">
これはテストです。<br/><a href='https://example.com'>https://example.com</a>
</div>
</div>
</div>
<div class="message event" id="message-1547694883.115200">
<div class="label">
<i class="user outline icon"></i>
</div>
<div class="content">
<div class="summary">
<div class="message__header user">U33333</div>
<div class="message__timestamp date">2019-01-17&nbsp;12:14:43 +0900</div>
</div>
<div class="message__body description">
Last 7890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
</div>
</div>
</div>
</div>
<div class="pager ui pagination menu">
<a href="../../html/C4M4TT8JJ/34.html" class="pager__previous item">Previous</a>
<a href="../../" class="pager__top item">Top</a>
<a href="../../html/C4M4TT8JJ/36.html" class="pager__next item">Next</a>
</div>
</div>
<div class="message" id="message-1547694882.115200">
<div class="message__timestamp">2019-01-17<br/>12:14:42 +0900</div>
<div class="message__header">example_user</div>
<div class="message__body">これはテストです。<br/><a href='https://example.com'>https://example.com</a></div>
</div>
<div class="message" id="message-1547694883.115200">
<div class="message__timestamp">2019-01-17<br/>12:14:43 +0900</div>
<div class="message__header">U33333</div>
<div class="message__body">Last 7890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div>
</div>
</div>
<div class="pager">
<a href="../../html/C4M4TT8JJ/34.html" class="pager__previous">Previous</a>
<a href="../../" class="pager__top">Top</a>
<a href="../../html/C4M4TT8JJ/36.html" class="pager__next">Next</a>
</div>
</body>
</html>

0 comments on commit 2d4e256

Please sign in to comment.