yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

バグ修正やデザイン調整など

Browse source
This commit is contained in:
syuilo 2018-09-16 04:21:48 +09:00
parent 952a49f749
commit 2a96429be8
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
2 changed files with 27 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/client/app/common/views/components/media-banner.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div class="mk-media-banner"> <div class="mk-media-banner">
<div class="mk-media-banner-sensitive" v-if="media.isSensitive && hide" @click="hide = false"> <div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
<span class="mk-media-banner-icon">%fa:exclamation-triangle%</span> <span class="icon">%fa:exclamation-triangle%</span>
<b>%i18n:@sensitive%</b> <b>%i18n:@sensitive%</b>
<span>%i18n:@click-to-show%</span> <span>%i18n:@click-to-show%</span>
</div> </div>
<div class="mk-media-banner-audio" v-else-if="media.type.startsWith('audio')"> <div class="audio" v-else-if="media.type.startsWith('audio')">
<audio class="audio" <audio class="audio"
:src="media.url" :src="media.url"
:title="media.name" :title="media.name"
@ -13,12 +13,12 @@
ref="audio" ref="audio"
preload="metadata" /> preload="metadata" />
</div> </div>
<a class="mk-media-banner-download" v-else <a class="download" v-else
:href="media.url" :href="media.url"
:title="media.name" :title="media.name"
:download="media.name" :download="media.name"
> >
<span class="mk-media-banner-icon">%fa:download%</span> <span class="icon">%fa:download%</span>
<b>{{ media.name }}</b> <b>{{ media.name }}</b>
</a> </a>
</div> </div>
@ -48,40 +48,38 @@ root(isDark)
margin-top 4px margin-top 4px
overflow hidden overflow hidden
.mk-media-banner-download, > .download,
.mk-media-banner-sensitive > .sensitive
display flex display flex
align-items center align-items center
font-size 12px font-size 12px
padding .2em .6em padding 8px 12px
white-space nowrap white-space nowrap
> * > *
display block display block
> b > b
flex-shrink 2147483647
overflow hidden overflow hidden
text-overflow ellipsis text-overflow ellipsis
> *:not(:last-child) > *:not(:last-child)
margin-right .2em margin-right .2em
> .mk-media-banner-icon > .icon
font-size 1.6em font-size 1.6em
.mk-media-banner-download > .download
background isDark ? #21242d : #f7f7f7 background isDark ? #21242d : #f7f7f7
.mk-media-banner-sensitive > .sensitive
background #111 background #111
color #fff color #fff
.mk-media-banner-audio > .audio
.audio .audio
display block display block
width 100% width 100%
height 100%
.mk-media-banner[data-darkmode] .mk-media-banner[data-darkmode]
root(true) root(true)

20
src/client/app/common/views/components/media-list.vue
View file

@ -1,10 +1,10 @@
<template> <template>
<div class="mk-media-list"> <div class="mk-media-list">
<template v-for="media in mediaList"> <template v-for="media in mediaList.filter(media => !previewable(media))">
<mk-media-banner :media="media" :key="media.id" v-if="!media.type.startsWith('image') && !media.type.startsWith('video')"/> <mk-media-banner :media="media" :key="media.id"/>
</template> </template>
<div class="mk-media-list-fixed" v-if="mediaList.filter(media => media.type.startsWith('image') || media.type.startsWith('video')).length > 0"> <div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
<div :data-count="mediaList.filter(media => media.type.startsWith('video') || media.type.startsWith('image')).length" ref="grid"> <div :data-count="mediaList.filter(media => previewable(media)).length" ref="grid">
<template v-for="media in mediaList"> <template v-for="media in mediaList">
<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/> <mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
<mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/> <mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
@ -27,15 +27,23 @@ export default Vue.extend({
} }
}, },
mounted() { mounted() {
// for Safari bug //#region for Safari bug
if (this.$refs.grid) {
this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` : '128px'; this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` : '128px';
} }
//#endregion
},
methods: {
previewable(file) {
return file.type.startsWith('video') || file.type.startsWith('image');
}
}
}); });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-media-list .mk-media-list
> .mk-media-list-fixed > .gird-container
width 100% width 100%
margin-top 4px margin-top 4px