a1batross/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

clean up + add btn-group css class

Browse source
This commit is contained in:
taehoon 2019-04-26 03:33:25 -04:00
parent e1d6e56e1b
commit 2ab00387fe
3 changed files with 36 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/App.scss
View file

@ -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;

9
src/components/moderation_tools/moderation_tools.vue
View file

@ -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>

29
src/components/user_card/user_card.vue
View file

@ -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,21 +362,15 @@
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 {
margin: 0;
width: 100%;
}
} }
.remote-button { button {
height: 28px;
margin: 0; margin: 0;
}
button.pressed { &.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);
}
} }
} }
} }