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

Tablet UI

Browse source
This commit is contained in:
Angelina Filippova 2020-02-21 19:41:36 +03:00
parent f9b4543aa1
commit 26c8c5e95a
4 changed files with 49 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/views/emojiPacks/components/EmojiPack.vue
View file

@ -1,6 +1,6 @@
<template>
<el-collapse-item :title="name" :name="name" class="has-background">
<el-form v-if="isLocal" :label-width="isDesktop ? '120px' : '90px'" label-position="left" size="small" class="emoji-pack-metadata">
<el-form v-if="isLocal" :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata">
<el-form-item :label=" $t('emoji.sharePack')">
<el-switch v-model="share" />
</el-form-item>
@ -38,7 +38,7 @@
</el-link>
</div>
</div>
<el-form v-if="!isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata">
<el-form v-if="!isLocal" :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata">
<el-form-item :label=" $t('emoji.sharePack')">
<el-switch v-model="share" disabled />
</el-form-item>
@ -106,7 +106,6 @@ import SingleEmojiEditor from './SingleEmojiEditor.vue'
import NewEmojiUploader from './NewEmojiUploader.vue'
export default {
components: { SingleEmojiEditor, NewEmojiUploader },
props: {
name: {
@ -137,6 +136,21 @@ export default {
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
isMobile() {
return this.$store.state.app.device === 'mobile'
},
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelWidth() {
if (this.isMobile) {
return '90px'
} else if (this.isTablet) {
return '120px'
} else {
return '120px'
}
},
share: {
get() { return this.pack.pack['share-files'] },
set(value) {
@ -296,6 +310,12 @@ export default {
width: 100%;
margin: 0 0 22px 0;
}
.remote-pack-metadata {
.el-form-item__content {
line-height: 24px;
margin-top: 4px;
}
}
.save-pack-button {
width: 54%;
}

2
src/views/emojiPacks/components/NewEmojiUploader.vue
View file

@ -1,5 +1,5 @@
<template>
<el-form :label-position="isDesktop ? 'left' : 'top'" label-width="130px" size="small" class="new-emoji-uploader-form">
<el-form :label-position="isMobile ? 'top' : 'left'" label-width="130px" size="small" class="new-emoji-uploader-form">
<el-form-item :label="$t('emoji.shortcode')">
<el-input v-model="shortcode" :placeholder="$t('emoji.required')"/>
</el-form-item>

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

@ -1,6 +1,6 @@
<template>
<div>
<div v-if="isLocal" :class="isDesktop ? 'emoji-container-grid' : 'emoji-container-flex'">
<div v-if="isLocal" :class="isMobile ? 'emoji-container-flex' : 'emoji-container-grid'">
<img
:src="addressOfEmojiInPack(host, packName, file)"
class="emoji-preview-img">
@ -8,11 +8,11 @@
<el-input v-model="emojiFile" :placeholder="$t('emoji.file')" class="emoji-info"/>
<div class="emoji-buttons">
<el-button type="primary" @click="update">{{ $t('emoji.update') }}</el-button>
<el-button @click="remove">{{ $t('emoji.remove') }}</el-button>
<el-button class="remove-emoji-button" @click="remove">{{ $t('emoji.remove') }}</el-button>
</div>
</div>
<div v-if="!isLocal" :class="isDesktop ? 'emoji-container-grid' : 'emoji-container-flex'">
<div v-if="!isLocal" :class="isMobile ? 'emoji-container-flex' : 'remote-emoji-container-grid'">
<img
:src="addressOfEmojiInPack(remoteInstance, packName, file)"
class="emoji-preview-img">
@ -166,7 +166,7 @@ export default {
}
.emoji-container-grid {
display: grid;
grid-template-columns: 75px auto auto 195px;
grid-template-columns: 75px auto auto 200px;
grid-column-gap: 15px;
margin-bottom: 10px;
}
@ -183,6 +183,12 @@ export default {
.copy-pack-select {
width: 100%;
}
.remote-emoji-container-grid {
display: grid;
grid-template-columns: 75px auto auto 160px;
grid-column-gap: 15px;
margin-bottom: 10px;
}
@media only screen and (max-width:480px) {
.emoji-container-flex {
display: flex;
@ -209,4 +215,18 @@ export default {
}
}
}
@media only screen and (max-width:801px) and (min-width: 481px) {
.emoji-container-grid {
grid-column-gap: 10px;
}
.emoji-buttons {
.el-button+.el-button {
margin-left: 5px;
}
}
.remote-emoji-container-grid {
grid-column-gap: 10px;
}
}
</style>

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

@ -78,7 +78,7 @@ export default {
if (this.isMobile) {
return '105px'
} else if (this.isTablet) {
return '200px'
return '180px'
} else {
return '240px'
}