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

Created grid container to make standard activities appear on top of registered activities

Browse Source
This commit is contained in:
Martin Asprusten 2026-05-22 10:38:13 +02:00
parent 1b662ed4ea
commit eb87a831ef
2 changed files with 83 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client/index.html
View File

@ -13,8 +13,7 @@
<div x-data="{ unitType: $store.state.data.activityTypes[0]?.unit ?? 'km' }" id="content-div" style="display: none;"> <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> <h1>Velkommen, <span x-text="$store.state.data.name"></span></h1>
<div class="outer-vertical-flex"> <div class="outer-vertical-flex">
<div class="flex-container"> <div class="grid-container">
<div class="vertical-flex">
<div class="register-activity-div"> <div class="register-activity-div">
<h3>Registrer ny aktivitet:</h3> <h3>Registrer ny aktivitet:</h3>
<form id="activity-form"> <form id="activity-form">
@ -53,6 +52,16 @@
</div> </div>
</form> </form>
</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 class="registered-activities-div"> <div class="registered-activities-div">
<h3>Registrerte aktiviteter:</h3> <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: <span x-text="$store.state.data.activities.reduce((p, a) => p + a.numberOfUnits * a.activityType.conversionFactor, 0).toFixed(1)"></span> km</p>
@ -80,18 +89,6 @@
</table> </table>
</div> </div>
</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"> <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>

33
client/src/style.css
View File

@ -13,20 +13,29 @@ body {
text-align: left; text-align: left;
} }
.flex-container { .grid-container {
display: flex; display: grid;
flex-direction: row; column-gap: 20px;
flex-wrap: wrap; row-gap: 20px;
gap: 20px;
justify-content: center;
flex: auto;
} }
.vertical-flex { @media (min-width: 1000px) {
display: flex; .grid-container {
flex-direction: column; grid-template-columns: auto auto;
flex-wrap: wrap; grid-template-rows: auto auto;
gap: 20px; }
.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 { .register-activity-div {