From 4d112b70fd0cc360b97e3a7c53c94a4045cef635 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Aug 2018 14:46:28 +0300
Subject: fixed custom emoji in nickname. changed icons on right side to be
 more streamlined. adjusted CSS so that all text in header of post is on same
 baseline and all icons/images are middle-aligned.

---
 src/components/status/status.vue | 50 ++++++++++++++++++++++++++++++----------
 1 file changed, 38 insertions(+), 12 deletions(-)

(limited to 'src/components/status')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e2fb5d36..1e31aa2b 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -11,8 +11,8 @@
       <div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
         <StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
         <div class="media-body faint">
-          <a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
-          <a v-else :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
+          <a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
+          <a v-else :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
           <i class='fa icon-retweet retweeted'></i>
           {{$t('timeline.repeated')}}
         </div>
@@ -57,8 +57,10 @@
               <router-link class="timeago" :to="{ name: 'conversation', params: { id: status.id } }">
                 <timeago :since="status.created_at" :auto-update="60"></timeago>
               </router-link>
-              <span v-if="status.visibility"><i :class="visibilityIcon(status.visibility)"></i> </span>
-              <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="icon-link-ext"></i></a>
+              <div class="visibility-icon" v-if="status.visibility">
+                <i :class="visibilityIcon(status.visibility)"></i>
+              </div>
+              <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="icon-link-ext-alt"></i></a>
               <template v-if="expandable">
                 <a href="#" @click.prevent="toggleExpanded"><i class="icon-plus-squared"></i></a>
               </template>
@@ -141,6 +143,7 @@
   margin-top: 0.25em;
   margin-left: 0.5em;
   z-index: 50;
+
   .status {
     flex: 1;
     border: 0;
@@ -155,6 +158,7 @@
   text-align: center;
   border-width: 1px;
   border-style: solid;
+
   i {
     font-size: 2em;
   }
@@ -196,6 +200,7 @@
 
   .media-heading {
     flex-wrap: nowrap;
+    line-height: 16px;
   }
 
   .media-heading-left {
@@ -218,12 +223,20 @@
       flex: 1 0;
       display: flex;
       flex-wrap: wrap;
-      align-content: center;
+      align-items: baseline;
+
+      .user-name {
+        margin-right: 0.2em;
+        img {
+          width: 14px;
+          height: 14px;
+          vertical-align: middle
+        }
+      }
     }
+
     .links {
       display: flex;
-      padding-top: 1px;
-      margin-left: 0.2em;
       font-size: 12px;
       color: $fallback--link;
       color: var(--link, $fallback--link);
@@ -247,17 +260,18 @@
   }
 
   .media-heading-right {
+    display: inline-flex;
     flex-shrink: 0;
-    display: flex;
     flex-wrap: nowrap;
-    max-height: 1.5em;
-    margin-left: 0.25em;
+    margin-left: .25em;
+
     .timeago {
       margin-right: 0.2em;
       font-size: 12px;
-      padding-top: 1px;
+      align-self: last baseline;
     }
-    i {
+
+    > * {
       margin-left: 0.2em;
     }
   }
@@ -318,6 +332,7 @@
   .retweet-info {
     padding: 0.4em 0.6em 0 0.6em;
     margin: 0;
+
     .avatar {
       border-radius: $fallback--avatarAltRadius;
       border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
@@ -333,9 +348,20 @@
       display: flex;
       align-content: center;
       flex-wrap: wrap;
+
+      .user-name {
+        font-weight: bold;
+        img {
+          width: 14px;
+          height: 14px;
+          vertical-align: middle;
+        }
+      }
+
       i {
         padding: 0 0.2em;
       }
+
       a {
         max-width: 100%;
         overflow: hidden;
-- 
cgit v1.2.3-70-g09d2


From d417cb35bbd2a7603c5c655aa76d3df13a6f92ae Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Aug 2018 15:36:10 +0300
Subject: fix potential stretched spurdo

---
 src/components/status/status.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'src/components/status')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 1e31aa2b..4b168db0 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -227,10 +227,12 @@
 
       .user-name {
         margin-right: 0.2em;
+
         img {
           width: 14px;
           height: 14px;
-          vertical-align: middle
+          vertical-align: middle;
+          object-fit: contain
         }
       }
     }
@@ -351,10 +353,12 @@
 
       .user-name {
         font-weight: bold;
+
         img {
           width: 14px;
           height: 14px;
           vertical-align: middle;
+          object-fit: contain
         }
       }
 
-- 
cgit v1.2.3-70-g09d2


From d94b77b8636aa04d76b6075f63282fa670a72b60 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 15 Aug 2018 13:02:39 +0300
Subject: fix for timeago being ass when post has replies. added hover colors
 for clickable icons on the right side. Reverted line-height to its original
 value

---
 src/components/status/status.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'src/components/status')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 4b168db0..b8993b0d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -200,7 +200,7 @@
 
   .media-heading {
     flex-wrap: nowrap;
-    line-height: 16px;
+    line-height: 18px;
   }
 
   .media-heading-left {
@@ -226,7 +226,7 @@
       align-items: baseline;
 
       .user-name {
-        margin-right: 0.2em;
+        margin-right: .45em;
 
         img {
           width: 14px;
@@ -266,6 +266,7 @@
     flex-shrink: 0;
     flex-wrap: nowrap;
     margin-left: .25em;
+    align-self: baseline;
 
     .timeago {
       margin-right: 0.2em;
@@ -276,6 +277,10 @@
     > * {
       margin-left: 0.2em;
     }
+    a:hover i {
+      color: $fallback--fg;
+      color: var(--fg, $fallback--fg);
+    }
   }
 
   a {
-- 
cgit v1.2.3-70-g09d2