From 424e9166d9d74891c4c81e67365ec73bb4532bcd Mon Sep 17 00:00:00 2001 From: shpuld <shp@cock.li> Date: Sat, 14 Apr 2018 14:24:05 +0300 Subject: [PATCH] Fix alignment issues in status heading and repeat info --- src/components/status/status.vue | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 59dfc351..de1707de 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -33,7 +33,8 @@ <h4 class="user-name">{{status.user.name}}</h4> <span class="links"> <router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link> - <span v-if="status.in_reply_to_screen_name" class="faint"> > + <span v-if="status.in_reply_to_screen_name" class="faint reply-info"> + <i class="icon-right-open"></i> <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }"> {{status.in_reply_to_screen_name}} </router-link> @@ -212,9 +213,12 @@ flex: 1 0; display: flex; flex-wrap: wrap; + align-content: center; } .links { + display: flex; padding-top: 1px; + margin-left: 0.2em; font-size: 12px; color: $fallback--link; color: var(--link, $fallback--link); @@ -226,6 +230,9 @@ white-space: nowrap; } } + .reply-info { + display: flex; + } .replies { line-height: 16px; } @@ -317,6 +324,13 @@ .media-body { font-size: 1em; line-height: 22px; + + display: flex; + align-content: center; + flex-wrap: wrap; + i { + padding: 0 0.2em; + } a { max-width: 100%; overflow: hidden;