Imporve emoji style
authorr <r@freesoftwareextremist.com>
Sun, 24 May 2020 05:46:54 +0000 (05:46 +0000)
committerr <r@freesoftwareextremist.com>
Sun, 24 May 2020 05:57:01 +0000 (05:57 +0000)
- Increase emoji size
- Add colons to emoji alt text and title

renderer/renderer.go
static/style.css
templates/emoji.tmpl

index 41b3ea4ed8f76339c3830f6c91e2d32439d453f4..4d35ba7249a3fef1d223551a035e6f76261c7412 100644 (file)
@@ -40,7 +40,7 @@ func emojiFilter(content string, emojis []mastodon.Emoji) string {
        var replacements []string
        var r string
        for _, e := range emojis {
        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)
        }
                        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 {
                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)
        }
                        e.URL, e.ShortCode, e.ShortCode)
                replacements = append(replacements, ":"+e.ShortCode+":", r)
        }
index 838a3c453f2dec7e16dec306b9e5c67caf9caddd..64ca7b10dc29a43c826a9429084a733c4c048504 100644 (file)
        font-size: 10pt;
 }
 
        font-size: 10pt;
 }
 
-.status-emoji {
-       height: 20px;
-       margin-bottom: -4px;
-       width: auto;
-       vertical-align: unset !important;
-}
-
 .name-emoji {
        height: 20px;
        width: auto;
 .name-emoji {
        height: 20px;
        width: auto;
@@ -324,18 +317,20 @@ a:hover,
   vertical-align: middle;
 }
 
   vertical-align: middle;
 }
 
-.emoji {
+.emoji-item {
        min-width: 220px;
        display: inline-block;
        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;
        object-fit: contain;
        vertical-align: middle;
+}
 
 
+.status-dname img.emoji {
+       height: 24px;
 }
 
 .emoji-shortcode {
 }
 
 .emoji-shortcode {
index 3e9f0f0cf5061387c55cc437052431c367ec7061..cbffc7b2593ddedeb4c3bfc860bd780ffbf51a9a 100644 (file)
@@ -4,8 +4,8 @@
 
 <div class="emoji-list-container">
        {{range .Emojis}}
 
 <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}}
                <div class="emoji-shortcode">:{{.ShortCode}}:</div>
        </div>
        {{end}}