This commit is contained in:
syuilo 2019-05-18 22:50:57 +09:00
parent 5a653531e2
commit 318d7f2652
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
2 changed files with 10 additions and 13 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<router-link :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }"> <router-link :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1">
<div class="thumbnail" v-if="page.eyeCatchingImage" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div> <div class="thumbnail" v-if="page.eyeCatchingImage" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
<article> <article>
<header> <header>
@ -32,16 +32,13 @@ export default Vue.extend({
display block display block
overflow hidden overflow hidden
width 100% width 100%
background var(--face) border solid var(--lineWidth) var(--urlPreviewBorder)
border-radius 4px
overflow hidden
&.round &:hover
border-radius 8px text-decoration none
border-color var(--urlPreviewBorderHover)
&.shadow
box-shadow 0 4px 16px rgba(#000, 0.1)
@media (min-width 500px)
box-shadow 0 8px 32px rgba(#000, 0.1)
> .thumbnail > .thumbnail
position absolute position absolute

View File

@ -7,7 +7,7 @@
<sequential-entrance animation="entranceFromTop" delay="25" tag="div" class="pages"> <sequential-entrance animation="entranceFromTop" delay="25" tag="div" class="pages">
<x-page-preview v-for="page in pages" class="page" :page="page" :key="page.id"/> <x-page-preview v-for="page in pages" class="page" :page="page" :key="page.id"/>
</sequential-entrance> </sequential-entrance>
<ui-button v-if="existMore" @click="fetchMore()">{{ $t('@.load-more') }}</ui-button> <ui-button v-if="existMore" @click="fetchMore()" style="margin-top:16px;">{{ $t('@.load-more') }}</ui-button>
</div> </div>
</ui-container> </ui-container>
@ -133,11 +133,11 @@ export default Vue.extend({
> .new > .new
margin-bottom 16px margin-bottom 16px
> * > .page > * > .page:not(:last-child)
margin-bottom 8px margin-bottom 8px
@media (min-width 500px) @media (min-width 500px)
> * > .page > * > .page:not(:last-child)
margin-bottom 16px margin-bottom 16px
</style> </style>