🎨
This commit is contained in:
		
							parent
							
								
									23753ec75a
								
							
						
					
					
						commit
						4ba4062519
					
				
					 3 changed files with 37 additions and 28 deletions
				
			
		|  | @ -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; | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|  |  | |||
|  | @ -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> | ||||
| 
 | ||||
|  |  | |||
|  | @ -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); | ||||
| 	} | ||||
| } | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue