From fe10a00ba9a3c30d8718ca004ccd19518466f5bd Mon Sep 17 00:00:00 2001
From: Pitu <7425261+Pitu@users.noreply.github.com>
Date: Sun, 16 Sep 2018 01:09:02 -0300
Subject: Site

---
 src/site/components/loading/CubeShadow.vue   |  48 +++++++++++
 src/site/components/loading/Origami.vue      | 121 +++++++++++++++++++++++++++
 src/site/components/loading/PingPong.vue     |  98 ++++++++++++++++++++++
 src/site/components/loading/RotateSquare.vue |  87 +++++++++++++++++++
 4 files changed, 354 insertions(+)
 create mode 100644 src/site/components/loading/CubeShadow.vue
 create mode 100644 src/site/components/loading/Origami.vue
 create mode 100644 src/site/components/loading/PingPong.vue
 create mode 100644 src/site/components/loading/RotateSquare.vue

(limited to 'src/site/components/loading')

diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue
new file mode 100644
index 0000000..af31dac
--- /dev/null
+++ b/src/site/components/loading/CubeShadow.vue
@@ -0,0 +1,48 @@
+<template>
+	<div :style="styles"
+		class="spinner spinner--cube-shadow" />
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			type: String,
+			default: '60px'
+		},
+		background: {
+			type: String,
+			default: '#9C27B0'
+		},
+		duration: {
+			type: String,
+			default: '1.8s'
+		}
+	},
+	computed: {
+		styles() {
+			return {
+				width: this.size,
+				height: this.size,
+				backgroundColor: this.background,
+				animationDuration: this.duration
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.spinner{
+		animation: cube-shadow-spinner 1.8s cubic-bezier(0.75, 0, 0.5, 1) infinite;
+	}
+	@keyframes cube-shadow-spinner {
+		50% {
+			border-radius: 50%;
+			transform: scale(0.5) rotate(360deg);
+		}
+		100% {
+			transform: scale(1) rotate(720deg);
+		}
+	}
+</style>
diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue
new file mode 100644
index 0000000..d1b523d
--- /dev/null
+++ b/src/site/components/loading/Origami.vue
@@ -0,0 +1,121 @@
+<template>
+	<div :style="styles"
+		class="spinner spinner-origami">
+		<div :style="innerStyles"
+			class="spinner-inner loading">
+			<span class="slice" />
+			<span class="slice" />
+			<span class="slice" />
+			<span class="slice" />
+			<span class="slice" />
+			<span class="slice" />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			type: String,
+			default: '40px'
+		}
+	},
+	computed: {
+		innerStyles() {
+			let size = parseInt(this.size);
+			return { transform: `scale(${(size / 60)})` };
+		},
+		styles() {
+			return {
+				width: this.size,
+				height: this.size
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/colors.scss';
+
+@for $i from 1 through 6 {
+	@keyframes origami-show-#{$i}{
+		from{
+			transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
+			border-left-color: #31855e;
+		}
+	}
+	@keyframes origami-hide-#{$i}{
+		to{
+			transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
+			border-left-color: #31855e;
+		}
+	}
+
+	@keyframes origami-cycle-#{$i} {
+
+		$startIndex: $i*5;
+		$reverseIndex: (80 - $i*5);
+
+		#{$startIndex * 1%} {
+			transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
+			border-left-color: #31855e;
+		}
+		#{$startIndex + 5%},
+		#{$reverseIndex * 1%} {
+			transform: rotateZ(60* $i + deg) rotateY(0) rotateX(0deg);
+			border-left-color: #41b883;
+		}
+
+		#{$reverseIndex + 5%},
+		100%{
+			transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
+			border-left-color: #31855e;
+		}
+	}
+}
+
+.spinner{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	* {
+	line-height: 0;
+	box-sizing: border-box;
+	}
+}
+.spinner-inner{
+	display: block;
+	width: 60px;
+	height: 68px;
+	.slice {
+		border-top: 18px solid transparent;
+		border-right: none;
+		border-bottom: 16px solid transparent;
+		border-left: 30px solid #f7484e;
+		position: absolute;
+		top: 0px;
+		left: 50%;
+		transform-origin: left bottom;
+		border-radius: 3px 3px 0 0;
+	}
+
+	@for $i from 1 through 6 {
+		.slice:nth-child(#{$i}) {
+			transform: rotateZ(60* $i + deg) rotateY(0deg) rotateX(0);
+			animation: .15s linear .9 - $i*.08s origami-hide-#{$i} both 1;
+		}
+	}
+
+	&.loading{
+		@for $i from 1 through 6 {
+			.slice:nth-child(#{$i}) {
+				transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0);
+				animation: 2s origami-cycle-#{$i} linear infinite both;
+			}
+		}
+	}
+
+}
+</style>
diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue
new file mode 100644
index 0000000..ac33e28
--- /dev/null
+++ b/src/site/components/loading/PingPong.vue
@@ -0,0 +1,98 @@
+<template>
+	<div :style="styles"
+		class="spinner spinner--ping-pong">
+		<div :style="innerStyles"
+			class="spinner-inner">
+			<div class="board">
+				<div class="left"/>
+				<div class="right"/>
+				<div class="ball"/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			type: String,
+			default: '60px'
+		}
+	},
+	computed: {
+		innerStyles() {
+			let size = parseInt(this.size);
+			return { transform: `scale(${size / 250})` };
+		},
+		styles() {
+			return {
+				width: this.size,
+				height: this.size
+			};
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.spinner{
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		* {
+			line-height: 0;
+			box-sizing: border-box;
+		}
+	}
+	.board {
+		width:250px;
+		position: relative;
+	}
+	.left,
+	.right {
+		height:50px;
+		width:15px;
+		background:#41b883;
+		display: inline-block;
+		position:absolute;
+	}
+	.left {
+		left:0;
+		animation: pingpong-position1 2s linear infinite;
+	}
+	.right {
+		right:0;
+		animation: pingpong-position2 2s linear infinite;
+	}
+	.ball{
+		width:15px;
+		height:15px;
+		border-radius:50%;
+		background:#f7484e;
+		position:absolute;
+		animation: pingpong-bounce 2s linear infinite;
+	}
+	@keyframes pingpong-position1 {
+		0% {top:-60px;}
+		25% {top:0;}
+		50% {top:60px;}
+		75% {top:-60px;}
+		100% {top:-60px;}
+	}
+	@keyframes pingpong-position2 {
+		0% {top:60px;}
+		25% {top:0;}
+		50% {top:-60px;}
+		75% {top:-60px;}
+		100% {top:60px;}
+	}
+	@keyframes pingpong-bounce {
+		0% {top:-35px;left:10px;}
+		25% {top:25px;left:225px;}
+		50% {top:75px;left:10px;}
+		75% {top:-35px;left:225px;}
+		100% {top:-35px;left:10px;}
+	}
+</style>
diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue
new file mode 100644
index 0000000..4da8300
--- /dev/null
+++ b/src/site/components/loading/RotateSquare.vue
@@ -0,0 +1,87 @@
+<template>
+	<div :style="styles"
+		class="spinner spinner--rotate-square-2" />
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			type: String,
+			default: '40px'
+		}
+	},
+	computed: {
+		styles() {
+			return {
+				width: this.size,
+				height: this.size,
+				display: 'inline-block'
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/colors.scss';
+
+.spinner {
+	position: relative;
+	* {
+		line-height: 0;
+		box-sizing: border-box;
+	}
+	&:before {
+		content: '';
+		width: 100%;
+		height: 20%;
+		min-width: 5px;
+		background: #000;
+		opacity: 0.1;
+		position: absolute;
+		bottom: 0%;
+		left: 0;
+		border-radius: 50%;
+		animation: rotate-square-2-shadow .5s linear infinite;
+	}
+	&:after {
+		content: '';
+		width: 100%;
+		height: 100%;
+		background: $basePink;
+		animation: rotate-square-2-animate .5s linear infinite;
+		position: absolute;
+		bottom:40%;
+		left: 0;
+		border-radius: 3px;
+	}
+}
+
+@keyframes rotate-square-2-animate {
+	17% {
+		border-bottom-right-radius: 3px;
+	}
+	25% {
+		transform: translateY(20%) rotate(22.5deg);
+	}
+	50% {
+		transform: translateY(40%) scale(1, .9) rotate(45deg);
+		border-bottom-right-radius: 50%;
+	}
+	75% {
+		transform: translateY(20%) rotate(67.5deg);
+	}
+	100% {
+		transform: translateY(0) rotate(90deg);
+	}
+}
+@keyframes rotate-square-2-shadow {
+	0%, 100% {
+		transform: scale(1, 1);
+	}
+	50% {
+		transform: scale(1.2, 1);
+	}
+}
+</style>
-- 
cgit v1.2.3


From c2dbbe6396540ee9d76991a00f5028b49d221d0c Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 23:42:02 +0300
Subject: feat: refactor account to use vuex, fix small presentational
 components

---
 src/site/components/loading/BulmaLoading.vue | 33 ++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/site/components/loading/BulmaLoading.vue

(limited to 'src/site/components/loading')

diff --git a/src/site/components/loading/BulmaLoading.vue b/src/site/components/loading/BulmaLoading.vue
new file mode 100644
index 0000000..37cc5a5
--- /dev/null
+++ b/src/site/components/loading/BulmaLoading.vue
@@ -0,0 +1,33 @@
+<template>
+	<div class="loader-wrapper">
+		<div class="loader is-loading" />
+	</div>
+</template>
+
+<style lang="scss" scoped>
+	.loader-wrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		background: #fff;
+		opacity: 0;
+		z-index: -1;
+		transition: opacity .3s;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 6px;
+
+			.loader {
+				height: 80px;
+				width: 80px;
+			}
+
+		&.is-active {
+			opacity: 1;
+			z-index: 1;
+		}
+	}
+</style>
-- 
cgit v1.2.3


From ad852de51a0d2dd5d29c08838d5a430c58849e74 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 04:00:12 +0300
Subject: chore: linter the entire project using the new rules

---
 src/site/components/loading/CubeShadow.vue   | 17 +++++++++--------
 src/site/components/loading/Origami.vue      | 18 ++++++++++--------
 src/site/components/loading/PingPong.vue     | 26 ++++++++++++++------------
 src/site/components/loading/RotateSquare.vue | 13 +++++++------
 4 files changed, 40 insertions(+), 34 deletions(-)

(limited to 'src/site/components/loading')

diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue
index af31dac..bbfdb52 100644
--- a/src/site/components/loading/CubeShadow.vue
+++ b/src/site/components/loading/CubeShadow.vue
@@ -1,5 +1,6 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner--cube-shadow" />
 </template>
 
@@ -8,16 +9,16 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '60px'
+			default: '60px',
 		},
 		background: {
 			type: String,
-			default: '#9C27B0'
+			default: '#9C27B0',
 		},
 		duration: {
 			type: String,
-			default: '1.8s'
-		}
+			default: '1.8s',
+		},
 	},
 	computed: {
 		styles() {
@@ -25,10 +26,10 @@ export default {
 				width: this.size,
 				height: this.size,
 				backgroundColor: this.background,
-				animationDuration: this.duration
+				animationDuration: this.duration,
 			};
-		}
-	}
+		},
+	},
 };
 </script>
 
diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue
index d1b523d..cd1c087 100644
--- a/src/site/components/loading/Origami.vue
+++ b/src/site/components/loading/Origami.vue
@@ -1,7 +1,9 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner-origami">
-		<div :style="innerStyles"
+		<div
+			:style="innerStyles"
 			class="spinner-inner loading">
 			<span class="slice" />
 			<span class="slice" />
@@ -18,21 +20,21 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '40px'
-		}
+			default: '40px',
+		},
 	},
 	computed: {
 		innerStyles() {
-			let size = parseInt(this.size);
+			const size = parseInt(this.size, 10);
 			return { transform: `scale(${(size / 60)})` };
 		},
 		styles() {
 			return {
 				width: this.size,
-				height: this.size
+				height: this.size,
 			};
-		}
-	}
+		},
+	},
 };
 </script>
 
diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue
index ac33e28..d562e9f 100644
--- a/src/site/components/loading/PingPong.vue
+++ b/src/site/components/loading/PingPong.vue
@@ -1,12 +1,14 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner--ping-pong">
-		<div :style="innerStyles"
+		<div
+			:style="innerStyles"
 			class="spinner-inner">
 			<div class="board">
-				<div class="left"/>
-				<div class="right"/>
-				<div class="ball"/>
+				<div class="left" />
+				<div class="right" />
+				<div class="ball" />
 			</div>
 		</div>
 	</div>
