From 8fba01dbddd46610e82cdebbc050bd0386ea62d0 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Sun, 1 Sep 2024 00:43:21 +0200
Subject: [PATCH] Improved alert list mobile layout.

---
 pages/users/@username/+Page.vue | 95 +++++++++++++++++++--------------
 1 file changed, 56 insertions(+), 39 deletions(-)

diff --git a/pages/users/@username/+Page.vue b/pages/users/@username/+Page.vue
index ef974e0..a949081 100644
--- a/pages/users/@username/+Page.vue
+++ b/pages/users/@username/+Page.vue
@@ -71,36 +71,6 @@
 						:key="`alert-${alert.id}`"
 						class="alert"
 					>
-						<div class="alert-triggers">
-							<Icon
-								v-tooltip="alert.notify ? 'Notify in traxxx' : undefined"
-								icon="bell2"
-								:class="{ trigger: alert.notify }"
-							/>
-
-							<Icon
-								v-if="alert.stashes.some((stash) => !stash.isPrimary)"
-								v-tooltip="`Add to ${alert.stashes.map((stash) => stash.name).join(', ')}`"
-								icon="folder-heart"
-								class="trigger"
-							/>
-
-							<Icon
-								v-else
-								v-tooltip="alert.stashes.length > 0 ? 'Add to Favorites' : undefined"
-								icon="heart7"
-								:class="{ trigger: alert.stashes.length > 0 }"
-							/>
-
-							<!--
-							<Icon
-								icon="envelop5"
-								title="E-mail me"
-								:class="{ trigger: alert.email }"
-							/>
-							-->
-						</div>
-
 						<div
 							class="alert-details"
 							:class="{ and: alert.and.fields, or: !alert.and.fields }"
@@ -188,16 +158,48 @@
 							</span>
 						</div>
 
-						<div class="alert-actions">
-							<span
-								class="alert-id"
-								title="Alert ID"
-							>#{{ alert.id }}</span>
+						<div class="alert-meta">
+							<div class="alert-triggers">
+								<Icon
+									v-tooltip="alert.notify ? 'Notify in traxxx' : undefined"
+									icon="bell2"
+									:class="{ trigger: alert.notify }"
+								/>
 
-							<Icon
-								icon="bin"
-								@click="removeAlert(alert)"
-							/>
+								<Icon
+									v-if="alert.stashes.some((stash) => !stash.isPrimary)"
+									v-tooltip="`Add to ${alert.stashes.map((stash) => stash.name).join(', ')}`"
+									icon="folder-heart"
+									class="trigger"
+								/>
+
+								<Icon
+									v-else
+									v-tooltip="alert.stashes.length > 0 ? 'Add to Favorites' : undefined"
+									icon="heart7"
+									:class="{ trigger: alert.stashes.length > 0 }"
+								/>
+
+								<!--
+								<Icon
+									icon="envelop5"
+									title="E-mail me"
+									:class="{ trigger: alert.email }"
+								/>
+								-->
+							</div>
+
+							<div class="alert-actions">
+								<span
+									class="alert-id"
+									title="Alert ID"
+								>#{{ alert.id }}</span>
+
+								<Icon
+									icon="bin"
+									@click="removeAlert(alert)"
+								/>
+							</div>
 						</div>
 					</li>
 				</ul>
@@ -425,6 +427,10 @@ async function removeAlert(alert) {
 	}
 }
 
+.alert-meta {
+	display: flex;
+}
+
 .alert-actions {
 	display: flex;
 	align-items: center;
@@ -461,6 +467,17 @@ async function removeAlert(alert) {
 	}
 }
 
+@media(--small-20) {
+	.alert {
+		flex-direction: column;
+	}
+
+	.alert-meta {
+		padding: .5rem 0 .75rem 0;
+		justify-content: flex-end;
+	}
+}
+
 @media(--small-30) {
 	.section-header {
 		padding: .5rem .5rem .5rem .5rem;