From aa50dd6dc71310e506e4777288b4f3bc75b69451 Mon Sep 17 00:00:00 2001 From: Alexey Golub Date: Sun, 12 Jan 2020 20:16:08 +0200 Subject: [PATCH] [HTML] Clean up layouts and styles --- .../Resources/HtmlCore.css | 159 ++++++++---------- .../Resources/HtmlDark.css | 18 +- .../Resources/HtmlLayoutTemplate.html | 20 +-- .../Resources/HtmlLight.css | 20 +-- .../Resources/HtmlMessageGroupTemplate.html | 12 +- DiscordChatExporter.sln | 2 + 6 files changed, 101 insertions(+), 130 deletions(-) diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlCore.css b/DiscordChatExporter.Core.Rendering/Resources/HtmlCore.css index 9c2ddb2a..5d938192 100644 --- a/DiscordChatExporter.Core.Rendering/Resources/HtmlCore.css +++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlCore.css @@ -1,4 +1,4 @@ -/* === General === */ +/* General */ @font-face { font-family: Whitney; @@ -58,10 +58,10 @@ img { } .quote { + margin: 0.5em 0; + padding-left: 0.6em; border-left: 4px solid; border-radius: 3px; - margin: 8px 0; - padding-left: 10px; } .pre { @@ -69,8 +69,8 @@ img { } .pre--multiline { - margin-top: 4px; - padding: 8px; + margin-top: 0.25em; + padding: 0.5em; border: 2px solid; border-radius: 5px; } @@ -78,7 +78,7 @@ img { .pre--inline { padding: 2px; border-radius: 3px; - font-size: 85%; + font-size: 0.85em; } .mention { @@ -86,79 +86,69 @@ img { } .emoji { - width: 1.45em; - height: 1.45em; - margin: 0 1px; + width: 1.25em; + height: 1.25em; + margin: 0 0.06em; vertical-align: -0.4em; } .emoji--small { - width: 1rem; - height: 1rem; + width: 1em; + height: 1em; } .emoji--large { - width: 2rem; - height: 2rem; + width: 2.8em; + height: 2.8em; } -/* === Preamble === */ +/* Preamble */ -.info { - display: flex; +.preamble { + display: grid; + margin: 0 0.3em 0.6em 0.3em; max-width: 100%; - margin: 0 5px 10px 5px; + grid-template-columns: auto 1fr; } -.info__guild-icon-container { - flex: 0; +.preamble__guild-icon-container { + grid-column: 1; } -.info__guild-icon { +.preamble__guild-icon { max-width: 88px; max-height: 88px; } -.info__metadata { - flex: 1; - margin-left: 10px; +.preamble__entries-container { + grid-column: 2; + margin-left: 0.6em; } -.info__guild-name { +.preamble__entry { font-size: 1.4em; } -.info__channel-name { - font-size: 1.2em; +.preamble__entry--small { + font-size: 1em; } -.info__channel-topic { - margin-top: 2px; -} - -.info__channel-message-count { - margin-top: 2px; -} - -.info__channel-date-range { - margin-top: 2px; -} - -/* === Chatlog === */ +/* Chatlog */ .chatlog { max-width: 100%; } .chatlog__message-group { - display: flex; - margin: 0 10px; - padding: 15px 0; + display: grid; + margin: 0 0.6em; + padding: 0.9em 0; border-top: 1px solid; + grid-template-columns: auto 1fr; } .chatlog__author-avatar-container { - flex: 0; + grid-column: 1; width: 40px; height: 40px; } @@ -170,55 +160,53 @@ img { } .chatlog__messages { - flex: 1; + grid-column: 2; + margin-left: 1.2em; min-width: 50%; - margin-left: 20px; } .chatlog__author-name { - font-size: 1em; font-weight: 500; } .chatlog__timestamp { - margin-left: 5px; - font-size: .75em; + margin-left: 0.3em; + font-size: 0.75em; } .chatlog__message { - padding: 2px 5px; - margin-right: -5px; - margin-left: -5px; + padding: 0.1em 0.3em; + margin: 0 -0.3em; background-color: transparent; transition: background-color 1s ease; } .chatlog__content { - font-size: .9375em; + font-size: 0.95em; word-wrap: break-word; } .chatlog__edited-timestamp { - margin-left: 3px; - font-size: .8em; + margin-left: 0.15em; + font-size: 0.8em; } .chatlog__attachment-thumbnail { - margin-top: 5px; + margin-top: 0.3em; max-width: 50%; max-height: 500px; border-radius: 3px; } .chatlog__embed { - margin-top: 5px; display: flex; + margin-top: 0.3em; max-width: 520px; } .chatlog__embed-color-pill { flex-shrink: 0; - width: 4px; + width: 0.25em; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } @@ -226,15 +214,15 @@ img { .chatlog__embed-content-container { display: flex; flex-direction: column; - padding: 8px 10px; + padding: 0.5em 0.6em; border: 1px solid; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .chatlog__embed-content { - width: 100%; display: flex; + width: 100%; } .chatlog__embed-text { @@ -243,31 +231,31 @@ img { .chatlog__embed-author { display: flex; + margin-bottom: 0.3em; align-items: center; - margin-bottom: 5px; } .chatlog__embed-author-icon { + margin-right: 0.5em; width: 20px; height: 20px; - margin-right: 9px; border-radius: 50%; } .chatlog__embed-author-name { - font-size: .875em; + font-size: 0.875em; font-weight: 600; } .chatlog__embed-title { - margin-bottom: 4px; - font-size: .875em; + margin-bottom: 0.2em; + font-size: 0.875em; font-weight: 600; } .chatlog__embed-description { font-weight: 500; - font-size: 14px; + font-size: 0.85em; } .chatlog__embed-fields { @@ -279,7 +267,8 @@ img { flex: 0; min-width: 100%; max-width: 506px; - padding-top: 10px; + padding-top: 0.6em; + font-size: 0.875em; } .chatlog__embed-field--inline { @@ -289,26 +278,24 @@ img { } .chatlog__embed-field-name { - margin-bottom: 4px; - font-size: .875em; + margin-bottom: 0.2em; font-weight: 600; } .chatlog__embed-field-value { - font-size: .875em; font-weight: 500; } .chatlog__embed-thumbnail { flex: 0; - margin-left: 20px; + margin-left: 1.2em; max-width: 80px; max-height: 80px; border-radius: 3px; } .chatlog__embed-image-container { - margin-top: 10px; + margin-top: 0.6em; } .chatlog__embed-image { @@ -318,11 +305,11 @@ img { } .chatlog__embed-footer { - margin-top: 10px; + margin-top: 0.6em; } .chatlog__embed-footer-icon { - margin-right: 4px; + margin-right: 0.2em; width: 20px; height: 20px; border-radius: 50%; @@ -330,8 +317,8 @@ img { } .chatlog__embed-footer-text { + font-size: 0.75em; font-weight: 500; - font-size: .75em; } .chatlog__reactions { @@ -341,35 +328,35 @@ img { .chatlog__reaction { display: flex; align-items: center; - margin: 6px 2px 2px 2px; - padding: 3px 6px; + margin: 0.35em 0.1em 0.1em 0.1em; + padding: 0.2em 0.35em; border-radius: 3px; } .chatlog__reaction-count { min-width: 9px; - margin-left: 6px; - font-size: .875em; + margin-left: 0.35em; + font-size: 0.875em; } .chatlog__bot-tag { + position: relative; + top: -.2em; margin-left: 0.3em; + padding: 0.05em 0.3em; + border-radius: 3px; + vertical-align: middle; + line-height: 1.3; background: #7289da; color: #ffffff; font-size: 0.625em; font-weight: 500; - padding: 1px 2px; - border-radius: 3px; - vertical-align: middle; - line-height: 1.3; - position: relative; - top: -.2em; } /* Postamble */ .postamble { - margin: 24px 5px 10px 5px; - padding: 16px; + margin: 1.4em 0.3em 0.6em 0.3em; + padding: 1em; border-top: 1px solid; } \ No newline at end of file diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css b/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css index 9e4c873f..1059b28c 100644 --- a/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css +++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css @@ -1,4 +1,4 @@ -/* === General === */ +/* General */ body { background-color: #36393e; @@ -32,19 +32,11 @@ a { /* === Preamble === */ -.info__guild-name { +.preamble__entry { color: #ffffff; } -.info__channel-name { - color: #ffffff; -} - -.info__channel-topic { - color: #ffffff; -} - -/* === Chatlog === */ +/* Chatlog */ .chatlog__message-group { border-color: rgba(255, 255, 255, 0.1); @@ -115,12 +107,12 @@ a { color: rgba(255, 255, 255, 0.3); } -/* === Postamble === */ +/* Postamble */ .postamble { border-color: rgba(255, 255, 255, 0.1); } -.postamble__info { +.postamble__entry { color: #ffffff; } \ No newline at end of file diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlLayoutTemplate.html b/DiscordChatExporter.Core.Rendering/Resources/HtmlLayoutTemplate.html index de5e5d49..97075286 100644 --- a/DiscordChatExporter.Core.Rendering/Resources/HtmlLayoutTemplate.html +++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlLayoutTemplate.html @@ -49,20 +49,20 @@ {{~ # Preamble ~}} -
-
- +
+
+ Guild icon
-
-
{{ Context.Guild.Name | html.escape }}
-
{{ Context.Channel.Name | html.escape }}
+
+
{{ Context.Guild.Name | html.escape }}
+
{{ Context.Channel.Name | html.escape }}
{{~ if Context.Channel.Topic ~}} -
{{ Context.Channel.Topic | html.escape }}
+
{{ Context.Channel.Topic | html.escape }}
{{~ end ~}} {{~ if Context.After || Context.Before ~}} -
+
{{~ if Context.After && Context.Before ~}} Between {{ Context.After | FormatDate | html.escape }} and {{ Context.Before | FormatDate | html.escape }} {{~ else if Context.After ~}} @@ -82,9 +82,7 @@ {{~ # Postamble ~}}
-
- Exported {{ MessageCount | object.format "N0" }} message(s) -
+
Exported {{ MessageCount | object.format "N0" }} message(s)
diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css b/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css index 3dbc1dfe..751be3cc 100644 --- a/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css +++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css @@ -1,4 +1,4 @@ -/* === General === */ +/* General */ body { background-color: #ffffff; @@ -32,21 +32,13 @@ a { color: #7289da; } -/* === Preamble === */ +/* Preamble */ -.info__guild-name { +.preamble__entry { color: #2f3136; } -.info__channel-name { - color: #2f3136; -} - -.info__channel-topic { - color: #2f3136; -} - -/* === Chatlog === */ +/* Chatlog */ .chatlog__message-group { border-color: #eceeef; @@ -118,12 +110,12 @@ a { color: #747f8d; } -/* === Postamble === */ +/* Postamble */ .postamble { border-color: #eceeef; } -.postamble__info { +.postamble__entry { color: #2f3136; } \ No newline at end of file diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlMessageGroupTemplate.html b/DiscordChatExporter.Core.Rendering/Resources/HtmlMessageGroupTemplate.html index a885efae..00eda12a 100644 --- a/DiscordChatExporter.Core.Rendering/Resources/HtmlMessageGroupTemplate.html +++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlMessageGroupTemplate.html @@ -1,7 +1,7 @@
{{~ # Avatar ~}}
- + Avatar
{{~ # Author name and timestamp ~}} @@ -35,7 +35,7 @@ {{ # Image }} {{~ if attachment.IsImage ~}} - + Attachment {{~ # Non-image ~}} {{~ else ~}} Attachment: {{ attachment.FileName }} ({{ attachment.FileSize }}) @@ -59,7 +59,7 @@ {{~ if embed.Author ~}}
{{~ if embed.Author.IconUrl ~}} - + Author icon {{~ end ~}} {{~ if embed.Author.Name ~}} @@ -111,7 +111,7 @@ {{~ if embed.Thumbnail ~}}
- + Thumbnail
{{~ end ~}} @@ -121,7 +121,7 @@ {{~ if embed.Image ~}}
- + Image
{{~ end ~}} @@ -131,7 +131,7 @@
{{~ if embed.Footer ~}} {{~ if embed.Footer.Text && embed.Footer.IconUrl ~}} - + Footer icon {{~ end ~}} {{~ end ~}} diff --git a/DiscordChatExporter.sln b/DiscordChatExporter.sln index 8bf21b8d..8169740f 100644 --- a/DiscordChatExporter.sln +++ b/DiscordChatExporter.sln @@ -8,6 +8,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Changelog.md = Changelog.md License.txt = License.txt Readme.md = Readme.md + DiscordChatExporter.props = DiscordChatExporter.props + Dockerfile = Dockerfile EndProjectSection EndProject Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "DiscordChatExporter.Core.Markdown", "DiscordChatExporter.Core.Markdown\DiscordChatExporter.Core.Markdown.csproj", "{14D02A08-E820-4012-B805-663B9A3D73E9}"