Stop register buttons from landing on top of each other

Stop the remove standard activity button from wrapping around and landing right next to the register button
Specify that the total sum of kilometers is bike equivalent
2026-05-22 12:48:36 +02:00 · 2026-05-22 12:41:20 +02:00 · 2026-05-22 11:33:54 +02:00 · 2026-05-22 11:24:19 +02:00 · 2026-05-22 11:13:29 +02:00 · 2026-05-22 10:38:13 +02:00
3 changed files with 198 additions and 107 deletions
@@ -13,8 +13,7 @@
    <div x-data="{ unitType: $store.state.data.activityTypes[0]?.unit ?? 'km' }" id="content-div" style="display: none;">
 		<h1>Velkommen, <span x-text="$store.state.data.name"></span></h1>
 		<div class="outer-vertical-flex">
-			<div class="flex-container">
-				<div class="vertical-flex">
+			<div class="grid-container">
 				<div class="register-activity-div">
 					<h3>Registrer ny aktivitet:</h3>
 					<form id="activity-form">
@@ -53,16 +52,40 @@
 						</div>
 					</form>
 				</div>
+				<div class="standard-activities-div">
+					<h3>Standardaktiviteter:</h3>
+					<template x-for="activityTemplate in $store.state.data.activityTemplates" :key="activityTemplate.id">
+						<p x-data="{ clicked: false }">
+							<template x-if="clicked">
+								<div class="registered-grid">
+									<button disabled="true">Tur registrert!</button>
+									<span x-text="`${activityTemplate.name}, ${activityTemplate.activityType.name.toLowerCase()}, ${activityTemplate.numberOfUnits} ${activityTemplate.activityType.unit}`" style="color: green; text-shadow: 1px 1px 2px greenyellow;"></span>
+								</div>
+							</template>
+							<template x-if="!clicked">
+								<div class="registered-grid">
+									<span>
+										<button x-on:click="$store.state.registerTemplateActivity(activityTemplate); clicked=true; setTimeout(() => {clicked = false;}, 1000)">Registrer</button>
+									</span>
+									<span x-text="`${activityTemplate.name}, ${activityTemplate.activityType.name.toLowerCase()}, ${activityTemplate.numberOfUnits} ${activityTemplate.activityType.unit}`"></span>
+									<span>
+										<button x-on:click="$store.state.deleteTemplateActivity(activityTemplate)">Fjern</button>
+									</span>
+								</div>
+							</template>
+						</p>
+					</template>
+				</div>
 				<div class="registered-activities-div">
 					<h3>Registrerte aktiviteter:</h3>
-						<p>Til sammen: <span x-text="$store.state.data.activities.reduce((p, a) => p + a.numberOfUnits * a.activityType.conversionFactor, 0).toFixed(1)"></span> km</p>
+					<p>Til sammen (sykkelekvivalent): <span x-text="$store.state.data.activities.reduce((p, a) => p + a.numberOfUnits * a.activityType.conversionFactor, 0).toFixed(1)"></span> km</p>
 					<table>
 						<tr>
 							<th>Dato</th>
 							<th>Beskrivelse</th>
 							<th>Avstand</th>
 							<template x-if="$store.state.data.unitConversionNecessary">
-									<th>Ekvivalent</th>
+								<th class="removable-on-small-screen">Ekvivalent</th>
 							</template>
 							<th>Fjern registrert aktivitet</th>
 						</tr>
@@ -72,32 +95,20 @@
 								<td x-text="activity.description"></td>
 								<td x-text="`${activity.numberOfUnits} ${activity.activityType.unit}`"></td>
 								<template x-if="$store.state.data.unitConversionNecessary">
-										<td x-text="`${activity.numberOfUnits * activity.activityType.conversionFactor} km`"></td>
+									<td class="removable-on-small-screen" x-text="`${activity.numberOfUnits * activity.activityType.conversionFactor} km`"></td>
 								</template>
-									<td><button x-on:click="$store.state.deleteActivity(activity)">Fjern</button></td>
+								<td class="remove-button-cell"><button x-on:click="$store.state.deleteActivity(activity)">Fjern</button></td>
 							</tr>
 						</template>
 					</table>
 				</div>
 			</div>
-
-				<div class="standard-activities-div">
-					<h3>Standardaktiviteter:</h3>
-					<template x-for="activityTemplate in $store.state.data.activityTemplates" :key="activityTemplate.id">
-						<p>
-							<button x-on:click="$store.state.registerTemplateActivity(activityTemplate)">Registrer</button>
-							<span x-text="`${activityTemplate.name}, ${activityTemplate.activityType.name.toLowerCase()}, ${activityTemplate.numberOfUnits} ${activityTemplate.activityType.unit}`"></span>
-							<button x-on:click="$store.state.deleteTemplateActivity(activityTemplate)">Fjern</button>
-						</p>
-					</template>
-				</div>
-			</div>
 			<div class="other-users-div">
 				<h3>Andre aktive:</h3>
 				<input type="checkbox" id="hideMeCheckbox" x-model="$store.state.data.isHidden" x-on:click="$store.state.onClickHideCheckbox" /><label id="hideMeLabel" for="hideMeCheckbox">Skjul meg fra den globale listen</label>
