diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.scss | 14 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 1 | ||||
| -rw-r--r-- | src/components/scope_selector/scope_selector.vue | 18 | ||||
| -rw-r--r-- | src/components/user_card/user_card.vue | 41 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 4 |
5 files changed, 42 insertions, 36 deletions
diff --git a/src/App.scss b/src/App.scss index 7f895065..4a3ce144 100644 --- a/src/App.scss +++ b/src/App.scss @@ -625,20 +625,6 @@ nav { text-align: right; } -.visibility-tray { - font-size: 1.2em; - cursor: pointer; - - .selected { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - } - - div { - padding-top: 5px; - } -} - .visibility-notice { padding: .5em; border: 1px solid $fallback--faint; diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index cb70d199..a841a17c 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -152,6 +152,7 @@ display: flex; justify-content: space-between; flex-direction: row-reverse; + padding-top: 5px; } } diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue index 33ea488f..5ebb5d56 100644 --- a/src/components/scope_selector/scope_selector.vue +++ b/src/components/scope_selector/scope_selector.vue @@ -1,5 +1,5 @@ <template> -<div v-if="!showNothing"> +<div v-if="!showNothing" class="scope-selector"> <i class="icon-mail-alt" :class="css.direct" :title="$t('post_status.scope.direct')" @@ -28,3 +28,19 @@ </template> <script src="./scope_selector.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.scope-selector { + i { + font-size: 1.2em; + cursor: pointer; + + &.selected { + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } + } +} +</style> diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 2d02ca03..b4495673 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -6,7 +6,7 @@ <router-link :to="userProfileLink(user)"> <UserAvatar :betterShadow="betterShadow" :user="user"/> </router-link> - <div class="name-and-screen-name"> + <div class="user-summary"> <div class="top-line"> <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div> <div :title="user.name" class='user-name' v-else>{{user.name}}</div> @@ -18,12 +18,12 @@ </a> </div> - <router-link class='user-screen-name' :to="userProfileLink(user)"> - <span class="handle">@{{user.screen_name}} - <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span> - </span><span v-if="user.locked"><i class="icon icon-lock"></i></span> + <div class="bottom-line"> + <router-link class="user-screen-name" :to="userProfileLink(user)">@{{user.screen_name}}</router-link> + <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span> + <span v-if="user.locked"><i class="icon icon-lock"></i></span> <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span> - </router-link> + </div> </div> </div> <div class="user-meta"> @@ -232,7 +232,7 @@ opacity: .8; } - .name-and-screen-name { + .user-summary { display: block; margin-left: 0.6em; text-align: left; @@ -249,6 +249,7 @@ vertical-align: middle; object-fit: contain } + .top-line { display: flex; } @@ -269,15 +270,19 @@ } } - .user-screen-name { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - display: inline-block; + .bottom-line { + display: flex; font-weight: light; font-size: 15px; - padding-right: 0.1em; - width: 100%; - display: flex; + + .user-screen-name { + min-width: 1px; + flex: 0 1 auto; + text-overflow: ellipsis; + overflow: hidden; + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } .dailyAvg { min-width: 1px; @@ -288,15 +293,9 @@ color: var(--text, $fallback--text); } - .handle { - min-width: 1px; - flex: 0 1 auto; - text-overflow: ellipsis; - overflow: hidden; - } - // TODO use proper colors .staff { + flex: none; text-transform: capitalize; color: $fallback--text; color: var(--btnText, $fallback--text); diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 8a94f0b8..2cb8b37a 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -251,6 +251,10 @@ margin: 0; } + .visibility-tray { + padding-top: 5px; + } + input[type=file] { padding: 5px; height: auto; |