diff options
| -rw-r--r-- | src/App.scss | 25 | ||||
| -rw-r--r-- | src/components/moderation_tools/moderation_tools.vue | 9 | ||||
| -rw-r--r-- | src/components/user_card/user_card.vue | 29 |
3 files changed, 36 insertions, 27 deletions
diff --git a/src/App.scss b/src/App.scss index e4c764bf..1299e05d 100644 --- a/src/App.scss +++ b/src/App.scss @@ -283,6 +283,31 @@ i[class*=icon-] { color: var(--icon, $fallback--icon) } +.btn-block { + display: block; + width: 100%; +} + +.btn-group { + position: relative; + display: inline-flex; + vertical-align: middle; + + button { + position: relative; + flex: 1 1 auto; + + &:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } +} .container { display: flex; diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index 785fe7ba..80f6858e 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -61,7 +61,7 @@ </span> </div> </div> - <button slot="reference" class="btn btn-default moderation-toggle-btn" v-bind:class="{ pressed: showDropDown }" @click='toggleMenu'> + <button slot="reference" class="btn btn-default btn-block" v-bind:class="{ pressed: showDropDown }" @click='toggleMenu'> {{ $t('user_card.admin_menu.moderation') }} </button> </Popper> @@ -107,11 +107,4 @@ } } -.moderation-toggle-btn { - &#{&} { - margin: 0; - width: 100%; - } -} - </style> diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 2f2f9e5f..2d3cf28f 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -46,7 +46,7 @@ </div> </div> <div v-if="loggedIn && isOtherUser" class="user-interactions"> - <div> + <div class="btn-group"> <button @click="unfollowUser" class="btn btn-default pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')" v-if="user.following"> <template v-if="followRequestInProgress"> {{ $t('user_card.follow_progress') }} @@ -66,9 +66,6 @@ {{ $t('user_card.follow') }} </template> </button> - </div> - - <div> <ProgressButton class="btn btn-default" :click="subscribeUser" v-if="!user.subscribed"> {{ $t('user_card.subscribe') }} </ProgressButton> @@ -78,19 +75,19 @@ </div> <div> - <button @click="unmuteUser" class="btn btn-default pressed" v-if="user.muted"> + <button @click="unmuteUser" class="btn btn-default btn-block pressed" v-if="user.muted"> {{ $t('user_card.muted') }} </button> - <button @click="muteUser" class="btn btn-default" v-else> + <button @click="muteUser" class="btn btn-default btn-block" v-else> {{ $t('user_card.mute') }} </button> </div> <div> - <button @click="unblockUser" class="btn btn-default pressed" v-if="user.statusnet_blocking"> + <button @click="unblockUser" class="btn btn-default btn-block pressed" v-if="user.statusnet_blocking"> {{ $t('user_card.blocked') }} </button> - <button @click="blockUser" class="btn btn-default" v-else> + <button @click="blockUser" class="btn btn-default btn-block" v-else> {{ $t('user_card.block') }} </button> </div> @@ -365,21 +362,15 @@ flex: 1 0 0; margin: 0 .75em .6em 0; white-space: nowrap; - - > button { - margin: 0; - width: 100%; - } } - .remote-button { - height: 28px; + button { margin: 0; - } - button.pressed { - border-bottom-color: rgba(255, 255, 255, 0.2); - border-top-color: rgba(0, 0, 0, 0.2); + &.pressed { + border-bottom-color: rgba(255, 255, 255, 0.2); + border-top-color: rgba(0, 0, 0, 0.2); + } } } } |