-				<table>
+				<table id="active-users-table">
 					<tr>
-						<th>Navn</th><th>Total avstand</th><th>Første aktivitet</th><th>Siste aktivitet</th>
+						<th>Navn</th><th>Total avstand</th><th class="removable-on-small-screen">Første aktivitet</th><th class="removable-on-small-screen">Siste aktivitet</th>
 					</tr>
 					<template x-if="$store.state.data.otherUsers.length == 0">
 						<tr>
@@ -105,12 +116,19 @@
 						</tr>
 					</template>
 					<template x-if="$store.state.data.otherUsers.length > 0">
-						<template x-for="otherUser in $store.state.data.otherUsers">
+						<template x-for="otherUser in $store.state.scoreTable">
 							<tr>
+								<template x-if="otherUser.isHidden">
+									<td>
+										<i x-text="otherUser.name"></i>
+									</td>
+								</template>
+								<template x-if="!otherUser.isHidden">
 									<td x-text="otherUser.name"></td>
-								<td x-text="otherUser.totalKilometers"></td>
-								<td x-text="otherUser.earliestActivity"></td>
-								<td x-text="otherUser.latestActivity"></td>
+								</template>
+								<td x-text="otherUser.totalKilometers.toFixed(1)"></td>
+								<td class="removable-on-small-screen" x-text="otherUser.earliestActivity"></td>
+								<td class="removable-on-small-screen" x-text="otherUser.latestActivity"></td>
 							</tr>
 						</template>
 					</template>
@@ -176,7 +194,7 @@
 										<th>Beskrivelse</th>
 										<th>Avstand</th>
 										<template x-if="$store.state.data.unitConversionNecessary">
-											<th>Ekvivalent</th>
+											<th class="removable-on-small-screen">Ekvivalent</th>
 										</template>
 										<th>Fjern registrert aktivitet</th>
 									</tr>
@@ -184,11 +202,11 @@
 										<tr>
 											<td x-text="activity.date"></td>
 											<td x-text="activity.description"></td>
-											<td x-text="`${activity.numberOfUnits.toFixed(1)} ${activity.activityType.unit}`"></td>
+											<td x-text="`${activity.numberOfUnits} ${activity.activityType.unit}`"></td>
 											<template x-if="$store.state.data.unitConversionNecessary">
-												<td x-text="`${(activity.numberOfUnits * activity.activityType.conversionFactor).toFixed(1)} km`"></td>
+												<td class="removable-on-small-screen" x-text="`${(activity.numberOfUnits * activity.activityType.conversionFactor)} km`"></td>
 											</template>
-											<td><button x-on:click="$store.state.deleteActivity(activity)">Fjern</button></td>
+											<td class="remove-button-cell"><button x-on:click="$store.state.deleteActivity(activity)">Fjern</button></td>
 										</tr>
 									</template>
 								</table>
