TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-28 12:11:08 -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

1
resources/assets/js/components/base/modal/BaseModal.vue
View File

@ -15,6 +15,7 @@
</sw-modal> </sw-modal>
</div> </div>
</template> </template>
<script> <script>
import { XIcon } from '@vue-hero-icons/solid' import { XIcon } from '@vue-hero-icons/solid'
import { mapActions, mapGetters } from 'vuex' import { mapActions, mapGetters } from 'vuex'

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

@ -1,7 +1,7 @@
<template> <template>
<div class="template-modal"> <div class="template-modal">
<div class="px-8 py-8 sm:p-6"> <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 <div
v-for="(template, index) in modalData" v-for="(template, index) in modalData"
:key="index" :key="index"
@ -9,15 +9,10 @@
'border border-solid border-primary-500': 'border border-solid border-primary-500':
selectedTemplate === template.id, 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 <img :src="template.path" alt="template-image" />
:src="template.path"
alt="template-image"
height="200"
width="140"
@click="selectedTemplate = template.id"
/>
<img <img
v-if="selectedTemplate === template.id" v-if="selectedTemplate === template.id"
class="absolute z-10 w-5 h-5 text-primary-500" class="absolute z-10 w-5 h-5 text-primary-500"
@ -26,9 +21,10 @@
/> />
<span <span
:class="[ :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, 'text-gray-600': selectedTemplate != template.id,
}, },
]" ]"

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

@ -1,7 +1,7 @@
<template> <template>
<div class="template-modal"> <div class="template-modal">
<div class="px-8 py-8 sm:p-6"> <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 <div
v-for="(template, index) in modalData" v-for="(template, index) in modalData"
:key="index" :key="index"
@ -9,15 +9,10 @@
'border border-solid border-primary-500': 'border border-solid border-primary-500':
selectedTemplate === template.id, 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 <img :src="template.path" alt="template-image" />
:src="template.path"
alt="template-image"
height="200"
width="140"
@click="selectedTemplate = template.id"
/>
<img <img
v-if="selectedTemplate === template.id" v-if="selectedTemplate === template.id"
class="absolute z-10 w-5 h-5 text-primary-500" class="absolute z-10 w-5 h-5 text-primary-500"
@ -26,9 +21,10 @@
/> />
<span <span
:class="[ :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, 'text-gray-600': selectedTemplate != template.id,
}, },
]" ]"