Slightly improved CardDesigner layout
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Intro header="Card Designer" body="This Tool is currently being built...<br/>Mobile cropper might behave weird. <br/>Known Issues: <br/>- (mobile) Moving cropper to the right changes tabs <br/>- (mobile)Pinch to zoom affects page instead of crop area <br>- Initial crop area doesn't cover the maximum size psossible" />
|
<Intro header="Card Designer" body="This Tool is currently being built...<br/>Mobile cropper might behave weird. <br/>Known Issues: <br/>- (mobile) Moving cropper to the right changes tabs <br/>- (mobile) Pinch to zoom affects page instead of crop area <br>- Initial crop area doesn't cover the maximum size possible" />
|
||||||
<v-row justify="center" class="pa-10">
|
<v-row justify="center" class="pa-10">
|
||||||
<div class="button-wrapper">
|
<div class="button-wrapper">
|
||||||
<input
|
<input
|
||||||
@@ -10,13 +10,15 @@
|
|||||||
accept="image/*"
|
accept="image/*"
|
||||||
@change="setImage"
|
@change="setImage"
|
||||||
/>
|
/>
|
||||||
<v-btn class="button ma-10" @click="showFileChooser()">
|
<v-btn x-large class="button ma-10" @click="showFileChooser()">
|
||||||
Open Image
|
Open Image
|
||||||
|
<v-icon right dark>
|
||||||
|
mdi-cloud-upload
|
||||||
|
</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</div>
|
</div>
|
||||||
</v-row>
|
</v-row>
|
||||||
<v-row justify="center">
|
<v-row justify="center">
|
||||||
|
|
||||||
<section class="cropper-area">
|
<section class="cropper-area">
|
||||||
<div class="img-cropper">
|
<div class="img-cropper">
|
||||||
<vue-cropper
|
<vue-cropper
|
||||||
@@ -35,11 +37,16 @@
|
|||||||
<img id="frame" src="../assets/cards/overlay.png" alt="">
|
<img id="frame" src="../assets/cards/overlay.png" alt="">
|
||||||
<div class="custom-preview" />
|
<div class="custom-preview" />
|
||||||
</div>
|
</div>
|
||||||
<v-btn class="button ma-10" @click="cropImage()">
|
|
||||||
Save Image
|
|
||||||
</v-btn>
|
|
||||||
</section>
|
</section>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
<v-row justify="center" class="pa-10">
|
||||||
|
<v-btn x-large class="button ma-10" @click="cropImage()">
|
||||||
|
Save Image
|
||||||
|
<v-icon right dark>
|
||||||
|
mdi-cloud-download
|
||||||
|
</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</v-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -123,6 +130,11 @@ export default {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
//FIXME: Outsource styles
|
//FIXME: Outsource styles
|
||||||
|
|
||||||
|
.cropper-area {
|
||||||
|
padding-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
.img-cropper {
|
.img-cropper {
|
||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user