Add mobile tables to member detail page
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
4850f4ef5a
commit
5a97d0c84d
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<section class="bg-gray-800 p-3 rounded-lg flex flex-col">
|
||||
<section
|
||||
class="p-3 rounded-lg flex flex-col"
|
||||
:class="{'bg-gray-800': second === false, 'bg-gray-700': second === true}"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<heading class="col-span-full" v-if="heading">{{ heading }}</heading>
|
||||
<slot name="in-title"></slot>
|
||||
|
@ -16,6 +19,10 @@ export default {
|
|||
heading: {
|
||||
type: String,
|
||||
},
|
||||
second: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
containerClass: {
|
||||
default: function () {
|
||||
return '';
|
||||
|
|
|
@ -26,16 +26,16 @@
|
|||
</tabs>
|
||||
</box>
|
||||
|
||||
<box heading="Ausbildungen" class="area-courses hidden 2xl:block">
|
||||
<courses :inner="inner"></courses>
|
||||
<box heading="Ausbildungen" class="area-courses">
|
||||
<courses :value="inner.courses"></courses>
|
||||
</box>
|
||||
|
||||
<box heading="Mitgliedschaften" class="area-memberships hidden 2xl:block">
|
||||
<memberships :inner="inner"></memberships>
|
||||
<box heading="Mitgliedschaften" class="area-memberships">
|
||||
<memberships :value="inner.memberships"></memberships>
|
||||
</box>
|
||||
|
||||
<box heading="Zahlungen" class="area-payments hidden 2xl:block">
|
||||
<payments :inner="inner"></payments>
|
||||
<box heading="Zahlungen" class="area-payments">
|
||||
<payments :value="inner.payments"></payments>
|
||||
</box>
|
||||
|
||||
<box heading="Karte" container-class="grow" class="area-map hidden 2xl:block">
|
||||
|
@ -97,7 +97,10 @@ export default {
|
|||
.this-grid {
|
||||
grid-template-areas:
|
||||
'stammkontakt'
|
||||
'praesystem';
|
||||
'praesystem'
|
||||
'courses'
|
||||
'memberships'
|
||||
'payments';
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@media screen and (min-width: 1536px) {
|
||||
|
|
|
@ -4,8 +4,8 @@
|
|||
cellspacing="0"
|
||||
cellpadding="0"
|
||||
border="0"
|
||||
class="custom-table overflow-auto custom-table-sm text-sm"
|
||||
v-if="inner.courses.length"
|
||||
class="hidden md:table custom-table overflow-auto custom-table-sm text-sm"
|
||||
v-if="inner.length"
|
||||
>
|
||||
<thead>
|
||||
<th>Datum</th>
|
||||
|
@ -13,7 +13,7 @@
|
|||
<th>Veranstaltung</th>
|
||||
<th>Organisator</th>
|
||||
</thead>
|
||||
<tr v-for="(course, index) in inner.courses" :key="index">
|
||||
<tr v-for="(course, index) in inner" :key="index">
|
||||
<td v-text="course.completed_at_human"></td>
|
||||
<td v-text="course.course.short_name"></td>
|
||||
<td v-text="course.event_name"></td>
|
||||
|
@ -21,13 +21,37 @@
|
|||
</tr>
|
||||
</table>
|
||||
<div class="py-3 text-gray-400 text-center" v-else>Keine Ausbildungen vorhanden</div>
|
||||
<div class="md:hidden grid gap-3">
|
||||
<box
|
||||
class="relative"
|
||||
:heading="course.course.short_name"
|
||||
v-for="(course, index) in inner"
|
||||
:key="index"
|
||||
second
|
||||
>
|
||||
<div class="text-xs text-gray-200" v-text="course.event_name"></div>
|
||||
<div class="text-xs text-gray-200" v-text="course.completed_at_human"></div>
|
||||
<div class="text-xs text-gray-200" v-text="course.organizer"></div>
|
||||
</box>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
inner: [],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
box: () => import(/* webpackChunkName: "member" */ '../Box'),
|
||||
},
|
||||
props: {
|
||||
inner: {},
|
||||
value: {},
|
||||
},
|
||||
created() {
|
||||
this.inner = this.value;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -1,24 +1,55 @@
|
|||
<template>
|
||||
<div>
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="custom-table overflow-auto custom-table-sm text-sm">
|
||||
<table
|
||||
cellspacing="0"
|
||||
cellpadding="0"
|
||||
border="0"
|
||||
class="hidden md:table custom-table overflow-auto custom-table-sm text-sm"
|
||||
>
|
||||
<thead>
|
||||
<th>Tätigkeit</th>
|
||||
<th>Untertätigkeit</th>
|
||||
<th>Datum</th>
|
||||
</thead>
|
||||
<tr v-for="(membership, index) in inner.memberships" :key="index">
|
||||
<tr v-for="(membership, index) in inner" :key="index">
|
||||
<td v-text="membership.activity_name"></td>
|
||||
<td v-text="membership.subactivity_name"></td>
|
||||
<td v-text="membership.human_date"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="md:hidden grid gap-3">
|
||||
<box
|
||||
class="relative"
|
||||
:heading="membership.activity_name"
|
||||
v-for="(membership, index) in inner"
|
||||
:key="index"
|
||||
second
|
||||
>
|
||||
<div class="text-xs text-gray-200" v-text="membership.subactivity_name"></div>
|
||||
<div class="text-xs text-gray-200" v-text="membership.human_date"></div>
|
||||
</box>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
inner: [],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
inner: {},
|
||||
value: {},
|
||||
},
|
||||
|
||||
components: {
|
||||
box: () => import(/* webpackChunkName: "member" */ '../Box'),
|
||||
},
|
||||
|
||||
created() {
|
||||
this.inner = this.value;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -1,22 +1,48 @@
|
|||
<template>
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm text-sm">
|
||||
<thead>
|
||||
<th>Tätigkeit</th>
|
||||
<th>Untertätigkeit</th>
|
||||
<th>Datum</th>
|
||||
</thead>
|
||||
<tr v-for="(membership, index) in inner.memberships" :key="index">
|
||||
<td v-text="membership.activity_name"></td>
|
||||
<td v-text="membership.subactivity_name"></td>
|
||||
<td v-text="membership.human_date"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div>
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="hidden md:table custom-table custom-table-sm text-sm">
|
||||
<thead>
|
||||
<th>Nr</th>
|
||||
<th>Beitrag</th>
|
||||
<th>Status</th>
|
||||
</thead>
|
||||
<tr v-for="(payment, index) in inner" :key="index">
|
||||
<td v-text="payment.nr"></td>
|
||||
<td v-text="`${payment.subscription.name} (${payment.subscription.amount_human})`"></td>
|
||||
<td v-text="payment.status_name"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="md:hidden grid gap-3">
|
||||
<box class="relative" :heading="payment.nr" v-for="(payment, index) in inner" :key="index" second>
|
||||
<div
|
||||
class="text-xs text-gray-200"
|
||||
v-text="`${payment.subscription.name} (${payment.subscription.amount_human})`"
|
||||
></div>
|
||||
<div class="text-xs text-gray-200" v-text="payment.status_name"></div>
|
||||
</box>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
inner: [],
|
||||
};
|
||||
},
|
||||
|
||||
props: {
|
||||
inner: {},
|
||||
value: {},
|
||||
},
|
||||
|
||||
components: {
|
||||
box: () => import(/* webpackChunkName: "member" */ '../Box'),
|
||||
},
|
||||
|
||||
created() {
|
||||
this.inner = this.value;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue