Some more responsive design

This commit is contained in:
Martin Asprusten
2026-05-22 11:13:29 +02:00
parent eb87a831ef
commit 368d07a0e4
2 changed files with 52 additions and 22 deletions
+10 -10
View File
@@ -71,7 +71,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>
@@ -81,9 +81,9 @@
<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>
@@ -92,9 +92,9 @@
<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>
@@ -113,8 +113,8 @@
<td x-text="otherUser.name"></td>
</template>
<td x-text="otherUser.totalKilometers.toFixed(1)"></td>
<td x-text="otherUser.earliestActivity"></td>
<td x-text="otherUser.latestActivity"></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>
@@ -180,7 +180,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>
@@ -190,9 +190,9 @@
<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>