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

Lazyloading on news with better scroll

This commit is contained in:
Kylart 2017-08-03 10:46:44 +02:00
parent b428694e25
commit c29b525649
6 changed files with 103 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/App.vue
View File

@ -85,7 +85,7 @@
<env v-if="$store.state.NODE_ENV"></env>
<info-results v-show="$store.state.info.show"></info-results>
<!-- Displayed if an error occurred -->
<!-- Displayed for displaying any info -->
<v-snackbar
:timeout="5000"
:top="true"

3
assets/stylus/main.styl
View File

@ -68,9 +68,6 @@ $theme := {
/**
Custom rules which will be applied globally, allows overriding
*/
.application--toolbar.application--footer > main > .container
min-height calc(100vh - (48px + 24px))
.toolbar__content
max-height 48px

4
components/_index.js
View File

@ -4,6 +4,8 @@ import HistoryModal from './historyModal.vue'
import InfoModal from './infoModal.vue'
import InfoResults from './infoResults.vue'
import Loader from './loader.vue'
import News from './news.vue'
import VirtualList from 'vue-virtual-scroll-list'
import Settings from './settings.vue'
export default {
@ -13,5 +15,7 @@ export default {
InfoModal,
InfoResults,
Loader,
News,
VirtualList,
Settings
}

84
components/news.vue Normal file
View File

@ -0,0 +1,84 @@
<template lang="pug">
v-flex(xs12 v-ripple="true").elevation-3.elem
v-layout(row wrap)
v-flex(xs12)
h3.white--text.title {{ item.title }}
v-flex(md2 xs3 style="height: 220px;")
img(:src="item.image").image
v-flex(md10 xs9)
v-layout(row wrap)
v-flex(xs12)
p.synopsis {{ item.text }}
v-flex(xs12).link
div.button-container
v-btn(secondary block @click="open(item.link)") Open
</template>
<script>
export default {
props: {
item: Object
},
methods: {
open (link) {
this.$store.dispatch('openNewsLink', link)
}
}
}
</script>
<style scoped>
.elem
{
position: relative;
margin-bottom: 15px;
padding: 0;
background-color: rgb(60, 60, 60);
}
.elem:hover
{
transition: all 0.25s;
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
{
line-height: 24px;
margin-top: 10px;
padding-left: 2%;
padding-right: 2%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.image
{
height: 220px;
max-width: 100%;
}
.synopsis
{
padding-top: 2%;
height: 150px;
}
.link
{
height: 50%;
width: 100%;
text-align: right;
display: inline-block;
padding: 0 5% 0 10%;
}
.button-container
{
display: inline-block;
width: 15%;
}
</style>

1
package.json
View File

@ -53,6 +53,7 @@
"vue-clipboards": "^1.1.0",
"vue-router": "^2.7.0",
"vue-server-renderer": "^2.4.2",
"vue-virtual-scroll-list": "^1.1.3",
"vuetify": "^0.14.8",
"vuex": "^2.3.1",
"vuex-router-sync": "^4.1.2"

115
pages/news.vue
View File

@ -1,53 +1,19 @@
<template>
<v-container fluid style="padding: 0; min-height: 92vh;">
<loader v-if="!$store.state.news.length"></loader>
<template lang="pug">
v-container(fluid).pa-0
loader(v-if="!$store.state.news.length")
<v-container fluid v-else>
<v-layout row wrap class="news-container">
<v-flex xs12 class="refresh-button-container">
<v-btn icon
class="refresh-button"
@click="refresh()">
<v-icon large>refresh</v-icon>
</v-btn>
</v-flex>
<v-flex xs12
class="elem elevation-3"
v-ripple="true"
v-for="item in $store.state.news" :key="item.name">
<v-layout row wrap>
<v-flex xs12>
<h3 class="title white--text">{{ item.title }}</h3>
</v-flex>
<v-flex md2 xs3 style="height: 220px;">
<img :src="item.image" class="image"/>
</v-flex>
<v-flex md10 xs9>
<v-layout row wrap>
<v-flex xs12><p class="synopsis">{{ item.text }}</p></v-flex>
</v-layout>
<v-layout row wrap xs12 class="link">
<div class="button-container">
<v-btn secondary block @click="open(item.link)">Open</v-btn>
</div>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-container>
</v-container>
v-container(fluid v-else)
v-layout(row wrap).news-container
v-flex(xs12).refresh-button-container
v-btn(icon @click="refresh()").refresh-button
v-icon(large) refresh
virtual-list(:size="220", :remain="4").list-container
news(v-for="item in $store.state.news", :item="item", :key="item.title")
</template>
<script>
export default {
data () {
return {}
},
methods: {
open (link) {
this.$store.dispatch('openNewsLink', link)
},
refresh () {
this.$store.dispatch('refreshNews')
}
@ -71,69 +37,14 @@
display: inline-block;
}
/* Needed */
.icon--large
{
height: 2.5rem;
}
/* ---------- ELEM ---------- */
.news-container
{
padding: 0 2% 1% 2%;
padding: 0 0 1% 1%;
}
.elem
.list-container
{
position: relative;
margin-bottom: 15px;
padding: 0;
background-color: rgb(60, 60, 60);
}
.elem:hover
{
transition: all 0.25s;
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
{
line-height: 24px;
margin-top: 10px;
padding-left: 2%;
padding-right: 2%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.image
{
height: 220px;
max-width: 100%;
}
.synopsis
{
padding-top: 2%;
height: 150px;
}
.link
{
height: 50%;
width: 100%;
text-align: right;
display: inline-block;
padding: 0 5% 0 10%;
}
.button-container
{
display: inline-block;
width: 15%;
padding-right: 10px;
}
</style>