@@ -21,9 +21,18 @@ document.getElementById("submit-activity-template-button")?.addEventListener("cl
 let loadingDiv = document.getElementById("loading-div");
 let contentDiv = document.getElementById("content-div");

+interface ScoreTableEntry {
+	name: string,
+	isHidden?: boolean,
+	totalKilometers?: number,
+	earliestActivity?: string,
+	latestActivity?: string
+}
+
 // ---------------- ALPINE STATE -----------------------
 interface AlpineState {
 	data: Sykkelaksjon,
+	scoreTable: ScoreTableEntry[],
 	registerTemplateActivity: (template: ActivityTemplate) => void,
 	deleteTemplateActivity: (template: ActivityTemplate) => void,
 	deleteActivity: (activity: Activity) => void,
@@ -52,6 +61,7 @@ let defaultData: Sykkelaksjon = {

 let alpineState: AlpineState = {
 	data: defaultData,
+	scoreTable: [],
 	registerTemplateActivity: registerTemplateActivity,
 	deleteTemplateActivity: deleteTemplateActivity,
 	deleteActivity: deleteActivity,
@@ -68,6 +78,26 @@ let alpineState: AlpineState = {
 	},
 	setServerMessage(newMessage: Sykkelaksjon) {
 		this.data = newMessage;
+
+		let scoreTable: ScoreTableEntry[] = [];
+		newMessage.otherUsers.forEach(user => scoreTable.push(user));
+		
+		let totalKilometers = newMessage.activities.reduce((sum, activity) => {
+			return sum += activity.numberOfUnits * activity.activityType.conversionFactor;
+		}, 0.0);
+		let dates = newMessage.activities.map(a => a.date).toSorted();
+		let firstDate = dates.at(0);
+		let lastDate = dates.at(dates.length - 1);
+		scoreTable.push({
+			name: newMessage.name,
+			isHidden: newMessage.isHidden,
+			totalKilometers: totalKilometers,
+			earliestActivity: firstDate,
+			latestActivity: lastDate
+		});
+
+		scoreTable.sort((a, b) => {return (b.totalKilometers ?? 0) - (a.totalKilometers ?? 0)});
+		this.scoreTable = scoreTable;
 	},
 	getServerMessage(): Sykkelaksjon {
 		return this.data;
@@ -13,20 +13,69 @@ body {
 	text-align: left;
 }

-.flex-container {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: 20px;
-	justify-content: center;
-	flex: auto;
+.grid-container {
+	display: grid;
+	column-gap: 20px;
+	row-gap: 20px;
 }

-.vertical-flex {
-	display: flex;
-	flex-direction: column;
-	flex-wrap: wrap;
-	gap: 20px;
+@media (min-width: 1000px) {
+	.grid-container {
+		grid-template-columns: auto auto;
+		grid-template-rows: auto auto;
+	}
+
+	.standard-activities-div {
+		grid-column: 2;
+		grid-row: 1 / -1;
+	}
+}
+
+@media (max-width: 999px) {
+	.grid-container {
+		grid-template-columns: auto;
+		grid-template-rows: auto auto auto;
+	}
+}
+
+@media (min-width: 700px) {
+	.register-activity-div input {
+		width: 200px;
+	}
+
+	label {
+		width: 200px;
+	}
+
+	.registered-activities-div td button {
+		width: 100px;
+	}
+
+	.registered-activities-div td {
+		padding-right:10px;
+	}
+}
+
+@media (max-width: 699px) {
+	.register-activity-div input {
+		width: 120px;
+	}
+
+	label {
+		width: 120px;
+	}
+
+	.removable-on-small-screen {
+		display: none;
+	}
+
+	.registered-activities-div td button {
+		width: 80px;
+	}
+
+	.registered-activities-div td {
+		padding-right:0px;
+	}
 }

 .register-activity-div {
@@ -35,22 +84,25 @@ body {
 	line-height: 1.8;
 }

-.register-activity-div input {
-	width: 200px;
+.registered-grid {
+	display: grid;
+	grid-template-columns: fit-content(90px) auto fit-content(90px);
+	gap: 5px;
+}
+
+.remove-button-cell {
+	text-align: center;
 }

 label {
 	display: inline-block;
-	width: 200px;
 }

 .submit-buttons-container {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	justify-content: space-between;
-	margin-left: 20px;
-	margin-right: 20px;
+	justify-content: space-around;
 }

 .standard-activities-div {
@@ -71,15 +123,6 @@ table,td,th {
 	border: 1px solid lightgray;
 }

-.registered-activities-div td {
-	padding-right:10px;
-}
-
-.registered-activities-div td button {
-	margin-left:50px;
-	width: 100px;
-}
-
 .other-users-div {
 	border: 1px gray solid;
 	padding: 10px;
Author	SHA1	Message	Date
Martin Asprusten	ce9cd823f0	Stop register buttons from landing on top of each other	2026-05-22 12:48:36 +02:00
Martin Asprusten	ef7b4bb2bd	Stop the remove standard activity button from wrapping around and landing right next to the register button	2026-05-22 12:41:20 +02:00
Martin Asprusten	1002e908fa	Specify that the total sum of kilometers is bike equivalent	2026-05-22 11:33:54 +02:00
Martin Asprusten	90ffc3a2dd	Add little effect when registering activities	2026-05-22 11:24:19 +02:00
Martin Asprusten	368d07a0e4	Some more responsive design	2026-05-22 11:13:29 +02:00
Martin Asprusten	eb87a831ef	Created grid container to make standard activities appear on top of registered activities	2026-05-22 10:38:13 +02:00
Martin Asprusten	1b662ed4ea	Sort score table so the ones with most kilometers end on top	2026-05-04 13:56:51 +02:00
Martin Asprusten	bd6477e9a4	Add own user to the score table	2026-05-04 13:54:12 +02:00
Martin Asprusten	589b8deaae	Bugfix for when checking if other user is hidden	2026-05-04 13:27:28 +02:00
Martin Asprusten	5a886c3481	Fix so that overall distances are showed with only one decimal figure	2026-05-04 13:12:59 +02:00
Martin Asprusten	aeb2b16634	Make hidden users appear in italics to administrators	2026-05-04 13:10:05 +02:00