TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-28 04:01:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

re-style template selection modals

Browse Source
This commit is contained in:
Mohit Panjwani
2020-12-22 13:46:15 +05:30
parent 1b46bddf56
commit 63094e8112
3 changed files with 15 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
resources/assets/js/components/base/modal/InvoiceTemplate.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="template-modal">
<div class="px-8 py-8 sm:p-6">
<div class="flex flex-wrap justify-start p-1 overflow-x-auto sw-scroll">
<div class="grid grid-cols-3 gap-2 p-1 overflow-x-auto sw-scroll">
<div
v-for="(template, index) in modalData"
:key="index"
@ -9,15 +9,10 @@
'border border-solid border-primary-500':
selectedTemplate === template.id,
}"
class="relative m-2 border border-gray-200 border-solid flex flex-col"
class="relative flex flex-col m-2 border border-gray-200 border-solid cursor-pointer hover:border-primary-300"
@click="selectedTemplate = template.id"
>
<img
:src="template.path"
alt="template-image"
height="200"
width="140"
@click="selectedTemplate = template.id"
/>
<img :src="template.path" alt="template-image" />
<img
v-if="selectedTemplate === template.id"
class="absolute z-10 w-5 h-5 text-primary-500"
@ -26,9 +21,10 @@
/>
<span
:class="[
'w-full p-0.5 bg-primary-100 text-xs text-center font-thin',
'w-full p-1 bg-gray-200 text-sm text-center absolute bottom-0 left-0',
{
'text-primary-500': selectedTemplate === template.id,
'text-primary-500 bg-primary-100':
selectedTemplate === template.id,
'text-gray-600': selectedTemplate != template.id,
},
]"