AkkomaGang/admin-fe
6
2
Fork 9
Code Issues 5 Pull requests 2 Projects Releases Wiki Activity

Mobile UI for managing existing emoji

Browse source
This commit is contained in:
Angelina Filippova 2020-02-20 22:53:17 +03:00
parent f1f6c48465
commit 8802fc3f4f
1 changed files with 32 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/views/emojiPacks/components/SingleEmojiEditor.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div v-if="isLocal" class="emoji-container"> <div v-if="isLocal" :class="isDesktop ? 'emoji-container-grid' : 'emoji-container-flex'">
<img <img
:src="addressOfEmojiInPack(host, packName, file)" :src="addressOfEmojiInPack(host, packName, file)"
class="emoji-preview-img"> class="emoji-preview-img">
@ -92,6 +92,9 @@ export default {
}, },
set(val) { this.newFile = val } set(val) { this.newFile = val }
}, },
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
localPacks() { localPacks() {
return this.$store.state.emojiPacks.localPacks return this.$store.state.emojiPacks.localPacks
}, },
@ -153,7 +156,7 @@ export default {
} }
</script> </script>
<style> <style rel='stylesheet/scss' lang='scss'>
.copy-popover { .copy-popover {
width: 330px width: 330px
} }
@ -161,7 +164,7 @@ export default {
place-self: center; place-self: center;
min-width: 200px min-width: 200px
} }
.emoji-container { .emoji-container-grid {
display: grid; display: grid;
grid-template-columns: 75px auto auto 195px; grid-template-columns: 75px auto auto 195px;
grid-column-gap: 15px; grid-column-gap: 15px;
@ -180,4 +183,30 @@ export default {
.copy-pack-select { .copy-pack-select {
width: 100%; width: 100%;
} }
@media only screen and (max-width:480px) {
.emoji-container-flex {
display: flex;
flex-direction: column;
border: 1px solid #dcdfe6;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
border-radius: 4px;
padding: 15px;
margin: 0 15px 15px 0;
}
.emoji-preview-img {
margin-bottom: 10px;
}
.emoji-info {
margin-bottom: 10px;
}
.emoji-buttons {
display: flex;
justify-content: space-between;
width: 100%;
button {
padding: 10px 5px;
width: 47%;
}
}
}
</style> </style>