Created grid container to make standard activities appear on top of registered activities
This commit is contained in:
Martin Asprusten
parent
1b662ed4ea
commit
eb87a831ef
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user