diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue index 1e72660f33..d6ac42994f 100644 --- a/src/client/components/ui/button.vue +++ b/src/client/components/ui/button.vue @@ -177,17 +177,8 @@ export default defineComponent({ } &:focus { - &:after { - content: ""; - pointer-events: none; - position: absolute; - top: -5px; - right: -5px; - bottom: -5px; - left: -5px; - border: 2px solid var(--accentAlpha03); - border-radius: 10px; - } + outline: solid 2px var(--focus); + outline-offset: 2px; } &.inline + .bghgjjyj { diff --git a/src/client/pages/my-lists/index.vue b/src/client/pages/my-lists/index.vue index e92f11c7d0..7de31bb308 100644 --- a/src/client/pages/my-lists/index.vue +++ b/src/client/pages/my-lists/index.vue @@ -3,7 +3,10 @@ <MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton> <MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list"> - <MkA v-for="(list, i) in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">{{ list.name }}</MkA> + <MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`"> + <div class="name">{{ list.name }}</div> + <MkAvatars :user-ids="list.userIds"/> + </MkA> </MkPagination> </div> </template> @@ -12,6 +15,7 @@ import { defineComponent } from 'vue'; import MkPagination from '@client/components/ui/pagination.vue'; import MkButton from '@client/components/ui/button.vue'; +import MkAvatars from '@client/components/avatars.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; @@ -19,6 +23,7 @@ export default defineComponent({ components: { MkPagination, MkButton, + MkAvatars, }, data() { @@ -63,7 +68,7 @@ export default defineComponent({ > .lists { > .list { - display: flex; + display: block; padding: 16px; border: solid 1px var(--divider); border-radius: 6px; @@ -72,6 +77,10 @@ export default defineComponent({ border: solid 1px var(--accent); text-decoration: none; } + + > .name { + margin-bottom: 4px; + } } } }