martin/Sykkelaksjon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some more responsive design

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/index.html
View File

@ -71,7 +71,7 @@
<th>Beskrivelse</th> <th>Beskrivelse</th>
<th>Avstand</th> <th>Avstand</th>
<template x-if="$store.state.data.unitConversionNecessary"> <template x-if="$store.state.data.unitConversionNecessary">
<th>Ekvivalent</th> <th class="removable-on-small-screen">Ekvivalent</th>
</template> </template>
<th>Fjern registrert aktivitet</th> <th>Fjern registrert aktivitet</th>
</tr> </tr>
@ -81,9 +81,9 @@
<td x-text="activity.description"></td> <td x-text="activity.description"></td>
<td x-text="`${activity.numberOfUnits} ${activity.activityType.unit}`"></td> <td x-text="`${activity.numberOfUnits} ${activity.activityType.unit}`"></td>
<template x-if="$store.state.data.unitConversionNecessary"> <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> </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> </tr>
</template> </template>
</table> </table>
@ -92,9 +92,9 @@
<div class="other-users-div"> <div class="other-users-div">
<h3>Andre aktive:</h3> <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> <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> <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> </tr>
<template x-if="$store.state.data.otherUsers.length == 0"> <template x-if="$store.state.data.otherUsers.length == 0">
<tr> <tr>
@ -113,8 +113,8 @@
<td x-text="otherUser.name"></td> <td x-text="otherUser.name"></td>
</template> </template>
<td x-text="otherUser.totalKilometers.toFixed(1)"></td> <td x-text="otherUser.totalKilometers.toFixed(1)"></td>
<td x-text="otherUser.earliestActivity"></td> <td class="removable-on-small-screen" x-text="otherUser.earliestActivity"></td>
<td x-text="otherUser.latestActivity"></td> <td class="removable-on-small-screen" x-text="otherUser.latestActivity"></td>
</tr> </tr>
</template> </template>
</template> </template>
@ -180,7 +180,7 @@
<th>Beskrivelse</th> <th>Beskrivelse</th>
<th>Avstand</th> <th>Avstand</th>
<template x-if="$store.state.data.unitConversionNecessary"> <template x-if="$store.state.data.unitConversionNecessary">
<th>Ekvivalent</th> <th class="removable-on-small-screen">Ekvivalent</th>
</template> </template>
<th>Fjern registrert aktivitet</th> <th>Fjern registrert aktivitet</th>
</tr> </tr>
@ -190,9 +190,9 @@
<td x-text="activity.description"></td> <td x-text="activity.description"></td>
<td x-text="`${activity.numberOfUnits} ${activity.activityType.unit}`"></td> <td x-text="`${activity.numberOfUnits} ${activity.activityType.unit}`"></td>
<template x-if="$store.state.data.unitConversionNecessary"> <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> </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> </tr>
</template> </template>
</table> </table>

54
client/src/style.css
View File

@ -38,19 +38,58 @@ body {
} }
} }
@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 { .register-activity-div {
border: 1px gray solid; border: 1px gray solid;
padding: 10px; padding: 10px;
line-height: 1.8; line-height: 1.8;
} }
.register-activity-div input { .remove-button-cell {
width: 200px; text-align: center;
} }
label { label {
display: inline-block; display: inline-block;
width: 200px;
} }
.submit-buttons-container { .submit-buttons-container {
@ -80,15 +119,6 @@ table,td,th {
border: 1px solid lightgray; border: 1px solid lightgray;
} }
.registered-activities-div td {
padding-right:10px;
}
.registered-activities-div td button {
margin-left:50px;
width: 100px;
}
.other-users-div { .other-users-div {
border: 1px gray solid; border: 1px gray solid;
padding: 10px; padding: 10px;