Fix Carousel (#93)

* Update config.js

* Update config.js

* New carousel but broken

* Basic style

* Clean up
This commit is contained in:
Andreas E 2019-11-13 16:40:24 +01:00 committed by Simon M
parent 008a0d4959
commit 89a81a0506
6 changed files with 102 additions and 33 deletions

11
package-lock.json generated
View File

@ -10459,8 +10459,15 @@
"vue": { "vue": {
"version": "2.6.10", "version": "2.6.10",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
"integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==", "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
"dev": true },
"vue-agile": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/vue-agile/-/vue-agile-1.0.11.tgz",
"integrity": "sha512-iOc3qkTjJx5HldP3e9KGYtrYOg/1TG1FpcJQOQKGXHxPO2WAS0MU10tA4ydNbrTM7DTBaIo8RReZsxevFordNg==",
"requires": {
"vue": "^2.6.10"
}
}, },
"vue-hot-reload-api": { "vue-hot-reload-api": {
"version": "2.3.4", "version": "2.3.4",

View File

@ -25,6 +25,7 @@
"iso-639-1": "^2.1.0", "iso-639-1": "^2.1.0",
"lodash.groupby": "^4.6.0", "lodash.groupby": "^4.6.0",
"lodash.sortby": "^4.7.0", "lodash.sortby": "^4.7.0",
"vue-agile": "^1.0.11",
"vuepress-plugin-clean-urls": "^1.0.3", "vuepress-plugin-clean-urls": "^1.0.3",
"vuepress-plugin-container": "^2.0.2" "vuepress-plugin-container": "^2.0.2"
} }

View File

@ -1,46 +1,107 @@
<template> <template>
<div class="carousel-root"> <agile :options="config" :id="name">
<div class="carousel" v-bind:id="name"> <slot />
<slot /> <template slot="prevButton">
</div> <MaterialIcon iconName="navigate_next" />
<script> </template>
var config = {{ config }}; <template slot="nextButton">
new Flickity("#{{ name }}", config) <MaterialIcon iconName="navigate_next" />
</script> </template>
</div> </agile>
</template> </template>
<script> <script>
export default { export default {
name: "carousel",
props: { props: {
name: { name: {
type: String, type: String,
required: true default: "carousel"
}, },
config: { config: {
type: Object, type: Object,
default: function () { default: function () {
return { return {
adaptiveHeight: true, navButtons: true,
wrapAround: true, centerMode: true
pageDots: false }
} }
} }
} }
}
} }
</script> </script>
<style> <style>
.carousel { .agile {
background: #F0F4F8; background: #F0F4F8;
border-radius: 1em; border-radius: 1em;
} }
.flickity-button { .agile__nav-button {
position: absolute;
background: hsla(0,0%,100%,.75); background: hsla(0,0%,100%,.75);
border: none; border: none;
color: rgba(44, 62, 80); color: rgba(44, 62, 80);
cursor: pointer;
font-size: 24px;
height: 50px;
top: 50%;
transform: translateY(-50%);
position: absolute;
transition-duration: .3s;
width: 50px;
border-radius: 99em;
}
.agile__nav-button:hover {
background-color: rgba(0,0,0, .5);
opacity: 1;
}
.agile__nav-button--prev {
left: 10px;
}
.agile__nav-button--prev i {
transform: rotateZ(180deg)
}
.agile__nav-button--next {
right: 10px;
}
.agile__dots {
bottom: 10px;
left: 50%;
position: absolute;
transform: translateX(-50%);
}
.agile__dot {
margin: 0 10px;
}
.agile__dot button {
background-color: hsla(0,0%,100%,.75);
border: 1px solid hsla(0,0%,100%,.75);
border-radius: 50%;
cursor: pointer;
display: block;
height: 10px;
font-size: 0;
line-height: 0;
margin: 0;
padding: 0;
transition-duration: .3s;
width: 10px;
}
.agile__dot--current button {
background-color: rgba(44, 62, 80);
border-color: rgba(44, 62, 80);
}
.agile__dot button:hover {
background-color: rgba(44, 62, 80);
border-color: rgba(44, 62, 80);
} }
</style> </style>

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="carousel-cell" v-bind:id="name"> <div class="slide" :id="name">
<slot /> <slot />
</div> </div>
</template> </template>
@ -17,9 +17,9 @@ export default {
</script> </script>
<style> <style>
.carousel-cell { .slide {
width: 100%; align-items: center;
margin-right: 16px; display: flex;
margin-left: 16px; justify-content: center;
} }
</style> </style>

View File

@ -7,9 +7,7 @@ module.exports = {
['link', { rel: "preconnect", href: 'https://fonts.gstatic.com', crossorigin:""} , ''], ['link', { rel: "preconnect", href: 'https://fonts.gstatic.com', crossorigin:""} , ''],
['link', { rel: "stylesheet", href: 'https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css', crossorigin:""} , ''], ['link', { rel: "stylesheet", href: 'https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css', crossorigin:""} , ''],
['link', { rel: "stylesheet", href: 'https://fonts.googleapis.com/css?family=Open+Sans'} , ''], ['link', { rel: "stylesheet", href: 'https://fonts.googleapis.com/css?family=Open+Sans'} , ''],
['link', { rel: "stylesheet", href: 'https://fonts.googleapis.com/icon?family=Material+Icons'} , ''], ['link', { rel: "stylesheet", href: 'https://fonts.googleapis.com/icon?family=Material+Icons'} , '']
['script', { src: 'https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js'} , ''],
['link', { rel: "stylesheet", type: "text/css", href: 'https://unpkg.com/flickity@2/dist/flickity.min.css'} , ''],
], ],
themeConfig: { themeConfig: {
repo: 'inorichi/tachiyomi', repo: 'inorichi/tachiyomi',

View File

@ -3,6 +3,7 @@ import './styles/index.scss';
import { library } from '@fortawesome/fontawesome-svg-core'; import { library } from '@fortawesome/fontawesome-svg-core';
import { faDownload } from '@fortawesome/free-solid-svg-icons'; import { faDownload } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { VueAgile } from 'vue-agile'
library.add(faDownload); library.add(faDownload);
@ -13,4 +14,5 @@ export default ({
siteData // site metadata siteData // site metadata
}) => { }) => {
Vue.component('font-awesome-icon', FontAwesomeIcon); Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.component('agile', VueAgile)
}; };