Kylart
/
KawAnime
mirror of https://github.com/Kylart/KawAnime.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updated to vuetify 1.0

This commit is contained in:
Kylart 2018-04-29 21:12:35 +02:00
parent 538e5676d4
commit 3f4804a87f
7 changed files with 206 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
assets/App.vue
View File

@ -1,25 +1,35 @@
<template lang="pug">
v-app(dark)
v-navigation-drawer.pb-0.main-drawer(app, fixed, temporary, v-model='$store.state.drawer')
v-list
v-list(dark)
v-list-tile#title(to='/')
v-list-tile-action
img(src='~static/images/icon2.png', height='50')
v-list-tile-title.title.white--text かわニメ
template(v-for='item in itemGroup')
v-list-group(v-if='item.items', :key='item.title', :group="item.group")
v-list-tile.ripple(slot='item', ripple)
v-list-tile-action
v-icon {{ item.action }}
v-list-tile-title {{ item.title }}
v-list-tile-action
v-icon keyboard_arrow_down
v-list-tile.ripple(v-for='subItem in item.items', ripple, :to='subItem.href', :key='subItem.title', exact)
v-list-tile-action
v-icon {{ subItem.action }}
v-list-group(
v-if='item.items',
:group='item.group',
:prepend-icon='item.action',
no-action
)
v-list-tile(slot='activator', ripple)
v-list-tile-content
v-list-tile-title {{ subItem.title }}
v-divider
v-list-tile-title {{ item.title }}
template(v-for='(subItem, i) in item.items')
v-list-tile(
:key='i',
:to='subItem.href',
:disabled='subItem.disabled',
ripple
)
v-list-tile-action
v-icon {{ subItem.action }}
v-list-tile-content
v-list-tile-title
span {{ subItem.title }}
v-subheader.white--text(v-else-if='item.header') {{ item.header }}
v-divider(v-else-if='item.divider')
@ -46,9 +56,7 @@
settings
logs
//- main.m
v-content
//- v-content // Apparently required. Todo
transition(name='page', mode='out-in')
router-view
@ -72,7 +80,6 @@
</template>
<script>
import axios from 'axios'
import Meta from 'mixins/meta'
export default {
@ -91,7 +98,7 @@
setInterval(async () => {
try {
const {status} = await this.$axios.get('_isOnline')
const {status} = await this.$this.$axios.get('_isOnline')
this.$store.commit('setConnected', status === 200)
} catch (e) { void e }
@ -189,7 +196,7 @@
this.$store.commit('toggleDrawer')
},
actOnWindow (action) {
axios.get('/_win', {
this.$axios.get('/_win', {
params: {
action
}

3
assets/stylus/global.styl
View File

@ -42,6 +42,9 @@ table.table thead td:not(:nth-child(1)), table.table tbody td:not(:nth-child(1))
.fill-height
min-height calc(100vh - (48px + 24px)) !important
.navigation-drawer .list
background initial
.navigation-drawer .list__tile
font-size 14px

2
components/kFooter.vue
View File

@ -1,5 +1,5 @@
<template lang="pug">
v-footer.grey.darken-4.pr-2(app)
v-footer.grey.darken-4.pr-2
v-spacer
.white--text © 2016 - {{ lastYear }} Kylart
</template>

2
package.json
View File

@ -58,7 +58,7 @@
"vue-markdown": "^2.2.4",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.5.13",
"vuetify": "^0.17.7",
"vuetify": "^1.0.15",
"vuex": "^3.0.1",
"vuex-router-sync": "^5.0.0",
"webtorrent": "^0.98.24"

116
pages/malPage.vue
View File

@ -1,61 +1,60 @@
<template lang="pug">
v-container(fluid, fill-height, grid-list-xs)
v-card
v-layout.pa-2(row, wrap, justify-center)
v-flex.centered(xs12, sm2)
.headline.pl-4 MyAnimeList
v-flex.centered.pr-2(xs10, sm3, md3, offset-sm1)
v-select(
v-model='tagsFilter',
:items='customTags',
label='Tags',
persistent-hint,
hint='Looking for special tags?',
single-line,
clearable, dense, chips, tags
)
v-flex.centered.pl-2(xs8, sm3, md3, offset-md1)
v-text-field(
append-icon='search',
label='Search',
single-line,
v-model='search'
)
v-flex.centered.pt-3.pl-3(xs4, sm3, md2)
v-btn(@click.stop='showSearch()')
v-icon add
span Add
v-btn(icon, @click='refresh()')
v-icon(large) refresh
v-data-table(
no-data-text='No data available, did you register your account and set your MyAnimeList public? If yes, it is possible that the account you entered was wrong.',
no-results-text='Seems like you haven\'t watched this one ;)',
rows-per-page-text='Anime per page:',
:disable-initial-sort='true',
:loading='isLoading',
:headers='headers',
:items='lists',
:search='search',
:rows-per-page-items='rowsPerPage'
)
template(slot='items', slot-scope='props')
td.text-xs-center
img.entry-image(:src='props.item.image')
td.text-xs-left.entry-title
span.pl-3 {{ props.item.title }}
td.text-xs-center {{ props.item.score }}
td.text-xs-center {{ props.item.type }}
td.text-xs-center {{ props.item.progress }}
td.text-xs-center {{ props.item.status }}
td.text-xs-center.ellipsis.entry-tags
v-tooltip(top)
span(slot='activator') {{ props.item.tags }}
span {{ props.item.tags }}
td
v-btn.blue--text.darken-1(icon, flat, @click.stop='showForm(props.item.id)')
v-icon edit
v-btn.blue--text.darken-1(icon, flat, @click.stop='showInfo(props.item.title, props.item.link)')
v-icon info_outline
v-card.fill-height
v-layout.pa-2(row, wrap, justify-center)
v-flex.centered(xs12, sm2)
.headline.pl-4 MyAnimeList
v-flex.centered.pr-2(xs10, sm3, md3, offset-sm1)
v-select(
v-model='tagsFilter',
:items='customTags',
label='Tags',
persistent-hint,
hint='Looking for special tags?',
single-line,
clearable, dense, chips, tags
)
v-flex.centered.pl-2(xs8, sm3, md3, offset-md1)
v-text-field(
append-icon='search',
label='Search',
single-line,
v-model='search'
)
v-flex.centered.pt-3.pl-3(xs4, sm3, md2)
v-btn(@click.stop='showSearch()')
v-icon add
span Add
v-btn(icon, @click='refresh()')
v-icon(large) refresh
v-data-table(
no-data-text='No data available, did you register your account and set your MyAnimeList public? If yes, it is possible that the account you entered was wrong.',
no-results-text='Seems like you haven\'t watched this one ;)',
rows-per-page-text='Anime per page:',
:disable-initial-sort='true',
:loading='isLoading',
:headers='headers',
:items='lists',
:search='search',
:rows-per-page-items='rowsPerPage'
)
template(slot='items', slot-scope='props')
td.text-xs-center
img.entry-image(:src='props.item.image')
td.text-xs-left.entry-title
span.pl-3 {{ props.item.title }}
td.text-xs-center {{ props.item.score }}
td.text-xs-center {{ props.item.type }}
td.text-xs-center {{ props.item.progress }}
td.text-xs-center {{ props.item.status }}
td.text-xs-center.ellipsis.entry-tags
v-tooltip(top)
span(slot='activator') {{ props.item.tags }}
span {{ props.item.tags }}
td
v-btn.blue--text.darken-1(icon, flat, @click.stop='showForm(props.item.id)')
v-icon edit
v-btn.blue--text.darken-1(icon, flat, @click.stop='showInfo(props.item.title, props.item.link)')
v-icon info_outline
</template>
<script>
@ -151,9 +150,6 @@
</script>
<style lang="stylus" scoped>
.container
display inline-block
.centered
display flex
align-items center

133
pages/seasons.vue
View File

@ -15,74 +15,71 @@
v-text-field(name='input-year', type='number', min='1917', label='Year', v-model='$store.state.seasons.year', dark)
v-flex.refresh-button(offset-sm1, sm2, xs8)
v-btn(color='secondary', block, dark, @click='refreshSeason()') Refresh
v-tabs#tabs(dark, fixed, centered)
v-tabs-bar.mablue
v-tabs-slider.primary
v-tabs-item(v-for='i in 5', :href="'#' + i", :key='i')
| {{ season[i].name }}
v-tabs-items
v-tabs-content(v-for='i in 5', lazy, :id='`${i}`', :key='i')
v-text-field.query(v-model='query', label='Search entry', dark)
v-layout.elems(row, wrap)
transition-group(name='list')
v-flex.pa-1(
xl3, lg4, md6, xs12,
v-for='item in computedSeason[i].items',
style='display: inline-block',
:key='item.key'
)
v-layout.elem.elevation-3(row, wrap, v-ripple='true')
// Header of elem
v-flex(xs12)
v-tooltip(top)
h6.title.ellipsis.white--text(slot='activator') {{ item.title }}
span {{ item.title }}
v-flex(xs8)
v-tooltip(top)
p.genres.ellipsis(slot='activator') {{ item.genres.join(' ') }}
span {{ item.genres.join(' ') }}
v-flex(xs3)
p.from-type.ellipsis {{ item.fromType }}
v-flex(xs1)
// Picture of elem
v-flex.image-container(xs3, lg4)
lazy-component
img.image(:src='item.picture', onerror="this.src='static/images/error.jpg'")
v-flex.bottom-right(xs9, lg8)
v-layout(wrap, justify-space-between, align-center)
v-flex(xs12)
.synopsis {{ item.synopsis }}
v-flex.pl-2(xs12)
v-layout(wrap, justify-space-between)
v-flex.date(xs6) {{ getDate(item.releaseDate) }}
v-flex.nb-ep(xs6) {{ episode(item) }}
v-layout(wrap, justify-space-between)
v-flex.producers(xs8)
strong {{ item.producers.join(' ') }}
v-flex.pb-1(xs4)
v-menu(open-on-hover, transition='slide-x-transition')
v-btn(flat, dark, slot='activator') More
v-list.dark
v-list-tile(@click='openModal(item.title, item.synopsis)')
v-list-tile-action
v-icon more
v-list-tile-title Check synopsis
v-list-tile(@click='downloadAll(item.title)')
v-list-tile-action
v-icon file_download
v-list-tile-title Download all episodes
v-list-tile(@click="$store.dispatch('search/fromUrl', item)")
v-list-tile-action
v-icon info_outline
v-list-tile-title Information
v-list-tile(@click='showChoices(item.title)')
v-list-tile-action
v-icon add_box
v-list-tile-title Add to
v-list-tile(@click='showMal(item)')
v-list-tile-action
span.mal-icon
v-list-tile-title MyAnimeList
v-tabs#tabs(grow, slider-color='primary')
v-tab.mablue(v-for='i in 5', :href="'#' + i", :key='i')
| {{ season[i].name }}
v-tab-item(v-for='i in 5', lazy, :id='`${i}`', :key='i')
v-text-field.query(v-model='query', label='Search entry', dark)
v-layout.elems(row, wrap)
transition-group(name='list')
v-flex.pa-1(
xl3, lg4, md6, xs12,
v-for='item in computedSeason[i].items',
style='display: inline-block',
:key='item.key'
)
v-layout.elem.elevation-3(row, wrap, v-ripple='true')
// Header of elem
v-flex(xs12)
v-tooltip(top)
h6.title.ellipsis.white--text(slot='activator') {{ item.title }}
span {{ item.title }}
v-flex(xs8)
v-tooltip(top)
p.genres.ellipsis(slot='activator') {{ item.genres.join(' ') }}
span {{ item.genres.join(' ') }}
v-flex(xs3)
p.from-type.ellipsis {{ item.fromType }}
v-flex(xs1)
// Picture of elem
v-flex.image-container(xs3, lg4)
lazy-component
img.image(:src='item.picture', onerror="this.src='static/images/error.jpg'")
v-flex.bottom-right(xs9, lg8)
v-layout(wrap, justify-space-between, align-center)
v-flex(xs12)
.synopsis {{ item.synopsis }}
v-flex.pl-2(xs12)
v-layout(wrap, justify-space-between)
v-flex.date(xs6) {{ getDate(item.releaseDate) }}
v-flex.nb-ep(xs6) {{ episode(item) }}
v-layout(wrap, justify-space-between)
v-flex.producers(xs8)
strong {{ item.producers.join(' ') }}
v-flex.pb-1(xs4)
v-menu(open-on-hover, transition='slide-x-transition')
v-btn(flat, dark, slot='activator') More
v-list.dark
v-list-tile(@click='openModal(item.title, item.synopsis)')
v-list-tile-action
v-icon more
v-list-tile-title Check synopsis
v-list-tile(@click='downloadAll(item.title)')
v-list-tile-action
v-icon file_download
v-list-tile-title Download all episodes
v-list-tile(@click="$store.dispatch('search/fromUrl', item)")
v-list-tile-action
v-icon info_outline
v-list-tile-title Information
v-list-tile(@click='showChoices(item.title)')
v-list-tile-action
v-icon add_box
v-list-tile-title Add to
v-list-tile(@click='showMal(item)')
v-list-tile-action
span.mal-icon
v-list-tile-title MyAnimeList
v-dialog(v-model='modal', max-width='70%', @keydown.esc='modal = false')
v-card
v-card-title.headline {{ modalTitle }}

114
pages/watchList.vue
View File

@ -1,65 +1,61 @@
<template lang="pug">
v-container#watch-list.pa-0.mt-0(fluid, fill-height)
v-tabs#tabs(grow, icons)
v-tabs-bar.mablue
v-tabs-slider.primary
template(v-for='i in 5')
v-tabs-item(:href="'#tabs-' + i")
| {{ actionsList[i - 1].name }}
v-icon {{ actionsList[i - 1].icon }}
v-tabs-items
v-tabs-content(v-for='i in 5', :key='i', lazy, v-bind:id="'tabs-' + i")
v-layout.list-container.pb-2(row, wrap)
v-flex(xs12)
v-layout.top-form(row, wrap, align-center, justify-center)
v-flex(md3, sm4, xs9)
v-tooltip(bottom)
v-btn(
icon, flat,
@click='selectAll(i)',
slot='activator'
v-tabs#tabs(grow, icons-and-text, slider-color='primary')
template(v-for='i in 5')
v-tab.mablue(:href="'#tabs-' + i") {{ actionsList[i - 1].name }}
v-icon {{ actionsList[i - 1].icon }}
v-tab-item(v-for='i in 5', :key='i', lazy, v-bind:id="'tabs-' + i")
v-layout.list-container.pb-2(row, wrap)
v-flex(xs12)
v-layout.top-form(row, wrap, align-center, justify-center)
v-flex(md3, sm4, xs9)
v-tooltip(bottom)
v-btn(
icon, flat,
@click='selectAll(i)',
slot='activator'
)
v-icon select_all
span {{ selectLabel(i) }}
v-menu(open-on-hover, transition='slide-x-transition')
v-btn(color='secondary', slot='activator') Move to
v-list.dark
v-list-tile(
@click='moveTo(action.list, i)',
v-for='action in actions(i)',
:key='action.name'
)
v-icon select_all
span {{ selectLabel(i) }}
v-menu(open-on-hover, transition='slide-x-transition')
v-btn(color='secondary', slot='activator') Move to
v-list.dark
v-list-tile(
@click='moveTo(action.list, i)',
v-for='action in actions(i)',
:key='action.name'
)
v-list-tile-action
v-icon {{ action.icon }}
v-list-tile-title {{ action.name }}
v-tooltip(bottom)
v-btn.red--text(
@click='deleteSelected(i)',
slot='activator',
icon
)
v-icon delete_sweep
span Delete all selected items from this list
v-flex(md2, sm2, xs3)
p.elem-number
| {{ lists[i - 1].length }} {{ lists[i - 1].length === 1 ? 'entry' : 'entries' }}
v-flex(md3, sm1, hidden-xs-only)
v-flex(md2, sm3, xs4, @keyup.enter='addEntry(i)')
v-text-field.entry-text(type='text', label='Add entry', v-model='entries[i]', dark)
v-flex(hidden-sm-and-up, xs1)
v-flex.add-button-container(md2, sm2, xs4)
v-btn.add-button(dark, color='secondary', @click='addEntry(i)')
| Add
transition-group(name='list')
template(v-for='item in lists[i - 1]')
list-entry(
:item='item',
:deleteEntry='deleteEntry',
:key='item',
:index='i',
:select='select',
:selected='selected'
)
v-list-tile-action
v-icon {{ action.icon }}
v-list-tile-title {{ action.name }}
v-tooltip(bottom)
v-btn.red--text(
@click='deleteSelected(i)',
slot='activator',
icon
)
v-icon delete_sweep
span Delete all selected items from this list
v-flex(md2, sm2, xs3)
p.elem-number
| {{ lists[i - 1].length }} {{ lists[i - 1].length === 1 ? 'entry' : 'entries' }}
v-flex(md3, sm1, hidden-xs-only)
v-flex(md2, sm3, xs4, @keyup.enter='addEntry(i)')
v-text-field.entry-text(type='text', label='Add entry', v-model='entries[i]', dark)
v-flex(hidden-sm-and-up, xs1)
v-flex.add-button-container(md2, sm2, xs4)
v-btn.add-button(dark, color='secondary', @click='addEntry(i)')
| Add
transition-group(name='list')
template(v-for='item in lists[i - 1]')
list-entry(
:item='item',
:deleteEntry='deleteEntry',
:key='item',
:index='i',
:select='select',
:selected='selected'
)
</template>
<script>