add mobile layout

resources/css/buttons.css

@@ -50,4 +50,3 @@
         @apply opacity-50;
     }
 }
-

resources/js/app.js

@@ -7,6 +7,7 @@ import FSwitch from './components/FSwitch.vue';
 import FSelect from './components/FSelect.vue';
 import FTextarea from './components/FTextarea.vue';
 import VPages from './components/VPages.vue';
+import VLabel from './components/VLabel.vue';
 import VBool from './components/VBool.vue';
 import AppLayout from './layouts/AppLayout.vue';
 import VTooltip from 'v-tooltip';
@@ -21,6 +22,7 @@ Vue.component('f-textarea', FTextarea);
 Vue.component('SvgSprite', SvgSprite);
 Vue.component('VPages', VPages);
 Vue.component('v-bool', VBool);
+Vue.component('v-label', VLabel);
 
 const el = document.getElementById('app');
 

resources/js/components/VLabel.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="flex justify-center">
+        <div class="btn btn-sm label primary" v-text="value" v-if="value"></div>
+        <div class="text-xs" v-text="fallback" v-else></div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {},
+        fallback: {},
+    },
+};
+</script>

resources/js/views/member/AgeGroups.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="flex gap-1 justify-center items-center">
         <svg-sprite
-            class="w-3 h-3 flex-none"
+            class="flex-none"
             v-if="member.is_leader"
-            :class="ageColors.leiter"
+            :class="[ageColors.leiter, iconClass]"
             src="lilie"
         ></svg-sprite>
         <svg-sprite
-            class="w-3 h-3 flex-none"
+            class="flex-none"
             v-if="member.age_group_icon"
-            :class="ageColors[member.age_group_icon]"
+            :class="[ageColors[member.age_group_icon], iconClass]"
             src="lilie"
         ></svg-sprite>
     </div>
@@ -30,6 +30,9 @@ export default {
         };
     },
     props: {
+        iconClass: {
+            default: 'w-3 h-3',
+        },
         member: {
             required: true,
         },

resources/js/views/member/Box.vue

@@ -1,6 +1,9 @@
 <template>
     <section class="bg-gray-800 p-3 rounded-lg flex flex-col">
-        <heading class="col-span-full" v-if="heading">{{ heading }}</heading>
+        <div class="flex items-center">
+            <heading class="col-span-full" v-if="heading">{{ heading }}</heading>
+            <slot name="in-title"></slot>
+        </div>
         <main :class="{'mt-3': heading, 'containerClass': true}">
             <slot></slot>
         </main>

resources/js/views/member/VIndex.vue

@@ -7,7 +7,7 @@
             :bill-kinds="billKinds"
         ></member-filter>
 
-        <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">
+        <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm hidden md:table">
             <thead>
                 <th></th>
                 <th>Nachname</th>
@@ -28,23 +28,10 @@
                 <td><tags :member="member"></tags></td>
                 <td class="hidden xl:table-cell" v-text="member.age"></td>
                 <td class="hidden xl:table-cell" v-show="hasModule('bill')">
-                    <div class="flex justify-center">
+                    <v-label :value="member.bill_kind_name" fallback="kein"></v-label>
-                        <div
-                            class="btn btn-sm label primary"
-                            v-text="member.bill_kind_name"
-                            v-if="member.bill_kind_name"
-                        ></div>
-                        <div class="text-xs" v-else>Kein</div>
-                    </div>
                 </td>
                 <td v-show="hasModule('bill')">
-                    <div class="flex justify-center">
+                    <v-label :value="member.pending_payment" fallback="---"></v-label>
-                        <div
-                            class="btn btn-sm label primary"
-                            v-show="member.pending_payment"
-                            v-text="member.pending_payment"
-                        ></div>
-                    </div>
                 </td>
                 <td>
                     <div class="flex space-x-1">
@@ -102,6 +89,29 @@
             </tr>
         </table>
 
+        <div class="md:hidden p-3 grid gap-3">
+            <box class="relative" :heading="member.fullname" v-for="(member, index) in data.data" :key="index">
+                <div slot="in-title">
+                    <age-groups class="ml-2" :member="member" icon-class="w-4 h-4"></age-groups>
+                </div>
+                <div class="text-xs text-gray-200" v-text="member.full_address"></div>
+                <div class="flex items-center mt-1 space-x-2">
+                    <tags :member="member"></tags>
+                    <v-label
+                        class="text-gray-100"
+                        v-show="hasModule('bill')"
+                        :value="member.pending_payment"
+                        fallback=""
+                    ></v-label>
+                </div>
+                <div class="absolute right-0 top-0 h-full flex items-center mr-2">
+                    <i-link :href="member.links.show" v-tooltip="`Details`"
+                        ><svg-sprite src="chevron-down" class="w-6 h-6 text-teal-100 -rotate-90"></svg-sprite
+                    ></i-link>
+                </div>
+            </box>
+        </div>
+
         <div class="px-6">
             <v-pages class="mt-4" :value="data.meta" :only="['data']"></v-pages>
         </div>
@@ -155,6 +165,7 @@ export default {
         MemberCourses,
         'age-groups': () => import(/* webpackChunkName: "member" */ './AgeGroups'),
         'tags': () => import(/* webpackChunkName: "member" */ './Tags'),
+        'box': () => import(/* webpackChunkName: "member" */ './Box'),
     },
 
     methods: {