diff options
| author | r <r@freesoftwareextremist.com> | 2020-05-24 05:46:54 +0000 |
|---|---|---|
| committer | r <r@freesoftwareextremist.com> | 2020-05-24 05:57:01 +0000 |
| commit | f3367d920d151727bf5703a364c7d39ae24071d7 (patch) | |
| tree | 943941882af4b47131eaa4fb510df2abc6256d3c | |
| parent | fd2a353770a5f3cea773a5c4465bf0fc2a2818d3 (diff) | |
| download | bloat-f3367d920d151727bf5703a364c7d39ae24071d7.tar.gz bloat-f3367d920d151727bf5703a364c7d39ae24071d7.zip | |
Imporve emoji style
- Increase emoji size
- Add colons to emoji alt text and title
| -rw-r--r-- | renderer/renderer.go | 4 | ||||
| -rw-r--r-- | static/style.css | 19 | ||||
| -rw-r--r-- | templates/emoji.tmpl | 4 |
3 files changed, 11 insertions, 16 deletions
diff --git a/renderer/renderer.go b/renderer/renderer.go index 41b3ea4..4d35ba7 100644 --- a/renderer/renderer.go +++ b/renderer/renderer.go @@ -40,7 +40,7 @@ func emojiFilter(content string, emojis []mastodon.Emoji) string { var replacements []string var r string for _, e := range emojis { - r = fmt.Sprintf("<img class=\"status-emoji\" src=\"%s\" alt=\"%s\" title=\"%s\" />", + r = fmt.Sprintf("<img class=\"emoji\" src=\"%s\" alt=\":%s:\" title=\":%s:\" />", e.URL, e.ShortCode, e.ShortCode) replacements = append(replacements, ":"+e.ShortCode+":", r) } @@ -56,7 +56,7 @@ func statusContentFilter(spoiler string, content string, content = spoiler + "<br />" + content } for _, e := range emojis { - r = fmt.Sprintf("<img class=\"status-emoji\" src=\"%s\" alt=\"%s\" title=\"%s\" />", + r = fmt.Sprintf("<img class=\"emoji\" src=\"%s\" alt=\":%s:\" title=\":%s:\" />", e.URL, e.ShortCode, e.ShortCode) replacements = append(replacements, ":"+e.ShortCode+":", r) } diff --git a/static/style.css b/static/style.css index 838a3c4..64ca7b1 100644 --- a/static/style.css +++ b/static/style.css @@ -63,13 +63,6 @@ font-size: 10pt; } -.status-emoji { - height: 20px; - margin-bottom: -4px; - width: auto; - vertical-align: unset !important; -} - .name-emoji { height: 20px; width: auto; @@ -324,18 +317,20 @@ a:hover, vertical-align: middle; } -.emoji { +.emoji-item { min-width: 220px; display: inline-block; - margin-bottom: 2px; + margin: 4px 0; } -.emoji-img { - height: 24px; - width: 24px; +img.emoji { + height: 32px; object-fit: contain; vertical-align: middle; +} +.status-dname img.emoji { + height: 24px; } .emoji-shortcode { diff --git a/templates/emoji.tmpl b/templates/emoji.tmpl index 3e9f0f0..cbffc7b 100644 --- a/templates/emoji.tmpl +++ b/templates/emoji.tmpl @@ -4,8 +4,8 @@ <div class="emoji-list-container"> {{range .Emojis}} - <div class="emoji"> - <img class="emoji-img" src="{{.URL}}" alt="{{.ShortCode}}" /> + <div class="emoji-item"> + <img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" /> <div class="emoji-shortcode">:{{.ShortCode}}:</div> </div> {{end}} |