shrink date on message board card

NyaomiDEV · Feb 9, 2025 · e3ab0d5 · e3ab0d5
1 parent a13cf6a
commit e3ab0d5
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 9 deletions.
diff --git a/src/components/MessageBoardCard.vue b/src/components/MessageBoardCard.vue
@@ -153,7 +153,7 @@
 			<div class="flexbox">
 				<div class="subheader">
 					<span>{{ props.boardMessage.member.name }}</span>
-					<p>{{ formatDate(props.boardMessage.date, true) }}</p>
+					<p>{{ formatDate(props.boardMessage.date, "collapsed") }}</p>
 				</div>
 				<div class="contents">
 					<h1>{{ props.boardMessage.title }}</h1>
@@ -225,6 +225,10 @@
 		color: var(--ion-text-color-step-400);
 	}
 
+	ion-card .subheader p {
+		text-align: right;
+	}
+
 	ion-card .contents {
 		display: flex;
 		flex-direction: column;

diff --git a/src/components/frontingEntry/FrontingEntryLabel.vue b/src/components/frontingEntry/FrontingEntryLabel.vue
@@ -20,15 +20,15 @@
 	let intervalRef: number;
 
 	function format(startTime: Date, endTime?: Date){
-		if(!endTime) return formatDate(startTime, true);
+		if(!endTime) return formatDate(startTime, "expanded");
 
 		const start = dayjs(startTime);
 		const end = dayjs(endTime);
 
 		if(end.valueOf() - start.endOf('day').valueOf() <= 0) // same day
 			return formatDate(startTime) + "~" + formatDate(endTime);
 		
-		return formatDate(startTime, true) + " - " + formatDate(endTime, true);
+		return formatDate(startTime, "expanded") + " - " + formatDate(endTime, "expanded");
 	}
 
 	onMounted(() => {

diff --git a/src/lib/util/misc.ts b/src/lib/util/misc.ts
@@ -93,9 +93,9 @@ export async function decompressGzip(data: Uint8Array) {
 	return result;
 }
 
-export function formatDate(date: Date, expanded?: boolean){
-	if(expanded)
-		return dayjs(date).format(`LL, ${appConfig.locale.twelveHourClock ? 'hh:mm A' : "HH:mm"}`);
+export function formatDate(date: Date, withDate?: "collapsed" | "expanded"){
+	if(withDate)
+		return dayjs(date).format(`${withDate == "expanded" ? "LL" : "ll"}, ${appConfig.locale.twelveHourClock ? 'hh:mm A' : "HH:mm"}`);
 	return dayjs(date).format(`${appConfig.locale.twelveHourClock ? 'hh:mm A' : "HH:mm"}`);
 }
 

diff --git a/src/modals/FrontingEntryEdit.vue b/src/modals/FrontingEntryEdit.vue
@@ -151,7 +151,7 @@
 					<IonItem button @click="$refs.startTimePicker?.$el.present()">
 						<IonLabel>
 							<h2>{{ $t("frontHistory:edit.startTime") }}</h2>
-							<p>{{ formatDate(frontingEntry.startTime, true) }}</p>
+							<p>{{ formatDate(frontingEntry.startTime, "expanded") }}</p>
 						</IonLabel>
 						<DatePopupPicker
 							v-model="frontingEntry.startTime"
@@ -170,7 +170,7 @@
 					<IonItem button v-if="frontingEntry.endTime" @click="$refs.endTimePicker?.$el.present()">
 						<IonLabel>
 							<h2>{{ $t("frontHistory:edit.endTime") }}</h2>
-							<p>{{ formatDate(frontingEntry.endTime, true) }}</p>
+							<p>{{ formatDate(frontingEntry.endTime, "expanded") }}</p>
 						</IonLabel>
 						<DatePopupPicker
 							v-model="frontingEntry.endTime"

diff --git a/src/views/edit/MemberEdit.vue b/src/views/edit/MemberEdit.vue
@@ -302,7 +302,7 @@
 				</IonItem>
 				<IonItem v-if="member.dateCreated" button @click="copyIdToClipboard">
 					<IonLabel>
-						<p>{{ $t("members:edit.dateCreated", { dateCreated: formatDate(member.dateCreated, true) }) }}</p>
+						<p>{{ $t("members:edit.dateCreated", { dateCreated: formatDate(member.dateCreated, "expanded") }) }}</p>
 					</IonLabel>
 				</IonItem>
 			</IonList>