mirror/MisskeyIO
1
0
Fork 0
mirror of https://github.com/MisskeyIO/misskey synced 2024-11-27 22:38:30 +09:00
Code

🎨

Browse Source
This commit is contained in:
syuilo 2021-10-16 18:18:41 +09:00
parent 23753ec75a
commit 4ba4062519
3 changed files with 37 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/client/components/tab.vue
View File

@ -35,8 +35,8 @@ export default defineComponent({
> button { > button {
flex: 1; flex: 1;
padding: 15px 12px 12px 12px; padding: 10px 8px;
border-bottom: solid 3px transparent; border-radius: 6px;
&:disabled { &:disabled {
opacity: 1 !important; opacity: 1 !important;
@ -45,11 +45,16 @@ export default defineComponent({
&.active { &.active {
color: var(--accent); color: var(--accent);
border-bottom-color: var(--accent); background: var(--accentedBg);
} }
&:not(.active):hover { &:not(.active):hover {
color: var(--fgHighlighted); color: var(--fgHighlighted);
background: var(--panelHighlight);
}
&:not(:first-child) {
margin-left: 8px;
} }
> .icon { > .icon {
@ -61,7 +66,7 @@ export default defineComponent({
font-size: 80%; font-size: 80%;
> button { > button {
padding: 11px 8px 8px 8px; padding: 11px 8px;
} }
} }
} }

48
src/client/pages/pages.vue
View File

@ -2,33 +2,35 @@
<div> <div>
<MkHeader :info="header"/> <MkHeader :info="header"/>
<!-- TODO: MkHeaderに統合 --> <MkSpacer>
<MkTab v-model="tab" v-if="$i"> <!-- TODO: MkHeaderに統合 -->
<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option> <MkTab v-model="tab" v-if="$i">
<option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option> <option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option>
<option value="liked"><i class="fas fa-heart"></i> {{ $ts._pages.liked }}</option> <option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option>
</MkTab> <option value="liked"><i class="fas fa-heart"></i> {{ $ts._pages.liked }}</option>
</MkTab>
<div class="_section"> <div class="_section">
<div class="rknalgpo _content" v-if="tab === 'featured'"> <div class="rknalgpo _content" v-if="tab === 'featured'">
<MkPagination :pagination="featuredPagesPagination" #default="{items}"> <MkPagination :pagination="featuredPagesPagination" #default="{items}">
<MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/> <MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/>
</MkPagination> </MkPagination>
</div> </div>
<div class="rknalgpo _content my" v-if="tab === 'my'"> <div class="rknalgpo _content my" v-if="tab === 'my'">
<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton> <MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
<MkPagination :pagination="myPagesPagination" #default="{items}"> <MkPagination :pagination="myPagesPagination" #default="{items}">
<MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/> <MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/>
</MkPagination> </MkPagination>
</div> </div>
<div class="rknalgpo _content" v-if="tab === 'liked'"> <div class="rknalgpo _content" v-if="tab === 'liked'">
<MkPagination :pagination="likedPagesPagination" #default="{items}"> <MkPagination :pagination="likedPagesPagination" #default="{items}">
<MkPagePreview v-for="like in items" class="ckltabjg" :page="like.page" :key="like.page.id"/> <MkPagePreview v-for="like in items" class="ckltabjg" :page="like.page" :key="like.page.id"/>
</MkPagination> </MkPagination>
</div>
</div> </div>
</div> </MkSpacer>
</div> </div>
</template> </template>

4
src/client/pages/user/index.timeline.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="yrzkoczt" v-sticky-container> <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="null">{{ $ts.notes }}</option>
<option value="replies">{{ $ts.notesAndReplies }}</option> <option value="replies">{{ $ts.notesAndReplies }}</option>
<option value="files">{{ $ts.withFiles }}</option> <option value="files">{{ $ts.withFiles }}</option>
@ -60,6 +60,8 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.yrzkoczt { .yrzkoczt {
> .tab { > .tab {
margin: calc(var(--margin) / 2) 0;
padding: calc(var(--margin) / 2) 0;
background: var(--bg); background: var(--bg);
} }
} }