Add payment button

This commit is contained in:
philipp lang 2021-07-04 00:39:39 +02:00
parent e12659dd7a
commit 545397809b
6 changed files with 57 additions and 5 deletions

View File

@ -1,12 +1,13 @@
.btn {
@apply px-3 py-2 uppercase no-underline text-sm rounded text-white;
@apply px-3 py-2 uppercase no-underline text-sm text-white items-center justify-center bg-primary-700 rounded;
svg {
}
&.btn-sm {
@apply text-xs !important;
@apply text-xs w-6 h-6 px-1 py-1;
svg {
@apply w-3 h-3 text-primary-100 flex-none;
}
}
&.btn-primary {
@ -15,6 +16,18 @@
@apply bg-primary-500;
}
}
&.btn-warning {
@apply bg-yellow-700;
&:hover {
@apply bg-yellow-500;
}
}
&.btn-info {
@apply bg-blue-700;
&:hover {
@apply bg-blue-500;
}
}
&.btn-danger {
@apply bg-red-700;
&:hover {

View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 20 20" id="check" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></symbol><symbol viewBox="0 0 20 20" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></symbol><symbol viewBox="0 0 512 512" id="loss" xmlns="http://www.w3.org/2000/svg"><path d="M448 281.6h-25.6c-7.68 0-12.8 5.12-12.8 12.8v115.2h51.2V294.4c0-7.68-5.12-12.8-12.8-12.8zM345.6 230.4H320c-7.68 0-12.8 5.12-12.8 12.8v166.4h51.2V243.2c0-7.68-5.12-12.8-12.8-12.8zM243.2 179.2h-25.6c-7.68 0-12.8 5.12-12.8 12.8v217.6H256V192c0-7.68-5.12-12.8-12.8-12.8zM140.8 102.4h-25.6c-7.68 0-12.8 5.12-12.8 12.8v294.4h51.2V115.2c0-7.68-5.12-12.8-12.8-12.8z"/><path d="M486.4 460.8H51.2V25.6C51.2 10.24 40.96 0 25.6 0 10.24 0 0 10.24 0 25.6v460.8C0 501.76 10.24 512 25.6 512h460.8c15.36 0 25.6-10.24 25.6-25.6 0-15.36-10.24-25.6-25.6-25.6z"/></symbol><symbol viewBox="0 0 512 512" id="user" xmlns="http://www.w3.org/2000/svg"><path d="M0 435.2V512h512v-76.8c0-171.52-512-171.52-512 0z"/><circle cx="256" cy="128" r="128"/></symbol></svg>
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 20 20" id="check" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></symbol><symbol viewBox="0 0 20 20" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></symbol><symbol viewBox="0 0 512 512" id="loss" xmlns="http://www.w3.org/2000/svg"><path d="M448 281.6h-25.6c-7.68 0-12.8 5.12-12.8 12.8v115.2h51.2V294.4c0-7.68-5.12-12.8-12.8-12.8zM345.6 230.4H320c-7.68 0-12.8 5.12-12.8 12.8v166.4h51.2V243.2c0-7.68-5.12-12.8-12.8-12.8zM243.2 179.2h-25.6c-7.68 0-12.8 5.12-12.8 12.8v217.6H256V192c0-7.68-5.12-12.8-12.8-12.8zM140.8 102.4h-25.6c-7.68 0-12.8 5.12-12.8 12.8v294.4h51.2V115.2c0-7.68-5.12-12.8-12.8-12.8z"/><path d="M486.4 460.8H51.2V25.6C51.2 10.24 40.96 0 25.6 0 10.24 0 0 10.24 0 25.6v460.8C0 501.76 10.24 512 25.6 512h460.8c15.36 0 25.6-10.24 25.6-25.6 0-15.36-10.24-25.6-25.6-25.6z"/></symbol><symbol viewBox="0 0 512 512" id="money" xmlns="http://www.w3.org/2000/svg"><path d="M330.24 94.72l46.08-53.76C391.68 25.6 381.44 0 358.4 0H153.6c-23.04 0-33.28 25.6-20.48 40.96l46.08 53.76C76.8 145.92 0 289.28 0 386.56 0 506.88 115.2 512 256 512s256-5.12 256-125.44c0-97.28-76.8-240.64-181.76-291.84zM256 281.6c10.24 0 17.92 2.56 25.6 5.12 30.72 10.24 51.2 38.4 51.2 71.68 0 33.28-20.48 61.44-51.2 71.68v30.72h-51.2v-30.72c-30.72-10.24-51.2-38.4-51.2-71.68h51.2c0 15.36 10.24 25.6 25.6 25.6s25.6-10.24 25.6-25.6c0-15.36-10.24-25.6-25.6-25.6-10.24 0-17.92-2.56-25.6-5.12-30.72-10.24-51.2-38.4-51.2-71.68 0-33.28 20.48-61.44 51.2-71.68V153.6h51.2v30.72c30.72 10.24 51.2 38.4 51.2 71.68h-51.2c0-15.36-10.24-25.6-25.6-25.6s-25.6 10.24-25.6 25.6 10.24 25.6 25.6 25.6z"/></symbol><symbol viewBox="0 0 512 512" id="pencil" xmlns="http://www.w3.org/2000/svg"><path d="M51.2 353.28L0 512l158.72-51.2zM87.16 316.492L336.96 66.69l108.61 108.61L195.77 425.102zM504.32 79.36L432.64 7.68c-10.24-10.24-25.6-10.24-35.84 0l-23.04 23.04 107.52 107.52 23.04-23.04c10.24-10.24 10.24-25.6 0-35.84z"/></symbol><symbol viewBox="0 0 512 512" id="user" xmlns="http://www.w3.org/2000/svg"><path d="M0 435.2V512h512v-76.8c0-171.52-512-171.52-512 0z"/><circle cx="256" cy="128" r="128"/></symbol></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -0,0 +1,8 @@
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M330.24,94.72l46.08-53.76C391.68,25.6,381.44,0,358.4,0H153.6c-23.04,0-33.28,25.6-20.48,40.96l46.08,53.76 C76.8,145.92,0,289.28,0,386.56C0,506.88,115.2,512,256,512s256-5.12,256-125.44C512,289.28,435.2,145.92,330.24,94.72z M256,281.6c10.24,0,17.92,2.56,25.6,5.12c30.72,10.24,51.2,38.4,51.2,71.68c0,33.28-20.48,61.44-51.2,71.68v30.72h-51.2v-30.72 c-30.72-10.24-51.2-38.4-51.2-71.68h51.2c0,15.36,10.24,25.6,25.6,25.6s25.6-10.24,25.6-25.6c0-15.36-10.24-25.6-25.6-25.6 c-10.24,0-17.92-2.56-25.6-5.12c-30.72-10.24-51.2-38.4-51.2-71.68c0-33.28,20.48-61.44,51.2-71.68V153.6h51.2v30.72 c30.72,10.24,51.2,38.4,51.2,71.68h-51.2c0-15.36-10.24-25.6-25.6-25.6s-25.6,10.24-25.6,25.6S240.64,281.6,256,281.6z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 988 B

View File

@ -0,0 +1,18 @@
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<polygon points="51.2,353.28 0,512 158.72,460.8 "/>
</g>
</g>
<g>
<g>
<rect x="89.73" y="169.097" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -95.8575 260.3719)" width="353.277" height="153.599"/>
</g>
</g>
<g>
<g>
<path d="M504.32,79.36L432.64,7.68c-10.24-10.24-25.6-10.24-35.84,0l-23.04,23.04l107.52,107.52l23.04-23.04 C514.56,104.96,514.56,89.6,504.32,79.36z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 660 B

View File

@ -13,9 +13,10 @@
<div class="px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b">Rechnung</div>
<div class="px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b">Geburtstag</div>
<div class="px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b">Eintritt</div>
<div class="px-6 py-3 border-gray-600 border-b"></div>
</header>
<inertia-link :href="`/member/${member.id}/edit`" :key="index" v-for="member, index in data.data" class="text-gray-200 transition-all duration-500 rounded flex hover:bg-gray-600">
<div v-for="member, index in data.data" class="text-gray-200 transition-all duration-300 rounded flex items-center hover:bg-gray-800">
<div class="py-1 px-6" v-text="member.firstname"></div>
<div class="py-1 px-6" v-text="member.lastname"></div>
<div class="py-1 px-6" v-text="`${member.address}`"></div>
@ -36,7 +37,11 @@
</div>
<div class="py-1 px-6" v-text="`${member.birthday_human}`"></div>
<div class="py-1 px-6" v-text="`${member.joined_at_human}`"></div>
</inertia-link>
<div class="py-1 px-6 flex">
<inertia-link :href="`/member/${member.id}/edit`" class="inline-flex btn btn-warning btn-sm"><sprite src="pencil"></sprite></inertia-link>
<inertia-link :href="`/member/${member.id}/payment`" class="inline-flex btn btn-info btn-sm"><sprite src="money"></sprite></inertia-link>
</div>
</div>
</div>

8
tailwind.config.js vendored
View File

@ -28,6 +28,14 @@ module.exports = {
gray: colors.gray,
white: colors.white,
red: colors.red,
blue: {
500: colors.blue[500],
700: colors.blue[700],
},
yellow: {
500: colors.yellow[500],
700: colors.yellow[700],
},
green: {
100: colors.green[100],
800: colors.green[800],