@@ -17,22 +19,22 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '60px'
-		}
+			default: '60px',
+		},
 	},
 	computed: {
 		innerStyles() {
-			let size = parseInt(this.size);
+			const size = parseInt(this.size, 10);
 			return { transform: `scale(${size / 250})` };
 		},
 		styles() {
 			return {
 				width: this.size,
-				height: this.size
+				height: this.size,
 			};
-		}
-	}
-}
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue
index 4da8300..089e01a 100644
--- a/src/site/components/loading/RotateSquare.vue
+++ b/src/site/components/loading/RotateSquare.vue
@@ -1,5 +1,6 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner--rotate-square-2" />
 </template>
 
@@ -8,18 +9,18 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '40px'
-		}
+			default: '40px',
+		},
 	},
 	computed: {
 		styles() {
 			return {
 				width: this.size,
 				height: this.size,
-				display: 'inline-block'
+				display: 'inline-block',
 			};
-		}
-	}
+		},
+	},
 };
 </script>
 
-- 
cgit v1.2.3


From 90001c2df56d58e69fd199a518ae7f3e4ed327fc Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 24 Dec 2020 10:40:50 +0200
Subject: chore: remove trailing commas

---
 src/site/components/loading/CubeShadow.vue   | 14 +++++++-------
 src/site/components/loading/Origami.vue      | 10 +++++-----
 src/site/components/loading/PingPong.vue     | 10 +++++-----
 src/site/components/loading/RotateSquare.vue | 10 +++++-----
 4 files changed, 22 insertions(+), 22 deletions(-)

