From eb87a831efe01b57fdc551b1c3bd02629f7f579f Mon Sep 17 00:00:00 2001
From: Martin Asprusten <martin.asprusten@ffi.no>
Date: Fri, 22 May 2026 10:38:13 +0200
Subject: [PATCH] Created grid container to make standard activities appear on
 top of registered activities

---
 client/index.html    | 127 +++++++++++++++++++++----------------------
 client/src/style.css |  33 +++++++----
 2 files changed, 83 insertions(+), 77 deletions(-)

diff --git a/client/index.html b/client/index.html
index a654157..78c253d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -13,74 +13,45 @@
     <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="register-activity-div">
-						<h3>Registrer ny aktivitet:</h3>
-						<form id="activity-form">
-							<div class="activity-type-div">
-								<label for="activity-type">Type aktivitet: </label>
-								<template x-if="$store.state.data.activityTypes.length > 1">
-									<select name="activity-type" id="activity-type" x-on:change="unitType = event.target[event.target.selectedIndex].dataset.unit;">
-										<template x-for="activityType in $store.state.data.activityTypes" :key="activityType.id">
-											<option x-text="activityType.name" x-bind:value="activityType.id" x-bind:data-unit="activityType.unit"></option>
-										</template>
-									</select>
-								</template>
-								<template x-if="$store.state.data.activityTypes.length == 1">
-									<span><span x-text="$store.state.data.activityTypes[0].name"></span><input type="hidden" name="activity-type" x-bind:value="$store.state.data.activityTypes[0].id" /></span>
-								</template>
-							</div>
-							
-							<div class="distance-div">
-								<label for="activity-distance">Avstand: </label>
-								<input id="activity-distance" name="activity-distance" type="number" min="0" step="0.1" />
-								<span x-text="unitType"></span>
-							</div>
-
-							<div class="description-div">
-								<label for="activity-description">Beskrivelse:</label>
-								<input type="text" id="activity-description" name="activity-description" />
-							</div>
-
-							<div class="date-div">
-								<label for="activity-date">Dato:</label>
-								<input type="date" id="activity-date" name="activity-date" />
-							</div>
-							<div class="submit-buttons-container">
-								<button id="submit-activity-button">Registrer aktivitet</button>
-								<button id="submit-activity-template-button">Legg til som standardaktivitet</button>
-							</div>
-						</form>
-					</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>
-						<table>
-							<tr>
-								<th>Dato</th>
-								<th>Beskrivelse</th>
-								<th>Avstand</th>
-								<template x-if="$store.state.data.unitConversionNecessary">
-									<th>Ekvivalent</th>
-								</template>
-								<th>Fjern registrert aktivitet</th>
-							</tr>
-							<template x-for="activity in $store.state.data.activities">
-								<tr>
-									<td x-text="activity.date"></td>
-									<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>
+			<div class="grid-container">
+				<div class="register-activity-div">
+					<h3>Registrer ny aktivitet:</h3>
+					<form id="activity-form">
+						<div class="activity-type-div">
+							<label for="activity-type">Type aktivitet: </label>
+							<template x-if="$store.state.data.activityTypes.length > 1">
+								<select name="activity-type" id="activity-type" x-on:change="unitType = event.target[event.target.selectedIndex].dataset.unit;">
+									<template x-for="activityType in $store.state.data.activityTypes" :key="activityType.id">
+										<option x-text="activityType.name" x-bind:value="activityType.id" x-bind:data-unit="activityType.unit"></option>
 									</template>
-									<td><button x-on:click="$store.state.deleteActivity(activity)">Fjern</button></td>
-								</tr>
+								</select>
 							</template>
-						</table>
-					</div>
-				</div>
+							<template x-if="$store.state.data.activityTypes.length == 1">
+								<span><span x-text="$store.state.data.activityTypes[0].name"></span><input type="hidden" name="activity-type" x-bind:value="$store.state.data.activityTypes[0].id" /></span>
+							</template>
+						</div>
 
+						<div class="distance-div">
+							<label for="activity-distance">Avstand: </label>
+							<input id="activity-distance" name="activity-distance" type="number" min="0" step="0.1" />
+							<span x-text="unitType"></span>
+						</div>
+
+						<div class="description-div">
+							<label for="activity-description">Beskrivelse:</label>
+							<input type="text" id="activity-description" name="activity-description" />
+						</div>
+
+						<div class="date-div">
+							<label for="activity-date">Dato:</label>
+							<input type="date" id="activity-date" name="activity-date" />
+						</div>
+						<div class="submit-buttons-container">
+							<button id="submit-activity-button">Registrer aktivitet</button>
+							<button id="submit-activity-template-button">Legg til som standardaktivitet</button>
+						</div>
+					</form>
+				</div>
 				<div class="standard-activities-div">
 					<h3>Standardaktiviteter:</h3>
 					<template x-for="activityTemplate in $store.state.data.activityTemplates" :key="activityTemplate.id">
@@ -91,6 +62,32 @@
 						</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>
+					<table>
+						<tr>
+							<th>Dato</th>
+							<th>Beskrivelse</th>
+							<th>Avstand</th>
+							<template x-if="$store.state.data.unitConversionNecessary">
+								<th>Ekvivalent</th>
+							</template>
+							<th>Fjern registrert aktivitet</th>
+						</tr>
+						<template x-for="activity in $store.state.data.activities">
+							<tr>
+								<td x-text="activity.date"></td>
+								<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>
+								</template>
+								<td><button x-on:click="$store.state.deleteActivity(activity)">Fjern</button></td>
+							</tr>
+						</template>
+					</table>
+				</div>
 			</div>
 			<div class="other-users-div">
 				<h3>Andre aktive:</h3>
diff --git a/client/src/style.css b/client/src/style.css
index 289808c..9762479 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -13,20 +13,29 @@ 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;
+	}
 }
 
 .register-activity-div {