merge tags

resources/css/app.css

@@ -7,3 +7,4 @@
 @import "buttons";
 @import "table";
 @import "sidebar";
+@import "bool";

resources/css/bool.css

@@ -0,0 +1,26 @@
+.bool {
+    @apply rounded-full text-xs w-5 h-5 flex items-center justify-center leading-none;
+    &.enabled {
+        @apply bg-green-800 text-red-100;
+    }
+    &.disabled {
+        @apply bg-red-800 text-green-100;
+    }
+    svg {
+        @apply w-2 h-2;
+    }
+}
+
+
+.bool-row {
+    @apply flex;
+    .bool {
+        @apply rounded-none;
+        &:last-child {
+            @apply rounded-r-full;
+        }
+        &:first-child {
+            @apply rounded-l-full;
+        }
+    }
+}

resources/js/components/VBool.vue

@@ -1,6 +1,7 @@
 <template>
-    <div class="rounded-full w-4 h-4 flex items-center justify-center leading-none" :class="{'bg-green-800': value, 'bg-red-800': !value}">
-        <sprite :class="{'text-green-100': value, 'text-red-100': !value}" class="w-2 h-2" :src="value ? 'check' : 'close'"></sprite>
+    <div class="bool" :class="value ? 'enabled' : 'disabled'">
+        <sprite v-if="!$slots.default" :src="value ? 'check' : 'close'"></sprite>
+        <slot></slot>
     </div>
 </template>
 

resources/js/views/member/Index.vue

@@ -8,9 +8,7 @@
                 <div>Straße</div>
                 <div>PLZ</div>
                 <div>Ort</div>
-                <div>Mittendrin</div>
-                <div>Nami</div>
-                <div>Check</div>
+                <div>Tags</div>
                 <div>Rechnung</div>
                 <div>Geburtstag</div>
                 <div>Eintritt</div>
@@ -24,13 +22,11 @@
                 <div v-text="`${member.zip}`"></div>
                 <div v-text="`${member.location}`"></div>
                 <div>
-                    <v-bool v-model="member.send_newspaper"></v-bool>
-                </div>
-                <div>
-                    <v-bool v-model="member.has_nami"></v-bool>
-                </div>
-                <div>
-                    <v-bool v-model="member.is_confirmed"></v-bool>
+                    <div class="bool-row">
+                        <v-bool v-model="member.send_newspaper">M</v-bool>
+                        <v-bool v-model="member.has_nami">N</v-bool>
+                        <v-bool v-model="member.is_confirmed">C</v-bool>
+                    </div>
                 </div>
                 <div>
                     <div class="py-1 rounded-full flex text-xs items-center justify-center leading-none bg-primary-900" v-text="member.bill_kind_name" v-if="member.bill_kind_name"></div>