78 lines
1.3 KiB
Vue
78 lines
1.3 KiB
Vue
<template>
|
|
<div id="content" class="flex-column">
|
|
<div class="flex-column ma-horizontal">
|
|
<h1>{{ box.title }}</h1>
|
|
</div>
|
|
<div id="videos" class="flex-row border-top">
|
|
<div class="flex-column">
|
|
<img id="cover" class="shadow ma24" :src="cover" />
|
|
<p class="center ma-off hideOnMobile">
|
|
<b>{{ box.videos.length }}</b> Videos
|
|
</p>
|
|
</div>
|
|
<ul id="videoList" class="videos">
|
|
<li v-for="video in box.videos" :key="video._id">
|
|
<VideoItem :video="video" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VideoItem from "../components/Video.vue";
|
|
export default {
|
|
data() {
|
|
return {
|
|
box: {
|
|
covers: {},
|
|
videos: [],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
show(box) {
|
|
this.box = box;
|
|
},
|
|
},
|
|
computed: {
|
|
cover() {
|
|
if (!this.box.covers) {
|
|
return "/static/icons/dummy/box.svg";
|
|
}
|
|
return this.box.covers.cover256;
|
|
},
|
|
},
|
|
components: {
|
|
VideoItem,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
#cover {
|
|
align-self: center;
|
|
width: 256px;
|
|
}
|
|
|
|
#content,
|
|
#videos {
|
|
overflow: auto;
|
|
}
|
|
|
|
.video {
|
|
max-width: 256px;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
#videos {
|
|
flex-direction: column;
|
|
}
|
|
#videoList {
|
|
border-top: 1px solid var(--light-border);
|
|
}
|
|
.video {
|
|
max-width: inherit;
|
|
}
|
|
}
|
|
</style> |