diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/basic_user_card/basic_user_card.vue | 58 | ||||
| -rw-r--r-- | src/components/block_card/block_card.vue | 16 | ||||
| -rw-r--r-- | src/components/follow_card/follow_card.vue | 25 | ||||
| -rw-r--r-- | src/components/follow_request_card/follow_request_card.vue | 12 |
4 files changed, 46 insertions, 65 deletions
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue index 0563360a..ff3d0d09 100644 --- a/src/components/basic_user_card/basic_user_card.vue +++ b/src/components/basic_user_card/basic_user_card.vue @@ -7,26 +7,16 @@ <user-card-content :user="user" :switcher="false"></user-card-content> </div> <div class="user-card-collapsed-content" v-else> - <div class="user-card-primary-secondary-wrapper"> - <div class="user-card-primary-area"> - <div :title="user.name" class="user-card-user-name"> - <span v-if="user.name_html" v-html="user.name_html"></span> - <span v-else>{{ user.name }}</span> - </div> - <div> - <router-link :to="userProfileLink(user)"> - @{{user.screen_name}} - </router-link> - </div> - <slot name="primary-area"></slot> - </div> - <div class="user-card-secondary-area"> - <slot name="secondary-area"></slot> - </div> + <div :title="user.name" class="user-card-user-name"> + <span v-if="user.name_html" v-html="user.name_html"></span> + <span v-else>{{ user.name }}</span> </div> - <div class="user-card-tertiary-area"> - <slot name="tertiary-area"></slot> + <div> + <router-link :to="userProfileLink(user)"> + @{{user.screen_name}} + </router-link> </div> + <slot></slot> </div> </div> </template> @@ -52,19 +42,6 @@ margin-left: 0.7em; text-align: left; flex: 1; - min-width: 0; - } - - &-primary-secondary-wrapper { - display: flex; - align-items: flex-start; - justify-content: space-between; - } - - &-primary-area { - flex: 1; - margin-right: 1em; - min-width: 0; } &-user-name { @@ -76,15 +53,6 @@ } } - &-secondary-area { - flex: none; - - .btn { - margin-top: .5em; - width: 10em; - } - } - &-expanded-content { flex: 1; margin-left: 0.7em; @@ -106,15 +74,5 @@ margin-bottom: 0; } } - - @media (min-width: 320px) and (max-width: 480px) { - &-primary-secondary-wrapper { - flex-direction: column; - } - - &-primary-area { - margin-right: 0; - } - } } </style> diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue index ed7fe30b..8eb56e25 100644 --- a/src/components/block_card/block_card.vue +++ b/src/components/block_card/block_card.vue @@ -1,6 +1,6 @@ <template> <basic-user-card :user="user"> - <template slot="secondary-area"> + <div class="block-card-content-container"> <button class="btn btn-default" @click="unblockUser" :disabled="progress" v-if="blocked"> <template v-if="progress"> {{ $t('user_card.unblock_progress') }} @@ -17,8 +17,18 @@ {{ $t('user_card.block') }} </template> </button> - </template> + </div> </basic-user-card> </template> -<script src="./block_card.js"></script>
\ No newline at end of file +<script src="./block_card.js"></script> + +<style lang="scss"> +.block-card-content-container { + margin-top: 0.5em; + text-align: right; + button { + width: 10em; + } +} +</style> diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue index 8e6dd2fb..1ae728a6 100644 --- a/src/components/follow_card/follow_card.vue +++ b/src/components/follow_card/follow_card.vue @@ -1,11 +1,9 @@ <template> <basic-user-card :user="user"> - <template slot="primary-area"> - <span class="faint" v-if="!noFollowsYou && user.follows_you"> + <div class="follow-card-content-container"> + <span class="faint"> {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }} </span> - </template> - <template slot="secondary-area"> <button v-if="showFollow" class="btn btn-default" @@ -31,8 +29,25 @@ {{ $t('user_card.follow_unfollow') }} </template> </button> - </template> + </div> </basic-user-card> </template> <script src="./follow_card.js"></script> + +<style lang="scss"> +.follow-card-content-container { + flex-shrink: 0; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + line-height: 1.5em; + + .btn { + margin-top: 0.5em; + margin-left: auto; + width: 10em; + } +} +</style> diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue index 45d02b89..4a3bbba4 100644 --- a/src/components/follow_request_card/follow_request_card.vue +++ b/src/components/follow_request_card/follow_request_card.vue @@ -1,18 +1,16 @@ <template> <basic-user-card :user="user"> - <template slot="tertiary-area"> - <div class="follow-request-card-btns-container"> - <button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button> - <button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button> - </div> - </template> + <div class="follow-request-card-content-container"> + <button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button> + <button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button> + </div> </basic-user-card> </template> <script src="./follow_request_card.js"></script> <style lang="scss"> -.follow-request-card-btns-container { +.follow-request-card-content-container { display: flex; flex-direction: row; flex-wrap: wrap; |