www: msg buttons

3 files changed, 72 insertions, 35 deletions

diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index ed857547..e62f4c90 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -338,6 +338,11 @@ article .tags > a,
     margin-right: 5px;
     padding: 0 10px;
 }
+article .msg-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
 .msgthread {
     margin-bottom: 0;
 }
diff --git a/juick-www/src/main/webapp/WEB-INF/views/partial/message.html b/juick-www/src/main/webapp/WEB-INF/views/partial/message.html
index 2d0e3e97..6babe203 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/partial/message.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/partial/message.html
@@ -26,36 +26,53 @@
     {% endif %}
     <nav class="l">
         {% if visitor.uid == msg.user.uid %}
-        <a href="/{{ msg.mid }}">
-            <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
-            {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
+        <a href="/{{ msg.mid }}" class="a-like msg-button">
+            <span>
+                <i data-icon="ei-heart" data-size="s"></i>
+                {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
+            </span>
+            <span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
         </a>
         {% elseif visitor.uid > 0 %}
-        <a href="/post?body=!+%23{{ msg.mid }}" class="a-like">
-            <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
-            {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
+        <a href="/post?body=!+%23{{ msg.mid }}" class="a-like msg-button">
+            <span>
+                <i data-icon="ei-heart" data-size="s"></i>
+                {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
+            </span>
+            <span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
         </a>
         {% else %}
-        <a href="/login" class="a-login">
-            <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
-            {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
+        <a href="/login" class="a-login msg-button">
+            <span>
+                <i data-icon="ei-heart" data-size="s"></i>
+                {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
+            </span>
+            <span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
         </a>
         {% endif %}
         {% if (visitor.uid > 0 and not msg.ReadOnly) or (visitor.uid == msg.user.uid) %}
-        <a href="/{{ msg.mid }}" class="a-comment">
-            <i data-icon="ei-comment" data-size="s"></i>&nbsp;{{ i18n("messages","message.comment") }}
-            {% if msg.Replies > 0 %}&nbsp;({{ msg.Replies }}){% endif %}
+        <a href="/{{ msg.mid }}" class="a-comment msg-button">
+            <span>
+                <i data-icon="ei-comment" data-size="s"></i>
+                {% if msg.Replies > 0 %}&nbsp;({{ msg.Replies }}){% endif %}
+            </span>
+            <span>&nbsp;{{ i18n("messages","message.comment") }}</span>
         </a>
-        <a href="#" class="msg-menu">
-            <i data-icon="ei-link" data-size="s"></i>&nbsp;{{ i18n("messages","message.share") }}
+        <a href="#" class="msg-menu msg-button">
+            <i data-icon="ei-link" data-size="s"></i>
+            <span>&nbsp;{{ i18n("messages","message.share") }}</span>
         </a>
         {% elseif visitor.uid == 0 and not msg.ReadOnly %}
-        <a href="/login" class="a-login">
-            <i data-icon="ei-comment" data-size="s"></i>&nbsp;{{ i18n("messages","message.comment") }}
-            {% if msg.Replies > 0 %}&nbsp;({{ msg.Replies }}){% endif %}
+        <a href="/login" class="a-login msg-button">
+            <span>
+                <i data-icon="ei-comment" data-size="s"></i>
+                {% if msg.Replies > 0 %}&nbsp;({{ msg.Replies }}){% endif %}
+            </span>
+            <span>&nbsp;{{ i18n("messages","message.comment") }}</span>
         </a>
-        <a href="#" class="msg-menu">
-            <i data-icon="ei-link" data-size="s"></i>&nbsp;{{ i18n("messages","message.share") }}
+        <a href="#" class="msg-menu msg-button">
+            <i data-icon="ei-link" data-size="s"></i>
+            <span>&nbsp;{{ i18n("messages","message.share") }}</span>
         </a>
         {% endif %}
         {% if msg.FriendsOnly %}
diff --git a/juick-www/src/main/webapp/WEB-INF/views/thread.html b/juick-www/src/main/webapp/WEB-INF/views/thread.html
index a488b960..685115be 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/thread.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/thread.html
@@ -33,37 +33,52 @@
             {% endif %}
             <nav class="l">
                 {% if visitor.uid == msg.user.uid %}
-                <a href="/{{ msg.mid }}">
-                    <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
-                    {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
+                <a href="/{{ msg.mid }}" class="a-like msg-button">
+                    <span>
+                        <i data-icon="ei-heart" data-size="s"></i>
+                        {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
+                    </span>
+                    <span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
                 </a>
                 {% elseif visitor.uid > 0 %}
-                <a href="/post?body=!+%23{{ msg.mid }}" class="a-like">
-                    <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
-                    {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
+                <a href="/post?body=!+%23{{ msg.mid }}" class="a-like msg-button">
+                    <span>
+                        <i data-icon="ei-heart" data-size="s"></i>
+                        {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
+                    </span>
+                    <span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
                 </a>
                 {% else %}
-                <a href="/login" class="a-login">
-                    <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
-                    {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
+                <a href="/login" class="a-login msg-button">
+                    <span>
+                        <i data-icon="ei-heart" data-size="s"></i>
+                        {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
+                    </span>
+                    <span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
+
                 </a>
                 {% endif %}
-                <a href="#" class="msg-menu"><i data-icon="ei-link" data-size="s"></i>&nbsp;{{ i18n("messages","message.share") }}</a>
+                <a href="#" class="msg-menu msg-button">
+                    <i data-icon="ei-link" data-size="s"></i>
+                    <span>&nbsp;{{ i18n("messages","message.share") }}</span>
+                </a>
                 {% if visitor.uid > 0 %}
                     {% if visitor.uid != msg.user.uid %}
                         {% if visitorSubscribed %}
-                <a href="/post?body=U+%23{{ msg.mid }}">
-                    <i data-icon="ei-check" data-size="s"></i>&nbsp;{{ i18n("messages","message.subscribed") }}
+                <a href="/post?body=U+%23{{ msg.mid }}" class="msg-button">
+                    <i data-icon="ei-check" data-size="s"></i>
+                    <span>&nbsp;{{ i18n("messages","message.subscribed") }}</span>
                 </a>
                         {% else %}
-                <a href="/post?body=S+%23{{ msg.mid }}">
+                <a href="/post?body=S+%23{{ msg.mid }}" class="msg-button">
                     <i data-icon="ei-eye" data-size="s"></i>
-                    &nbsp;{{ i18n("messages","message.subscribe") }}
+                    <span>&nbsp;{{ i18n("messages","message.subscribe") }}</span>
                 </a>
                         {% endif %}
                     {% else %}
-                <a href="/post?body=D+%23{{ msg.mid }}">
-                    <i data-icon="ei-close" data-size="s"></i>&nbsp;{{ i18n("messages","message.delete") }}
+                <a href="/post?body=D+%23{{ msg.mid }}" class="msg-button">
+                    <i data-icon="ei-close" data-size="s"></i>
+                    <span>&nbsp;{{ i18n("messages","message.delete") }}</span>
                 </a>
                     {% endif %}
                 {% endif %}