Fix Carousel (#93)

* Update config.js

* Update config.js

* New carousel but broken

* Basic style

* Clean up

package-lock.json

@@ -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==",
+      "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": {
       "version": "2.3.4",

package.json

@@ -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"
 	}

src/.vuepress/components/Carousel.vue

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

src/.vuepress/components/CarouselItem.vue

@@ -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 {
+.slide {
-	width: 100%;
+	align-items: center;
-	margin-right: 16px;
+	display: flex;
-	margin-left: 16px;
+	justify-content: center;
 }
 </style>

src/.vuepress/config.js

@@ -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'} , ''],
+		['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: {
 		repo: 'inorichi/tachiyomi',

src/.vuepress/enhanceApp.js

@@ -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)
 };