AkkomaGang/admin-fe
5
2
Fork 8
Code Issues 5 Pull requests 2 Projects Releases 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"> <div class="emoji-packs">
<h1 class="emoji-packs-header">{{ $t('emoji.emojiPacks') }}</h1> <h1 class="emoji-packs-header">{{ $t('emoji.emojiPacks') }}</h1>
<div class="button-container"> <div class="button-container">
<el-button type="primary" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button> <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"> <el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom" class="import-pack-button">
<el-button type="primary" @click="importFromFS"> <el-button type="primary" @click="importFromFS">
{{ $t('emoji.importPacks') }} {{ $t('emoji.importPacks') }}
</el-button> </el-button>
@ -76,7 +76,7 @@ export default {
}, },
labelWidth() { labelWidth() {
if (this.isMobile) { if (this.isMobile) {
return '120px' return '110px'
} else if (this.isTablet) { } else if (this.isTablet) {
return '200px' return '200px'
} else { } else {
@ -141,6 +141,7 @@ export default {
<style rel='stylesheet/scss' lang='scss'> <style rel='stylesheet/scss' lang='scss'>
.button-container { .button-container {
display: flex;
margin: 0 0 22px 15px; margin: 0 0 22px 15px;
} }
.create-pack { .create-pack {
@ -156,6 +157,9 @@ export default {
.emoji-packs-header { .emoji-packs-header {
margin: 22px 0 20px 15px; margin: 22px 0 20px 15px;
} }
.import-pack-button {
margin-left: 10px;
}
.line { .line {
width: 100%; width: 100%;
height: 0; height: 0;
@ -169,4 +173,35 @@ export default {
margin: auto; 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> </style>