clean up + add btn-group css class
This commit is contained in:
parent
e1d6e56e1b
commit
2ab00387fe
25
src/App.scss
25
src/App.scss
|
@ -283,6 +283,31 @@ i[class*=icon-] {
|
||||||
color: var(--icon, $fallback--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 {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</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') }}
|
{{ $t('user_card.admin_menu.moderation') }}
|
||||||
</button>
|
</button>
|
||||||
</Popper>
|
</Popper>
|
||||||
|
@ -107,11 +107,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.moderation-toggle-btn {
|
|
||||||
&#{&} {
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="loggedIn && isOtherUser" class="user-interactions">
|
<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">
|
<button @click="unfollowUser" class="btn btn-default pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')" v-if="user.following">
|
||||||
<template v-if="followRequestInProgress">
|
<template v-if="followRequestInProgress">
|
||||||
{{ $t('user_card.follow_progress') }}
|
{{ $t('user_card.follow_progress') }}
|
||||||
|
@ -66,9 +66,6 @@
|
||||||
{{ $t('user_card.follow') }}
|
{{ $t('user_card.follow') }}
|
||||||
</template>
|
</template>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<ProgressButton class="btn btn-default" :click="subscribeUser" v-if="!user.subscribed">
|
<ProgressButton class="btn btn-default" :click="subscribeUser" v-if="!user.subscribed">
|
||||||
{{ $t('user_card.subscribe') }}
|
{{ $t('user_card.subscribe') }}
|
||||||
</ProgressButton>
|
</ProgressButton>
|
||||||
|
@ -78,19 +75,19 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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') }}
|
{{ $t('user_card.muted') }}
|
||||||
</button>
|
</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') }}
|
{{ $t('user_card.mute') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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') }}
|
{{ $t('user_card.blocked') }}
|
||||||
</button>
|
</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') }}
|
{{ $t('user_card.block') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -365,24 +362,18 @@
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
margin: 0 .75em .6em 0;
|
margin: 0 .75em .6em 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
> button {
|
button {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.remote-button {
|
&.pressed {
|
||||||
height: 28px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.pressed {
|
|
||||||
border-bottom-color: rgba(255, 255, 255, 0.2);
|
border-bottom-color: rgba(255, 255, 255, 0.2);
|
||||||
border-top-color: rgba(0, 0, 0, 0.2);
|
border-top-color: rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.user-counts {
|
.user-counts {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
Loading…
Reference in New Issue