mirror of https://github.com/Kylart/KawAnime.git
Seasons seem ok
This commit is contained in:
Kylart
parent
0f389b7529
commit
6fc288219d
|
|
@ -50,3 +50,8 @@ $inputColor := #7f90ab
|
|||
|
||||
#title a.list__tile
|
||||
height: 60px
|
||||
|
||||
|
||||
div.tabs__items
|
||||
border-width: 0
|
||||
border-style: none
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
<template xmlns:v-tooltip="http://www.w3.org/1999/xhtml">
|
||||
<v-container fluid>
|
||||
<div style="min-height: 95vh">
|
||||
<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-container fluid v-else style="padding: 20px 0 0">
|
||||
<v-layout row wrap justify-center class="form-container">
|
||||
<v-flex sm3 xs8 class="season-container">
|
||||
<v-select
|
||||
v-bind:items="seasonChoices"
|
||||
v-model="$store.state.season"
|
||||
|
|
@ -13,139 +12,139 @@
|
|||
dark
|
||||
item-text="name"
|
||||
item-value="value"/>
|
||||
</v-col>
|
||||
<v-col md3 xs12 class="year-container">
|
||||
</v-flex>
|
||||
<v-flex offset-sm1 sm3 xs8 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-flex>
|
||||
<v-flex offset-sm1 sm2 xs8 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-flex>
|
||||
</v-layout>
|
||||
|
||||
<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-text-field class="query"
|
||||
v-model="query"
|
||||
label="Search entry" dark>
|
||||
</v-text-field>
|
||||
<v-row class="elems">
|
||||
<transition-group name="list">
|
||||
<v-col md6 xs12 v-for="item in computedSeason[i].items"
|
||||
style="display: inline-block"
|
||||
:key="item.key">
|
||||
<v-row class="elem elevation-3" v-ripple="true">
|
||||
<v-tabs id="tabs" dark fixed centered>
|
||||
<v-tabs-bar slot="activators" class="mablue">
|
||||
<v-tabs-slider class="primary"></v-tabs-slider>
|
||||
<v-tabs-item v-for="i in 3"
|
||||
:href="'#' + i"
|
||||
:key="i">
|
||||
{{ season[i].name }}
|
||||
</v-tabs-item>
|
||||
</v-tabs-bar>
|
||||
<v-tabs-content v-for="i in 3"
|
||||
v-bind:id="`${i}`"
|
||||
:key="i">
|
||||
<v-text-field class="query"
|
||||
v-model="query"
|
||||
label="Search entry" dark>
|
||||
</v-text-field>
|
||||
<v-layout row wrap class="elems">
|
||||
<transition-group name="list">
|
||||
<v-flex md6 xs12 v-for="item in computedSeason[i].items"
|
||||
style="display: inline-block"
|
||||
:key="item.key">
|
||||
<v-layout row wrap class="elem elevation-3" v-ripple="true">
|
||||
<!-- Header of elem -->
|
||||
<v-col xs12 v-tooltip:bottom="{ html: item.title }">
|
||||
<v-flex 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(' ') }">
|
||||
</v-flex>
|
||||
<v-flex xs8 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 }">
|
||||
</v-flex>
|
||||
<v-flex xs3 v-tooltip:bottom="{ html: item.fromType }">
|
||||
<p class="from-type ellipsis">
|
||||
{{ item.fromType }}
|
||||
</p>
|
||||
</v-col>
|
||||
</v-flex>
|
||||
<v-flex xs1></v-flex>
|
||||
<!-- 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>
|
||||
</transition-group>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-tab-content>
|
||||
<v-flex xs4 class="image-container">
|
||||
<img :src="item.picture" class="image"/>
|
||||
</v-flex>
|
||||
<v-flex xs8 class="bottom-right">
|
||||
<v-layout wrap justify-space-between align-center>
|
||||
<v-flex xs12>
|
||||
<div class="synopsis">
|
||||
{{ reduced(item.synopsis) }}
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-layout wrap justify-space-between>
|
||||
<v-flex xs3 class="date">{{ getDate(item.releaseDate) }}</v-flex>
|
||||
<v-flex xs4 class="nb-ep">{{ item.nbEp }} {{ episode(item.npEp) }}</v-flex>
|
||||
</v-layout>
|
||||
<v-layout wrap justify-space-between>
|
||||
<v-flex xs8 class="producers"><strong>{{ item.producers.join(' ') }}</strong></v-flex>
|
||||
<v-flex xs4 class="dropdown-container">
|
||||
<v-menu open-on-hover
|
||||
transition="slide-x-transition">
|
||||
<v-btn flat dark slot="activator">
|
||||
More
|
||||
</v-btn>
|
||||
<v-list>
|
||||
<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-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-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>
|
||||
</v-menu>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</transition-group>
|
||||
</v-layout>
|
||||
</v-tabs-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>
|
||||
<h2 class="headline white--text">{{ modalTitle }}</h2>
|
||||
</v-card-text>
|
||||
<v-card-text class="subheading white--text">
|
||||
<v-card-text class="text white--text">
|
||||
{{ modalText }}
|
||||
</v-card-text>
|
||||
<v-card-row actions>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn primary dark
|
||||
<v-btn class="blue--text darken-1" flat
|
||||
style="width: 100px"
|
||||
v-on:click.native="modal = false">Thanks!
|
||||
</v-btn>
|
||||
</v-card-row>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
<choice-window :entry="choiceTitle"></choice-window>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -260,29 +259,12 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
/* ----------- FORM ---------- */
|
||||
.form-container
|
||||
.text
|
||||
{
|
||||
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%;
|
||||
text-align: justify;
|
||||
text-align-last: center;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.query
|
||||
|
|
@ -344,17 +326,19 @@
|
|||
.image-container
|
||||
{
|
||||
padding: 0;
|
||||
max-height: 220px;
|
||||
}
|
||||
|
||||
.image
|
||||
{
|
||||
height: 220px;
|
||||
max-width: 170px;
|
||||
max-height: 220px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.bottom-right
|
||||
{
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.synopsis
|
||||
|
|
@ -362,7 +346,12 @@
|
|||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
text-align: justify;
|
||||
min-height: 130px;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
height: 7.5em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.date
|
||||
|
|
|
|||
Loading…
Reference in New Issue