Merge branch 'template-refactor' into 'master'

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
3 changed files with 33 additions and 18 deletions

View File

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

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,21 +9,28 @@
'border border-solid border-primary-500':
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"
@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"
style="top: -6px; right: -5px"
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>

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,21 +9,28 @@
'border border-solid border-primary-500':
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"
@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"
style="top: -6px; right: -5px"
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>