Add mobile UI for editing pack metadata and adding new emoji
This commit is contained in:
parent
c3fedbf881
commit
f1f6c48465
3 changed files with 50 additions and 39 deletions
|
@ -223,9 +223,6 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel='stylesheet/scss' lang='scss'>
|
<style rel='stylesheet/scss' lang='scss'>
|
||||||
.pack-button-container {
|
|
||||||
margin: 0 0 18px 120px;
|
|
||||||
}
|
|
||||||
.download-archive {
|
.download-archive {
|
||||||
width: 250px
|
width: 250px
|
||||||
}
|
}
|
||||||
|
@ -271,7 +268,9 @@ export default {
|
||||||
.no-background .el-collapse-item__header {
|
.no-background .el-collapse-item__header {
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
.pack-button-container {
|
||||||
|
margin: 0 0 18px 120px;
|
||||||
|
}
|
||||||
.save-pack-button-container {
|
.save-pack-button-container {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
width: 265px;
|
width: 265px;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<el-form label-width="130px" label-position="left" size="small">
|
<el-form :label-position="isDesktop ? 'left' : 'top'" label-width="130px" size="small" class="new-emoji-uploader-form">
|
||||||
<el-form-item :label="$t('emoji.shortcode')">
|
<el-form-item :label="$t('emoji.shortcode')">
|
||||||
<el-input v-model="shortcode" :placeholder="$t('emoji.required')"/>
|
<el-input v-model="shortcode" :placeholder="$t('emoji.required')"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
@ -25,30 +25,6 @@
|
||||||
</el-form>
|
</el-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
|
||||||
.add-new-emoji {
|
|
||||||
height: 36px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #606266;
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
line-height: 20px;
|
|
||||||
margin-right: 15px
|
|
||||||
}
|
|
||||||
.upload-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
.upload-button {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
.upload-file-url {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
@ -65,6 +41,9 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
isDesktop() {
|
||||||
|
return this.$store.state.app.device === 'desktop'
|
||||||
|
},
|
||||||
shortcodePresent() {
|
shortcodePresent() {
|
||||||
return this.shortcode.trim() === ''
|
return this.shortcode.trim() === ''
|
||||||
}
|
}
|
||||||
|
@ -88,3 +67,34 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style rel='stylesheet/scss' lang='scss'>
|
||||||
|
.add-new-emoji {
|
||||||
|
height: 36px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
line-height: 20px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.upload-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
.upload-button {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.upload-file-url {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width:480px) {
|
||||||
|
.new-emoji-uploader-form {
|
||||||
|
label.el-form-item__label {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -175,15 +175,6 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width:480px) {
|
@media only screen and (max-width:480px) {
|
||||||
.emoji-packs-header-button-container {
|
|
||||||
height: 82px;
|
|
||||||
flex-direction: column;
|
|
||||||
.el-button+.el-button {
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
width: fit-content;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.create-pack {
|
.create-pack {
|
||||||
height: 82px;
|
height: 82px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -195,14 +186,25 @@ export default {
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
}
|
}
|
||||||
.emoji-packs-form {
|
.emoji-packs-form {
|
||||||
margin: 0 10px;
|
margin: 0 7px;
|
||||||
label {
|
label {
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
}
|
}
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.emoji-packs-header {
|
.emoji-packs-header {
|
||||||
margin: 15px;
|
margin: 15px;
|
||||||
}
|
}
|
||||||
|
.emoji-packs-header-button-container {
|
||||||
|
height: 82px;
|
||||||
|
flex-direction: column;
|
||||||
|
.el-button+.el-button {
|
||||||
|
margin: 7px 0 0 0;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
.reload-emoji-button {
|
.reload-emoji-button {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue