diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2021-10-16 18:18:41 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2021-10-16 18:18:41 +0900 |
| commit | 4ba4062519df5121fee8cdb3ddb262d2c99b0dce (patch) | |
| tree | cad56de334f461df3455cc332ca91131e4113b04 | |
| parent | Merge branch 'develop' of https://github.com/misskey-dev/misskey into develop (diff) | |
| download | sharkey-4ba4062519df5121fee8cdb3ddb262d2c99b0dce.tar.gz sharkey-4ba4062519df5121fee8cdb3ddb262d2c99b0dce.tar.bz2 sharkey-4ba4062519df5121fee8cdb3ddb262d2c99b0dce.zip | |
:art:
| -rw-r--r-- | src/client/components/tab.vue | 13 | ||||
| -rw-r--r-- | src/client/pages/pages.vue | 48 | ||||
| -rw-r--r-- | src/client/pages/user/index.timeline.vue | 4 |
3 files changed, 37 insertions, 28 deletions
diff --git a/src/client/components/tab.vue b/src/client/components/tab.vue index 58538c2ca1..ce86af8f95 100644 --- a/src/client/components/tab.vue +++ b/src/client/components/tab.vue @@ -35,8 +35,8 @@ export default defineComponent({ > button { flex: 1; - padding: 15px 12px 12px 12px; - border-bottom: solid 3px transparent; + padding: 10px 8px; + border-radius: 6px; &:disabled { opacity: 1 !important; @@ -45,11 +45,16 @@ export default defineComponent({ &.active { color: var(--accent); - border-bottom-color: var(--accent); + background: var(--accentedBg); } &:not(.active):hover { color: var(--fgHighlighted); + background: var(--panelHighlight); + } + + &:not(:first-child) { + margin-left: 8px; } > .icon { @@ -61,7 +66,7 @@ export default defineComponent({ font-size: 80%; > button { - padding: 11px 8px 8px 8px; + padding: 11px 8px; } } } diff --git a/src/client/pages/pages.vue b/src/client/pages/pages.vue index 988a759b91..8300e8a6e4 100644 --- a/src/client/pages/pages.vue +++ b/src/client/pages/pages.vue @@ -2,33 +2,35 @@ <div> <MkHeader :info="header"/> - <!-- TODO: MkHeaderに統合 --> - <MkTab v-model="tab" v-if="$i"> - <option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option> - <option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option> - <option value="liked"><i class="fas fa-heart"></i> {{ $ts._pages.liked }}</option> - </MkTab> + <MkSpacer> + <!-- TODO: MkHeaderに統合 --> + <MkTab v-model="tab" v-if="$i"> + <option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option> + <option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option> + <option value="liked"><i class="fas fa-heart"></i> {{ $ts._pages.liked }}</option> + </MkTab> - <div class="_section"> - <div class="rknalgpo _content" v-if="tab === 'featured'"> - <MkPagination :pagination="featuredPagesPagination" #default="{items}"> - <MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/> - </MkPagination> - </div> + <div class="_section"> + <div class="rknalgpo _content" v-if="tab === 'featured'"> + <MkPagination :pagination="featuredPagesPagination" #default="{items}"> + <MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/> + </MkPagination> + </div> - <div class="rknalgpo _content my" v-if="tab === 'my'"> - <MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton> - <MkPagination :pagination="myPagesPagination" #default="{items}"> - <MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/> - </MkPagination> - </div> + <div class="rknalgpo _content my" v-if="tab === 'my'"> + <MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton> + <MkPagination :pagination="myPagesPagination" #default="{items}"> + <MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/> + </MkPagination> + </div> - <div class="rknalgpo _content" v-if="tab === 'liked'"> - <MkPagination :pagination="likedPagesPagination" #default="{items}"> - <MkPagePreview v-for="like in items" class="ckltabjg" :page="like.page" :key="like.page.id"/> - </MkPagination> + <div class="rknalgpo _content" v-if="tab === 'liked'"> + <MkPagination :pagination="likedPagesPagination" #default="{items}"> + <MkPagePreview v-for="like in items" class="ckltabjg" :page="like.page" :key="like.page.id"/> + </MkPagination> + </div> </div> - </div> + </MkSpacer> </div> </template> diff --git a/src/client/pages/user/index.timeline.vue b/src/client/pages/user/index.timeline.vue index 8796ded469..c3444f26f6 100644 --- a/src/client/pages/user/index.timeline.vue +++ b/src/client/pages/user/index.timeline.vue @@ -1,6 +1,6 @@ <template> <div class="yrzkoczt" v-sticky-container> - <MkTab v-model="with_" class="_gap tab"> + <MkTab v-model="with_" class="tab"> <option :value="null">{{ $ts.notes }}</option> <option value="replies">{{ $ts.notesAndReplies }}</option> <option value="files">{{ $ts.withFiles }}</option> @@ -60,6 +60,8 @@ export default defineComponent({ <style lang="scss" scoped> .yrzkoczt { > .tab { + margin: calc(var(--margin) / 2) 0; + padding: calc(var(--margin) / 2) 0; background: var(--bg); } } |