From cd820739534f04d210d327540e99e699a38fceaa Mon Sep 17 00:00:00 2001
From: Aylam <aylamz@posteo.net>
Date: Fri, 3 Nov 2023 20:42:23 +0200
Subject: [PATCH] Extend CW and 'Show more' buttons to post edges

---
 packages/client/src/components/MkCwButton.vue | 52 ++++---------
 .../src/components/MkShowMoreButton.vue       | 77 +++++--------------
 2 files changed, 36 insertions(+), 93 deletions(-)

diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index 18227897d..6b379f5e4 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -61,14 +61,28 @@ defineExpose({
 
 <style lang="scss" scoped>
 ._button_modern {
+	width: 100%;
 	font-weight: 700;
 	z-index: 5;
+	&.showLess {
+		position: sticky;
+		bottom: calc(var(--stickyBottom) - 1em);
+		margin: 20px 0;
+
+	}
 	> span {
-		background: var(--cwBg) !important;
+		display: inline-block;
+		padding: 0.5em 0;
+		font-size: 0.8em;
+		border-radius: 999px;
+		box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+		width: 100%;
+		background: var(--cwBg);
 		color: var(--cwFg);
 		transition:
 			background 0.2s,
 			color 0.2s;
+		
 		> span {
 			font-weight: 500;
 			&::before {
@@ -84,42 +98,6 @@ defineExpose({
 		background: var(--cwFg) !important;
 		color: var(--cwBg) !important;
 	}
-
-	&.fade {
-		display: block;
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		> span {
-			display: inline-block;
-			background: var(--panel);
-			padding: 0.4em 3em;
-			font-size: 0.8em;
-			border-radius: 999px;
-			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-		}
-		&:hover {
-			> span {
-				background: var(--panelHighlight);
-			}
-		}
-	}
-	&.showLess {
-		width: 100%;
-		position: sticky;
-		bottom: calc(var(--stickyBottom) - 1em);
-		padding: 20px;
-
-		> span {
-			display: inline-block;
-			background: var(--panel);
-			padding: 0.4em 3em;
-			font-size: 0.8em;
-			border-radius: 999px;
-			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-		}
-	}
 }
 
 ._button_alternative {
diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue
index 872ddd5ec..7fd09489f 100644
--- a/packages/client/src/components/MkShowMoreButton.vue
+++ b/packages/client/src/components/MkShowMoreButton.vue
@@ -2,7 +2,7 @@
 	<button
 		ref="el"
 		class="_button"
-		:class="[cwButton, { fade: modelValue, showLess: !modelValue }]"
+		:class="['showMoreButton', { showLess: !modelValue }]"
 		@click.stop="toggle"
 	>
 		<span>{{ modelValue ? i18n.ts.showMore : i18n.ts.showLess }}</span>
@@ -10,8 +10,7 @@
 </template>
 <script lang="ts" setup>
 import { i18n } from "@/i18n";
-import { computed, ref } from "vue";
-import {defaultStore} from "@/store";
+import { ref } from "vue";
 
 const props = defineProps<{
 	modelValue: boolean;
@@ -23,8 +22,6 @@ const emit = defineEmits<{
 	(ev: "update:modelValue", v: boolean): void;
 }>();
 
-const cwButton = computed (() => `_button_${defaultStore.state.cwStyle}`);
-
 const toggle = () => {
 	emit("update:modelValue", !props.modelValue);
 };
@@ -38,68 +35,36 @@ defineExpose({
 });
 </script>
 <style lang="scss" scoped>
-.fade {
+
+.showMoreButton {
 	display: block;
+	width: 100%;
+	padding: 20px 0;
+	margin-bottom: -10px;
+	z-index: 5;
 	position: absolute;
 	bottom: 0;
 	left: 0;
-	width: 100%;
-	padding: 20px;
-	margin-bottom: -10px;
-	z-index: 5;
-	&._button_modern {
-		> span {
-			display: inline-block;
-			background: var(--panel);
-			padding: 0.4em 3em;
-			font-size: 0.8em;
-			border-radius: 999px;
-			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-		}
-	}
-	&:not(._button_modern) {
-		> span {
-			display: inline-block;
-			background: var(--panel);
-			padding: 0.4em 1em;
-			font-size: 0.8em;
-			border-radius: 999px;
-			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-		}
+	> span {
+		display: inline-block;
+		background: var(--panel);
+		padding: 0.5em 0;
+		font-size: 0.8em;
+		border-radius: 999px;
+		box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+		width: 100%;
 	}
 	&:hover {
 		> span {
 			background: var(--panelHighlight);
 		}
 	}
-}
-.showLess {
-	width: 100%;
-	position: sticky;
-	bottom: calc(var(--stickyBottom) - 1em);
-	padding: 20px;
-	z-index: 5;
 
-	&._button_modern {
-		> span {
-			display: inline-block;
-			background: var(--panel);
-			padding: 0.4em 3em;
-			font-size: 0.8em;
-			border-radius: 999px;
-			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-		}
-	}
-
-	&:not(._button_modern) {
-		> span {
-			display: inline-block;
-			background: var(--panel);
-			padding: 6px 10px;
-			font-size: 0.8em;
-			border-radius: 999px;
-			box-shadow: 0 0 7px 7px var(--bg);
-		}
+	&.showLess {
+		width: 100%;
+		position: sticky;
+		bottom: calc(var(--stickyBottom) - 1em);
 	}
 }
+
 </style>