Cleaning up output CSS

WesCook · Oct 18, 2024 · 5cf0bb3 · 5cf0bb3
1 parent 08d45f0
commit 5cf0bb3
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 86 deletions.
diff --git a/src/components/BingoOutputChecklist.vue b/src/components/BingoOutputChecklist.vue
@@ -34,6 +34,7 @@
 			<CopyToClipboard
 				:text="output"
 				alignment="right"
+				style="margin-left: auto;"
 			/>
 		</div>
 
@@ -44,31 +45,3 @@
 		></textarea>
 	</div>
 </template>
-
-<style scoped>
-	.textarea {
-		display: block;
-		width: 100%;
-		min-width: 100%;
-		max-width: 100%;
-		height: 140px;
-		min-height: 100px;
-		max-height: 600px;
-		padding: 10px;
-		font-family: monospace;
-		font-size: 0.9em;
-		transition: none;
-		margin-bottom: 10px;
-	}
-
-	.header {
-		display: flex;
-		align-items: center;
-		justify-content: start;
-		gap: 5px;
-		margin-bottom: 0.6em;
-	}
-	.header div:last-child {
-		margin-left: auto;
-	}
-</style>
diff --git a/src/components/BingoOutputContainer.vue b/src/components/BingoOutputContainer.vue
@@ -97,4 +97,26 @@
 		padding: 10px;
 		border-radius: 0 0 10px 10px;
 	}
+
+	.loaded-component :deep(.header) {
+		display: flex;
+		align-items: center;
+		justify-content: start;
+		gap: 5px;
+		margin-bottom: 0.6em;
+	}
+
+	.loaded-component :deep(.textarea) {
+		display: block;
+		width: 100%;
+		min-width: 100%;
+		max-width: 100%;
+		height: 140px;
+		min-height: 100px;
+		max-height: 600px;
+		padding: 10px;
+		font-family: monospace;
+		font-size: 0.9em;
+		transition: none;
+	}
 </style>
diff --git a/src/components/BingoOutputPlaintext.vue b/src/components/BingoOutputPlaintext.vue
@@ -39,6 +39,7 @@
 			<CopyToClipboard
 				:text="output"
 				alignment="right"
+				style="margin-left: auto;"
 			/>
 		</div>
 
@@ -49,31 +50,3 @@
 		></textarea>
 	</div>
 </template>
-
-<style scoped>
-	.textarea {
-		display: block;
-		width: 100%;
-		min-width: 100%;
-		max-width: 100%;
-		height: 140px;
-		min-height: 100px;
-		max-height: 600px;
-		padding: 10px;
-		font-family: monospace;
-		font-size: 0.9em;
-		transition: none;
-		margin-bottom: 10px;
-	}
-
-	.header {
-		display: flex;
-		align-items: center;
-		justify-content: start;
-		gap: 5px;
-		margin-bottom: 0.6em;
-	}
-	.header div:last-child {
-		margin-left: auto;
-	}
-</style>
diff --git a/src/components/BingoOutputTable.vue b/src/components/BingoOutputTable.vue
@@ -108,6 +108,7 @@
 			<CopyToClipboard
 				:text="output"
 				alignment="right"
+				style="margin-left: auto;"
 			/>
 		</div>
 
@@ -118,31 +119,3 @@
 		></textarea>
 	</div>
 </template>
-
-<style scoped>
-	.textarea {
-		display: block;
-		width: 100%;
-		min-width: 100%;
-		max-width: 100%;
-		height: 140px;
-		min-height: 100px;
-		max-height: 600px;
-		padding: 10px;
-		font-family: monospace;
-		font-size: 0.9em;
-		transition: none;
-		margin-bottom: 10px;
-	}
-
-	.header {
-		display: flex;
-		align-items: center;
-		justify-content: start;
-		gap: 5px;
-		margin-bottom: 0.6em;
-	}
-	.header div:last-child {
-		margin-left: auto;
-	}
-</style>
diff --git a/src/components/CopyToClipboard.vue b/src/components/CopyToClipboard.vue
@@ -30,10 +30,12 @@
 </script>
 
 <template>
-	<div class="wrapper">
+	<div
+		class="wrapper"
+		:data-align="props.alignment"
+	>
 		<button
 			class="copy-btn"
-			:style="{ order: props.alignment === 'left' ? 0 : 1 }"
 			@click="copy"
 		>
 			📋&#xFE0E; &nbsp;Copy
@@ -50,6 +52,9 @@
 		display: inline-flex;
 		gap: 10px;
 	}
+	.wrapper[data-align="right"] {
+		flex-direction: row-reverse;
+	}
 
 	.copy-btn {
 		all: unset;
@@ -60,6 +65,7 @@
 
 	.status {
 		display: flex;
+		justify-content: center;
 		align-items: center;
 		animation-name: fadeOut;
 		animation-duration: 3.5s;
@@ -69,6 +75,13 @@
 		visibility: hidden;
 		opacity: 0;
 	}
+
+	@media (width < 600px) {
+		.wrapper {
+			flex-direction: column !important;
+		}
+	}
+
 	@keyframes fadeOut {
 		0% {
 			visibility: hidden;