From 38d366f9aaee189b6ad48edea189e1d8b7f66ed6 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 8 Apr 2018 04:23:43 +0300 Subject: [PATCH] some more improvements. changed the way user-card is layout, but should look the same, except that longer user names should be properly ellipsis-ed. --- .../notifications/notifications.scss | 4 ++ src/components/user_card/user_card.vue | 3 +- .../user_card_content/user_card_content.vue | 38 ++++++++++--------- 3 files changed, 25 insertions(+), 20 deletions(-) diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index e9a60a93..3b7403e4 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -64,6 +64,10 @@ background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%) } + time { + white-space: nowrap; + } + .text { min-width: 0px; word-wrap: break-word; diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 7381ef8f..51d6965f 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -7,7 +7,7 @@
-
+
{{ user.name }} {{ $t('user_card.follows_you') }} @@ -26,7 +26,6 @@ .name-and-screen-name { margin-left: 0.7em; margin-top:0.0em; - margin-right: 2em; text-align: left; width: 100%; } diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 46d1c8b5..68e2583f 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -9,9 +9,8 @@ -
-
{{user.name}}
+
{{user.name}}
@{{user.screen_name}}
@@ -125,25 +124,21 @@ .container { padding: 16px 10px 4px 10px; display: flex; - flex-wrap: wrap; - flex-direction: column; - align-content: flex-start; - justify-content: center; max-height: 56px; overflow: hidden; - } - .avatar { - border-radius: $fallback--avatarRadius; - border-radius: var(--avatarRadius, $fallback--avatarRadius); - flex: 1 0 100%; - width: 56px; - height: 56px; - box-shadow: 0px 1px 8px rgba(0,0,0,0.75); - object-fit: cover; + .avatar { + border-radius: $fallback--avatarRadius; + border-radius: var(--avatarRadius, $fallback--avatarRadius); + flex: 1 0 100%; + width: 56px; + height: 56px; + box-shadow: 0px 1px 8px rgba(0,0,0,0.75); + object-fit: cover; - &.animated::before { - display: none; + &.animated::before { + display: none; + } } } @@ -158,16 +153,24 @@ text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0); + .usersettings { + color: #fff; + opacity: .8; + } + .name-and-screen-name { display: block; margin-left: 0.6em; text-align: left; text-overflow: ellipsis; white-space: nowrap; + flex: 1 1 0; } .user-name{ color: white; + text-overflow: ellipsis; + overflow: hidden; } .user-screen-name { @@ -175,7 +178,6 @@ font-weight: lighter; font-size: 15px; padding-right: 0.1em; - flex: 0 0 auto; } .user-interactions {