Add mobile UI for editing pack metadata and adding new emoji

This commit is contained in:
Angelina Filippova 2020-02-20 21:51:15 +03:00
parent c3fedbf881
commit f1f6c48465
3 changed files with 50 additions and 39 deletions

View file

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

View file

@ -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>

View file

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