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

Merge branch 'template-refactor' into 'master'

Browse Source 
Template Refactor

See merge request mohit.panjvani/crater-web!653
This commit is contained in:
Mohit Panjwani
2020-12-22 08:16:47 +00:00
parent d003e61d41 63094e8112
commit d1e70c8989
3 changed files with 33 additions and 18 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'

25
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,21 +9,28 @@
'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" class="relative flex flex-col m-2 border border-gray-200 border-solid cursor-pointer hover:border-primary-300"
>
<img
:src="template.path"
alt="template-image"
height="200"
width="140"
@click="selectedTemplate = template.id" @click="selectedTemplate = template.id"
/> >
<img :src="template.path" alt="template-image" />
<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"
style="top: -6px; right: -5px" style="top: -6px; right: -5px"
src="/assets/img/tick.png" src="/assets/img/tick.png"
/> />
<span
:class="[
'w-full p-1 bg-gray-200 text-sm text-center absolute bottom-0 left-0',
{
'text-primary-500 bg-primary-100':
selectedTemplate === template.id,
'text-gray-600': selectedTemplate != template.id,
},
]"
>
{{ template.name }}
</span>
</div> </div>
</div> </div>
</div> </div>

25
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,21 +9,28 @@
'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" class="relative flex flex-col m-2 border border-gray-200 border-solid cursor-pointer hover:border-primary-300"
>
<img
:src="template.path"
alt="template-image"
height="200"
width="140"
@click="selectedTemplate = template.id" @click="selectedTemplate = template.id"
/> >
<img :src="template.path" alt="template-image" />
<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"
style="top: -6px; right: -5px" style="top: -6px; right: -5px"
src="/assets/img/tick.png" src="/assets/img/tick.png"
/> />
<span
:class="[
'w-full p-1 bg-gray-200 text-sm text-center absolute bottom-0 left-0',
{
'text-primary-500 bg-primary-100':
selectedTemplate === template.id,
'text-gray-600': selectedTemplate != template.id,
},
]"
>
{{ template.name }}
</span>
</div> </div>
</div> </div>
</div> </div>