From ea8a700796ced7fd4be3d1c65abf34e7c65413b0 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 1 Jun 2017 01:02:04 +0300 Subject: [PATCH] Move a bunch of status-related styles from App to status component, alter status header layout for better user experience hopefully, make status actions placing more consistent, adjust margins. --- src/App.scss | 59 ------------ src/components/status/status.vue | 149 ++++++++++++++++++++++++------- 2 files changed, 115 insertions(+), 93 deletions(-) diff --git a/src/App.scss b/src/App.scss index 0a7e1ce5..3db81537 100644 --- a/src/App.scss +++ b/src/App.scss @@ -134,11 +134,6 @@ main-router { background-color: rgba(0,0,0,0.1); } -.media-body { - flex: 1; - padding-left: 0.5em; -} - .container > * { min-width: 0px; } @@ -147,60 +142,6 @@ main-router { color: grey; } -.status-actions { - width: 50%; - display: flex; - - div, favorite-button { - flex: 1; - } -} - -status-text-container { - display: block; -} - -.status-el { - line-height: 18px; - - .notify { - .avatar { - border-width: 3px; - border-style: solid; - } - } - - .media-left { - img { - margin-top: 0.2em; - float: right; - margin-right: 0.3em; - border-radius: 5px; - } - } - - .retweet-info { - padding: 0.7em 0 0 0.6em; - - .media-left { - display: flex; - - i { - align-self: center; - text-align: right; - flex: 1; - padding-right: 0.3em; - } - } - } - - .media-heading { - small { - font-weight: lighter; - } - margin-bottom: 0.3em; - } -} nav { z-index: 1000; } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 6fd53420..8d776307 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -43,38 +43,41 @@
-

- {{status.user.name}} - {{status.user.screen_name}} - > - - {{status.in_reply_to_screen_name}} - - - - - - - - - - - - - - - - - -

+ + +
+
@@ -110,20 +113,66 @@