upd: emote style

2 files changed, 26 insertions, 21 deletions

diff --git a/public/static/style.css b/public/static/style.css
index b1233cc..5127d9c 100644
--- a/public/static/style.css
+++ b/public/static/style.css
@@ -356,15 +356,6 @@ button.big,
 .box.emote {
     width: 96px;
     height: 96px;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    gap: 6px;
-
-    overflow: hidden;
 }
 
 .box.background {
@@ -379,17 +370,19 @@ button.big,
     text-shadow: -1px 1px 4px black;
 }
 
-.box.emote:has(p) h1 {
-    margin-top: 4px;
-    line-height: 0;
-}
-
 .box.emote h1 {
     font-size: 16px;
     font-weight: 600;
+
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .box.emote p {
+    max-width: 100px;
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: 10px;
@@ -398,8 +391,6 @@ button.big,
 .box.emote img {
     max-width: 64px;
     max-height: 64px;
-    margin-top: auto;
-    margin-bottom: auto;
 }
 
 a.box {
@@ -548,6 +539,10 @@ a.box:hover {
     justify-content: space-between;
 }
 
+.justify-bottom {
+    justify-content: end;
+}
+
 .font-small {
     font-size: 12px;
 }
diff --git a/src/emote.php b/src/emote.php
index 01a204a..fcc33ad 100644
--- a/src/emote.php
+++ b/src/emote.php
@@ -250,16 +250,26 @@ function html_featured_emote(PDO &$db)
 function html_display_emotes(array $emotes)
 {
     foreach ($emotes as $e) {
-        echo '<a class="box emote" href="/emotes?id=' . $e->get_id() . '">';
+        echo "<a class='box emote column justify-center items-center' href='/emotes?id={$e->id}'>";
 
         if ($e->is_added_by_user()) {
             echo '<img src="/static/img/icons/yes.png" class="emote-check" />';
         }
 
-        echo '<img src="/static/userdata/emotes/' . $e->get_id() . '/2x.webp" alt="' . $e->get_code() . '"/>';
-        echo '<h1>' . $e->get_code() . '</h1>';
-        echo '<p>' . ($e->get_uploaded_by() == null ? (ANONYMOUS_DEFAULT_NAME . "*") : $e->get_uploaded_by()->username) . '</p>';
-        echo '</a>';
+        // icon
+        echo '<div class="flex justify-center items-center grow emote-icon">';
+        echo "<img src='/static/userdata/emotes/{$e->id}/2x.webp' alt='{$e->code}' />";
+        echo '</div>';
+
+        // info
+        echo '<div class="flex column justify-bottom items-center emote-desc">';
+
+        echo "<h1 title='{$e->code}'>{$e->code}</h1>";
+        if ($e->get_uploaded_by()) {
+            echo "<p>{$e->uploaded_by->username}</p>";
+        }
+
+        echo '</div></a>';
     }
 }