From f76d1841731f1553d7c88ced0b8a03bce0e1cb59 Mon Sep 17 00:00:00 2001
From: Zorchenhimer <zorchenhimer@gmail.com>
Date: Sat, 16 Jan 2021 15:36:44 -0500
Subject: [PATCH] Don't hardcode emote size

Replaced the hardcoded height attribute in the emote img tags with a
class attribute.  This allows the emotes to be resized with the change
of a CSS value instead of recompiling the server.

Resolves #150
---
 common/emotes.go      |  4 ++--
 common/emotes_test.go | 36 ++++++++++++++++++------------------
 static/css/site.css   |  4 ++++
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/common/emotes.go b/common/emotes.go
index fcd3746..052e265 100644
--- a/common/emotes.go
+++ b/common/emotes.go
@@ -48,7 +48,7 @@ func (em EmotesMap) Add(fullpath string) EmotesMap {
 }
 
 func EmoteToHtml(file, title string) string {
-	return fmt.Sprintf(`<img src="%s" height="28px" title="%s" />`, file, title)
+	return fmt.Sprintf(`<img src="%s" class="emote" title="%s" />`, file, title)
 }
 
 // Used with a regexp.ReplaceAllStringFunc() call. Needs to lookup the value as it
@@ -56,7 +56,7 @@ func EmoteToHtml(file, title string) string {
 func emoteToHmtl2(key string) string {
 	key = strings.Trim(key, ":[]")
 	if val, ok := Emotes[key]; ok {
-		return fmt.Sprintf(`<img src="%s" height="28px" title="%s" />`, val, key)
+		return fmt.Sprintf(`<img src="%s" class="emote" title="%s" />`, val, key)
 	}
 	return key
 }
diff --git a/common/emotes_test.go b/common/emotes_test.go
index 0e61f87..0e3cf28 100644
--- a/common/emotes_test.go
+++ b/common/emotes_test.go
@@ -6,31 +6,31 @@ import (
 )
 
 var data_good = map[string]string{
-	"one":   `<img src="/emotes/one.png" height="28px" title="one" />`,
-	"two":   `<img src="/emotes/two.png" height="28px" title="two" />`,
-	"three": `<img src="/emotes/three.gif" height="28px" title="three" />`,
+	"one":   `<img src="/emotes/one.png" class="emote" title="one" />`,
+	"two":   `<img src="/emotes/two.png" class="emote" title="two" />`,
+	"three": `<img src="/emotes/three.gif" class="emote" title="three" />`,
 
-	":one:":   `<img src="/emotes/one.png" height="28px" title="one" />`,
-	":two:":   `<img src="/emotes/two.png" height="28px" title="two" />`,
-	":three:": `<img src="/emotes/three.gif" height="28px" title="three" />`,
+	":one:":   `<img src="/emotes/one.png" class="emote" title="one" />`,
+	":two:":   `<img src="/emotes/two.png" class="emote" title="two" />`,
+	":three:": `<img src="/emotes/three.gif" class="emote" title="three" />`,
 
-	":one::one:": `<img src="/emotes/one.png" height="28px" title="one" /><img src="/emotes/one.png" height="28px" title="one" />`,
-	":one:one:":  `<img src="/emotes/one.png" height="28px" title="one" />one:`,
+	":one::one:": `<img src="/emotes/one.png" class="emote" title="one" /><img src="/emotes/one.png" class="emote" title="one" />`,
+	":one:one:":  `<img src="/emotes/one.png" class="emote" title="one" />one:`,
 	"oneone":     "oneone",
-	"one:one:":   `one<img src="/emotes/one.png" height="28px" title="one" />`,
+	"one:one:":   `one<img src="/emotes/one.png" class="emote" title="one" />`,
 
-	"[one]":   `<img src="/emotes/one.png" height="28px" title="one" />`,
-	"[two]":   `<img src="/emotes/two.png" height="28px" title="two" />`,
-	"[three]": `<img src="/emotes/three.gif" height="28px" title="three" />`,
+	"[one]":   `<img src="/emotes/one.png" class="emote" title="one" />`,
+	"[two]":   `<img src="/emotes/two.png" class="emote" title="two" />`,
+	"[three]": `<img src="/emotes/three.gif" class="emote" title="three" />`,
 
-	"[one][one]": `<img src="/emotes/one.png" height="28px" title="one" /><img src="/emotes/one.png" height="28px" title="one" />`,
-	"[one]one":   `<img src="/emotes/one.png" height="28px" title="one" />one`,
+	"[one][one]": `<img src="/emotes/one.png" class="emote" title="one" /><img src="/emotes/one.png" class="emote" title="one" />`,
+	"[one]one":   `<img src="/emotes/one.png" class="emote" title="one" />one`,
 
-	":one: two [three]": `<img src="/emotes/one.png" height="28px" title="one" /> <img src="/emotes/two.png" height="28px" title="two" /> <img src="/emotes/three.gif" height="28px" title="three" />`,
+	":one: two [three]": `<img src="/emotes/one.png" class="emote" title="one" /> <img src="/emotes/two.png" class="emote" title="two" /> <img src="/emotes/three.gif" class="emote" title="three" />`,
 
-	"nope one what":     `nope <img src="/emotes/one.png" height="28px" title="one" /> what`,
-	"nope :two: what":   `nope <img src="/emotes/two.png" height="28px" title="two" /> what`,
-	"nope [three] what": `nope <img src="/emotes/three.gif" height="28px" title="three" /> what`,
+	"nope one what":     `nope <img src="/emotes/one.png" class="emote" title="one" /> what`,
+	"nope :two: what":   `nope <img src="/emotes/two.png" class="emote" title="two" /> what`,
+	"nope [three] what": `nope <img src="/emotes/three.gif" class="emote" title="three" /> what`,
 }
 
 var data_wrapped = map[string]string{
diff --git a/static/css/site.css b/static/css/site.css
index 5f06b58..5604b2a 100644
--- a/static/css/site.css
+++ b/static/css/site.css
@@ -124,6 +124,10 @@ input[type=text] {
   width: 112px;
 }
 
+.emote {
+    height: 28px;
+}
+
 .notice {
     color: #595959;
     font-size: 75%;