mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 07:31:58 +01:00
Fix Carousel (#93)
* Update config.js * Update config.js * New carousel but broken * Basic style * Clean up
This commit is contained in:
parent
008a0d4959
commit
89a81a0506
11
package-lock.json
generated
11
package-lock.json
generated
@ -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",
|
||||||
|
@ -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"
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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',
|
||||||
|
@ -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)
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user