torsten/trainingstagebuch
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add mobile tab navigation to DiaryView for improved user experience

Browse Source 
This commit introduces a mobile-friendly tab navigation system in the DiaryView component, allowing users to switch between 'Trainingsplan', 'Teilnehmer', and 'Aktivitäten' seamlessly. The active tab state is managed with a new reactive property, enhancing the overall usability of the application on mobile devices.
This commit is contained in:
Torsten Schulz (local)
2025-11-13 17:34:10 +01:00
parent 156f4d6921
commit 8d17cad299
1 changed files with 36 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/views/DiaryView.vue
View File

@@ -55,8 +55,32 @@
</form>
</div>
<div v-if="date !== 'new' && date !== null" style="overflow: visible">
<!-- Tab-Navigation für Mobile -->
<div class="mobile-tabs">
<button
class="tab-button"
:class="{ active: activeTab === 'plan' }"
@click="activeTab = 'plan'"
>
Trainingsplan
</button>
<button
class="tab-button"
:class="{ active: activeTab === 'members' }"
@click="activeTab = 'members'"
>
Teilnehmer
</button>
<button
class="tab-button"
:class="{ active: activeTab === 'activities' }"
@click="activeTab = 'activities'"
>
Aktivitäten
</button>
</div>
<div class="columns">
<div class="column">
<div class="column" :class="{ 'mobile-tab-content': true, 'active': activeTab === 'plan' }">
<h3 v-if="showGeneralData">Gruppenverwaltung</h3>
<div v-if="showGeneralData">
<h4>Vorhandene Gruppen</h4>
@@ -366,28 +390,15 @@
herunterladen</button>
</div>
</div>
<div class="column" style="padding-bottom:4em">
<div>
<button @click="addAccident">Unfall buchen</button>
<div v-if="accidents.length > 0">
<div class="column mobile-sidebar" :class="{ 'mobile-tab-content': true, 'active': activeTab === 'members' || activeTab === 'activities' }" style="padding-bottom:4em">
<!-- Mobile: Nur Mitglieder-Tab -->
<div class="mobile-tab-section" v-show="activeTab === 'members'">
<div>
<button @click="addAccident">Unfall buchen</button>
<div v-if="accidents.length > 0">
</div>
</div>
</div>
<h3 class="clickable" @click="toggleActivitiesBox">Aktivitäten <span>{{ showActivitiesBox ? '-' :
'+' }}</span></h3>
<div v-if="showActivitiesBox" class="collapsible-box">
<textarea v-model="newActivity"></textarea>
<button @click="addActivity">Aktivität hinzufügen</button>
<ul>
<li v-for="activity in activities" :key="activity.id">
{{ activity.description }}
</li>
</ul>
<multiselect v-model="selectedActivityTags" :options="availableTags"
placeholder="Tags auswählen" label="name" track-by="id" multiple :close-on-select="true"
@tag="addNewTag" @remove="removeActivityTag" :allow-empty="false"
@keydown.enter.prevent="addNewTagFromInput" />
</div>
<h3>Teilnehmer ({{ participants.length }})</h3>
<h3>Teilnehmer ({{ participants.length }})</h3>
<ul>
<li v-for="member in sortedMembers()" :key="member.id" class="checkbox-item participant-row"
:class="{
@@ -726,7 +737,9 @@ export default {
gender: ''
},
// Court Drawing Dialog
showDrawingDialog: false
showDrawingDialog: false,
// Tab-Navigation für Mobile
activeTab: 'plan' // 'plan', 'members', 'activities'
};
},
watch: {