sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add mobile UI for emoji section

Browse source
This commit is contained in:
Angelina Filippova 2020-02-19 22:03:28 +03:00
parent 8f183d07b6
commit 2d0421106a
1 changed files with 38 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/views/emojiPacks/index.vue
View file

@ -2,8 +2,8 @@
<div class="emoji-packs">
<h1 class="emoji-packs-header">{{ $t('emoji.emojiPacks') }}</h1>
<div class="button-container">
<el-button type="primary" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
<el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom">
<el-button type="primary" class="reload-emoji-button" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
<el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom" class="import-pack-button">
<el-button type="primary" @click="importFromFS">
{{ $t('emoji.importPacks') }}
</el-button>
@ -76,7 +76,7 @@ export default {
},
labelWidth() {
if (this.isMobile) {
return '120px'
return '110px'
} else if (this.isTablet) {
return '200px'
} else {
@ -141,6 +141,7 @@ export default {
<style rel='stylesheet/scss' lang='scss'>
.button-container {
display: flex;
margin: 0 0 22px 15px;
}
.create-pack {
@ -156,6 +157,9 @@ export default {
.emoji-packs-header {
margin: 22px 0 20px 15px;
}
.import-pack-button {
margin-left: 10px;
}
.line {
width: 100%;
height: 0;
@ -169,4 +173,35 @@ export default {
margin: auto;
}
}
@media only screen and (max-width:480px) {
.button-container {
height: 82px;
flex-direction: column;
}
.create-pack {
height: 82px;
flex-direction: column;
}
.create-pack-button {
margin-left: 0;
}
.divider {
margin: 15px 0;
}
.emoji-packs-form {
margin: 0 10px;
}
.emoji-packs-header {
margin: 15px;
}
.import-pack-button {
margin: 10px 0 0 0;
width: fit-content;
}
.reload-emoji-button {
width: fit-content;
}
}
</style>