mirror of https://github.com/Kylart/KawAnime.git
354 lines
9.4 KiB
Vue
354 lines
9.4 KiB
Vue
<template xmlns:v-tooltip="http://www.w3.org/1999/xhtml">
|
|
<v-container fluid>
|
|
<loader v-if="!season[1].items"></loader>
|
|
|
|
<v-container fluid v-else>
|
|
<v-row class="form-container">
|
|
<v-col md1 xs0></v-col>
|
|
<v-col md3 xs12 class="season-container">
|
|
<v-select
|
|
v-bind:items="seasonChoices"
|
|
v-model="$store.state.season"
|
|
label="Season"
|
|
dark
|
|
item-text="name"
|
|
item-value="value"/>
|
|
</v-col>
|
|
<v-col md3 xs12 class="year-container">
|
|
<v-text-field name="input-year"
|
|
type="number" min="2010"
|
|
label="Year"
|
|
v-model="$store.state.year"
|
|
dark>
|
|
</v-text-field>
|
|
</v-col>
|
|
<v-col md4 xs12 class="refresh-button">
|
|
<v-btn secondary block dark @click.native="refreshSeason()">Refresh</v-btn>
|
|
</v-col>
|
|
<v-col md1 xs0></v-col>
|
|
</v-row>
|
|
|
|
<v-tabs id="tabs" grow>
|
|
<v-tab-item v-for="i in 3"
|
|
:href="'#' + i"
|
|
:key="i"
|
|
slot="activators">
|
|
{{ season[i].name }}
|
|
</v-tab-item>
|
|
<v-tab-content v-for="i in 3"
|
|
v-bind:id="`${i}`"
|
|
:key="i"
|
|
slot="content">
|
|
<v-card>
|
|
<v-row class="elems">
|
|
<v-col md6 xs12 v-for="item in season[i].items" :key="item.title">
|
|
<v-row class="elem elevation-3" v-ripple="true">
|
|
<!-- Header of elem -->
|
|
<v-col xs12 v-tooltip:bottom="{ html: item.title }">
|
|
<h6 class="title ellipsis">
|
|
{{ item.title }}
|
|
</h6>
|
|
</v-col>
|
|
<v-col xs9 v-tooltip:bottom="{ html: item.genres.join(' ') }">
|
|
<p class="genres ellipsis">{{ item.genres.join(' ') }}</p>
|
|
</v-col>
|
|
<v-col xs3 v-tooltip:bottom="{ html: item.fromType }">
|
|
<p class="from-type ellipsis">
|
|
{{ item.fromType }}
|
|
</p>
|
|
</v-col>
|
|
<!-- Picture of elem -->
|
|
<v-col xs4 class="image-container">
|
|
<div class="image">
|
|
<img :src="item.picture" height="220" max-width="170"/>
|
|
</div>
|
|
</v-col>
|
|
<v-col xs8 class="bottom-right">
|
|
<v-row>
|
|
<v-col xs12 class="synopsis">
|
|
{{ reduced(item.synopsis) }}
|
|
</v-col>
|
|
<v-col xs7 class="date">{{ getDate(item.releaseDate) }}</v-col>
|
|
<v-col xs5 class="nb-ep">{{ item.nbEp }} {{ episode(item.npEp) }}</v-col>
|
|
<v-col xs8 class="producers"><strong>{{ item.producers.join(' ') }}</strong></v-col>
|
|
<v-col xs4 class="dropdown-container">
|
|
<v-menu transition="v-slide-x-transition">
|
|
<v-btn flat dark slot="activator">
|
|
More
|
|
</v-btn>
|
|
<v-list>
|
|
<v-list-item>
|
|
<v-list-tile v-on:click.native="openModal(item.title, item.synopsis)">
|
|
<v-list-tile-action>
|
|
<v-icon>more</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-title>
|
|
Check synopsis
|
|
</v-list-tile-title>
|
|
</v-list-tile>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-tile>
|
|
<v-list-tile-action>
|
|
<v-icon>info_outline</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-title>Information</v-list-tile-title>
|
|
</v-list-tile>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-tile @click.native="showChoices(item.title)">
|
|
<v-list-tile-action>
|
|
<v-icon>add_box</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-title>
|
|
Add to
|
|
</v-list-tile-title>
|
|
</v-list-tile>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
</v-tab-content>
|
|
</v-tabs>
|
|
<div class="text-xs-center modal-container">
|
|
<v-dialog v-model="modal" width="70%">
|
|
<v-card class="secondary white--text">
|
|
<v-card-text class="white--text">
|
|
<h2 class="title">{{ modalTitle }}</h2>
|
|
</v-card-text>
|
|
<v-card-text class="subheading white--text">
|
|
{{ modalText }}
|
|
</v-card-text>
|
|
<v-card-row actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn primary dark
|
|
style="width: 100px"
|
|
v-on:click.native="modal = false">Thanks!
|
|
</v-btn>
|
|
</v-card-row>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
<choice-window :entry="choiceTitle"></choice-window>
|
|
</v-container>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import Loader from '~components/loader.vue'
|
|
import ChoiceWindow from '~components/choiceWindow.vue'
|
|
|
|
export default {
|
|
head () {
|
|
return {
|
|
title: 'Seasons',
|
|
meta: [
|
|
{ hid: 'description', name: 'description', content: 'Browse the anime seasons' }
|
|
]
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
choiceTitle: '',
|
|
choices: [],
|
|
modalTitle: '',
|
|
modalText: '',
|
|
modal: false,
|
|
seasonChoices: [
|
|
{name: 'Winter', value: 'winter'},
|
|
{name: 'Spring', value: 'spring'},
|
|
{name: 'Summer', value: 'summer'},
|
|
{name: 'Fall', value: 'fall'}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
seasons: function () {
|
|
return this.$store.state.seasons
|
|
},
|
|
stats: function () {
|
|
return this.$store.state.seasonsStats
|
|
},
|
|
TVs: function () {
|
|
return this.seasons.TV
|
|
},
|
|
OVAs: function () {
|
|
return this.seasons.OVAs
|
|
},
|
|
Movies: function () {
|
|
return this.seasons.Movies
|
|
},
|
|
season: function () {
|
|
return [
|
|
'',
|
|
{name: 'TV', items: this.TVs},
|
|
{name: 'OVA', items: this.OVAs},
|
|
{name: 'Movies', items: this.Movies}
|
|
]
|
|
}
|
|
},
|
|
components: {
|
|
Loader,
|
|
ChoiceWindow
|
|
},
|
|
methods: {
|
|
reduced (text) {
|
|
return text.length > 270
|
|
? text.slice(0, 300) + '...'
|
|
: text
|
|
},
|
|
getDate (string) {
|
|
return string.split(' ').slice(0, 3).join(' ')
|
|
},
|
|
episode (nbEp) {
|
|
return parseInt(nbEp) !== 1
|
|
? 'episodes'
|
|
: 'episode'
|
|
},
|
|
refreshSeason () {
|
|
this.$store.dispatch('refreshSeasons')
|
|
},
|
|
openModal (title, text) {
|
|
console.log(`[${(new Date()).toLocaleTimeString()}]Opening modal for ${title}`)
|
|
|
|
this.modalTitle = title
|
|
this.modalText = text
|
|
|
|
this.modal = true
|
|
},
|
|
showChoices (name) {
|
|
this.choiceTitle = name
|
|
this.$store.commit('setAddToChoice', true)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
h6
|
|
{
|
|
margin: 0;
|
|
}
|
|
|
|
/* ----------- FORM ---------- */
|
|
.form-container
|
|
{
|
|
padding-top: 1.5%;
|
|
padding-left: 50px;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.year-container
|
|
{
|
|
padding-left: 2.5%;
|
|
}
|
|
|
|
.season-container
|
|
{
|
|
padding-right: 1.5%;
|
|
}
|
|
|
|
.refresh-button
|
|
{
|
|
padding-top: 1%;
|
|
padding-left: 6%;
|
|
padding-right: 3%;
|
|
}
|
|
|
|
/* ----------- ELEM ---------- */
|
|
.ellipsis
|
|
{
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.elems
|
|
{
|
|
padding: 1% 1% 2% 1%;
|
|
}
|
|
|
|
.elem
|
|
{
|
|
position: relative;
|
|
margin: 5px 0 10px 0;
|
|
background-color: rgb(60, 60, 60);
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.elem:hover
|
|
{
|
|
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
|
|
}
|
|
|
|
.title
|
|
{
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
padding-left: 10px;
|
|
line-height: 26px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.from-type
|
|
{
|
|
margin-bottom: 5px;
|
|
text-align: right;
|
|
font-weight: 700;
|
|
font-size: 120%;
|
|
}
|
|
|
|
.genres
|
|
{
|
|
padding-left: 5px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.image-container
|
|
{
|
|
padding: 0;
|
|
}
|
|
|
|
.image
|
|
{
|
|
height: 220px;
|
|
max-width: 170px;
|
|
}
|
|
|
|
.bottom-right
|
|
{
|
|
position: relative;
|
|
}
|
|
|
|
.synopsis
|
|
{
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
text-align: justify;
|
|
min-height: 130px;
|
|
}
|
|
|
|
.date
|
|
{
|
|
margin-top: 5%;
|
|
}
|
|
|
|
.nb-ep
|
|
{
|
|
text-align: right;
|
|
margin-top: 5%;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.producers
|
|
{
|
|
margin-top: 4%;
|
|
}
|
|
</style>
|