Slightly improved CardDesigner layout

This commit is contained in:
Minzkraut
2022-03-29 00:48:52 +02:00
parent 96d5e720b0
commit 284e9a9767

View File

@@ -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%;
} }