(limited to 'src/site/components/loading')

diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue
index bbfdb52..71b5da5 100644
--- a/src/site/components/loading/CubeShadow.vue
+++ b/src/site/components/loading/CubeShadow.vue
@@ -9,16 +9,16 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '60px',
+			default: '60px'
 		},
 		background: {
 			type: String,
-			default: '#9C27B0',
+			default: '#9C27B0'
 		},
 		duration: {
 			type: String,
-			default: '1.8s',
-		},
+			default: '1.8s'
+		}
 	},
 	computed: {
 		styles() {
@@ -26,10 +26,10 @@ export default {
 				width: this.size,
 				height: this.size,
 				backgroundColor: this.background,
-				animationDuration: this.duration,
+				animationDuration: this.duration
 			};
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue
index cd1c087..59c5d8f 100644
--- a/src/site/components/loading/Origami.vue
+++ b/src/site/components/loading/Origami.vue
@@ -20,8 +20,8 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '40px',
-		},
+			default: '40px'
+		}
 	},
 	computed: {
 		innerStyles() {
@@ -31,10 +31,10 @@ export default {
 		styles() {
 			return {
 				width: this.size,
-				height: this.size,
+				height: this.size
 			};
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue
index d562e9f..c04ae72 100644
--- a/src/site/components/loading/PingPong.vue
+++ b/src/site/components/loading/PingPong.vue
@@ -19,8 +19,8 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '60px',
-		},
+			default: '60px'
+		}
 	},
 	computed: {
 		innerStyles() {
@@ -30,10 +30,10 @@ export default {
 		styles() {
 			return {
 				width: this.size,
-				height: this.size,
+				height: this.size
 			};
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue
index 089e01a..7bc9bb0 100644
--- a/src/site/components/loading/RotateSquare.vue
+++ b/src/site/components/loading/RotateSquare.vue
@@ -9,18 +9,18 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '40px',
-		},
+			default: '40px'
+		}
 	},
 	computed: {
 		styles() {
 			return {
 				width: this.size,
 				height: this.size,
-				display: 'inline-block',
+				display: 'inline-block'
 			};
-		},
-	},
+		}
+	}
 };
 </script>
 
-- 
cgit v1.2.3


From fb2c27086f570fec60f4d52dcc9ca80e53186293 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Thu, 24 Dec 2020 23:45:16 +0900
Subject: Fix ESLint rules once and for all

---
 src/site/components/loading/CubeShadow.vue   | 12 ++++++------
 src/site/components/loading/Origami.vue      |  4 ++--
 src/site/components/loading/PingPong.vue     |  4 ++--
 src/site/components/loading/RotateSquare.vue |  4 ++--
 4 files changed, 12 insertions(+), 12 deletions(-)

(limited to 'src/site/components/loading')

diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue
index 71b5da5..7aeed65 100644
--- a/src/site/components/loading/CubeShadow.vue
+++ b/src/site/components/loading/CubeShadow.vue
@@ -8,16 +8,16 @@
 export default {
 	props: {
 		size: {
-			type: String,
-			default: '60px'
+			'type': String,
+			'default': '60px'
 		},
 		background: {
-			type: String,
-			default: '#9C27B0'
+			'type': String,
+			'default': '#9C27B0'
 		},
 		duration: {
-			type: String,
-			default: '1.8s'
+			'type': String,
+			'default': '1.8s'
 		}
 	},
 	computed: {
diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue
index 59c5d8f..1c7a4c3 100644
--- a/src/site/components/loading/Origami.vue
+++ b/src/site/components/loading/Origami.vue
@@ -19,8 +19,8 @@
 export default {
 	props: {
 		size: {
-			type: String,
-			default: '40px'
+			'type': String,
+			'default': '40px'
 		}
 	},
 	computed: {
diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue
index c04ae72..bab33d5 100644
--- a/src/site/components/loading/PingPong.vue
+++ b/src/site/components/loading/PingPong.vue
@@ -18,8 +18,8 @@
 export default {
 	props: {
 		size: {
-			type: String,
-			default: '60px'
+			'type': String,
+			'default': '60px'
 		}
 	},
 	computed: {
diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue
index 7bc9bb0..b7967ec 100644
--- a/src/site/components/loading/RotateSquare.vue
+++ b/src/site/components/loading/RotateSquare.vue
@@ -8,8 +8,8 @@
 export default {
 	props: {
 		size: {
-			type: String,
-			default: '40px'
+			'type': String,
+			'default': '40px'
 		}
 	},
 	computed: {
-- 
cgit v1.2.3