Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-12-21 07:31:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix Carousel (#93)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -10459,8 +10459,15 @@
"vue": {
"version": "2.6.10",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
"integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==",
"dev": true
"integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
},
"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": {
"version": "2.3.4",

1
package.json
View File

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

91
src/.vuepress/components/Carousel.vue
View File

@ -1,29 +1,29 @@
<template>
<div class="carousel-root">
<div class="carousel" v-bind:id="name">
<agile :options="config" :id="name">
<slot />
</div>
<script>
var config = {{ config }};
new Flickity("#{{ name }}", config)
</script>
</div>
<template slot="prevButton">
<MaterialIcon iconName="navigate_next" />
</template>
<template slot="nextButton">
<MaterialIcon iconName="navigate_next" />
</template>
</agile>
</template>
<script>
export default {
name: "carousel",
props: {
name: {
type: String,
required: true
default: "carousel"
},
config: {
type: Object,
default: function () {
return {
adaptiveHeight: true,
wrapAround: true,
pageDots: false
navButtons: true,
centerMode: true
}
}
}
@ -32,15 +32,76 @@ export default {
</script>
<style>
.carousel {
.agile {
background: #F0F4F8;
border-radius: 1em;
}
.flickity-button {
position: absolute;
.agile__nav-button {
background: hsla(0,0%,100%,.75);
border: none;
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>

10
src/.vuepress/components/CarouselItem.vue
View File

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

4
src/.vuepress/config.js
View File

@ -7,9 +7,7 @@ module.exports = {
['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://fonts.googleapis.com/css?family=Open+Sans'} , ''],
['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'} , ''],
['link', { rel: "stylesheet", href: 'https://fonts.googleapis.com/icon?family=Material+Icons'} , '']
],
themeConfig: {
repo: 'inorichi/tachiyomi',

2
src/.vuepress/enhanceApp.js
View File

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