paginar 0.1.2 → 0.1.4

package/dist/style.css

@@ -800,9 +800,9 @@ video {
   padding-right: 2.5rem;
 }
 
-.px-24 {
-  padding-left: 6rem;
-  padding-right: 6rem;
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
 .py-3 {
@@ -989,4 +989,9 @@ video {
   .md\:w-2\/5 {
     width: 40%;
   }
+
+  .md\:px-24 {
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
 }

package/package.json

@@ -4,7 +4,7 @@
 	"description": "A flipping page web component for reading long texts on the brower",
 	"main": "dist/index.es.js",
 	"module": "dist/index.es.js",
-	"version": "0.1.2",
+	"version": "0.1.4",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/educkf/paginar.git"

package/src/assets/main.css

@@ -106,7 +106,7 @@ header.wrapper {
 .viewer-nav {
 	height: 100%;
 
-	@apply fixed md:relative z-10 inset-y-0 transition duration-500 ease-in-out self-center w-10 cursor-pointer flex-shrink-0;
+	@apply relative z-10 inset-y-0 transition duration-500 ease-in-out self-center w-10 cursor-pointer flex-shrink-0;
 
 
 	&:focus,
@@ -125,6 +125,13 @@ header.wrapper {
 .viewer-nav-icon {
 	@apply opacity-0 md:opacity-80;
 }
+
+.columnsArea {
+	@media only screen and (max-width: 600px) {
+		transition: margin 100ms;
+	}
+}
+
 /* slider */
 
 .slider-target,.slider-target *{

package/src/components/ReaderWrapper.vue

@@ -1,15 +1,36 @@
 <script setup>
+import { ref } from 'vue'
+import { usePointerSwipe, useWindowSize } from '@vueuse/core'
+
 import usePagination from '../composables/usePagination'
 import useReaderSettings from '../composables/useReaderSettings'
 
 const { columns } = useReaderSettings
 const { currentPage } = usePagination
+
+const el = ref(null)
+
+const { width } = useWindowSize()
+const { distanceX } = usePointerSwipe(el, {
+	onSwipeEnd() {
+		if (width.value < 600) {
+			if (distanceX.value > 100) {
+				usePagination.next()
+			}
+			if (distanceX.value < -100) {
+				usePagination.prev()
+			}
+		}
+	}
+})
+
 </script>
 
 <template>
-	<div :class="columns" :style="`margin-left: -${100 * (currentPage - 1)}%`">
+	<div  ref="el" class="columnsArea" :class="columns" :style="`margin-left: -${100 * (currentPage - 1)}%`">
 		<div class="[ typeArea ] h-full relative
-			transition-opacity duration-100 opacity-100 px-24">
+			transition-opacity duration-100 opacity-100 px-2 md:px-24
+		">
 			<slot></slot>
 		</div>
 	</div>

package/src/composables/useReaderSettings.js

@@ -78,6 +78,14 @@ function loadSavedSettings(settings) {
 		) {
 			state.textFont = savedSettings.textFont
 		}
+
+		if (savedSettings.mode === 'dark') {
+			const htmlRoot = document.querySelector('html')
+			if (htmlRoot) {
+				htmlRoot.classList.remove("light")
+				htmlRoot.classList.add("dark")
+			}
+		}
 	}
 }
 
@@ -95,6 +103,18 @@ function setFontSize(value) {
 
 function setMode(value) {
 	state.mode = value
+
+	const htmlRoot = document.querySelector('html')
+	if (htmlRoot) {
+		if (htmlRoot.classList.contains("dark")) {
+			htmlRoot.classList.remove("dark")
+			htmlRoot.classList.add("light")
+
+		} else {
+			htmlRoot.classList.remove("light")
+			htmlRoot.classList.add("dark")
+		}
+	}
 }
 
 function saveSettings() {

package/src/tailwind.css

@@ -800,9 +800,9 @@ video {
   padding-right: 2.5rem;
 }
 
-.px-24 {
-  padding-left: 6rem;
-  padding-right: 6rem;
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
 .py-3 {
@@ -989,4 +989,9 @@ video {
   .md\:w-2\/5 {
     width: 40%;
   }
+
+  .md\:px-24 {
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
 }

package/tailwind.config.js

@@ -6,7 +6,11 @@ module.exports = {
 		'./src/**/*.{js,jsx,ts,tsx,vue}',
 	],
 	theme: {
-		extend: {},
+		extend: {
+			transitionProperty: {
+				'spacing': 'margin'
+			}
+		},
 	},
 	plugins: [],
 }