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

Fix button styles on emoji tab

Browse source
This commit is contained in:
Angelina Filippova 2020-02-20 15:50:59 +03:00
parent 2d0421106a
commit c3fedbf881
3 changed files with 74 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lang/en.js
View file

@ -416,7 +416,7 @@ export default {
shortcode: 'Shortcode',
fallbackSrc: 'Fallback source',
fallbackSrcSha: 'Fallback source SHA',
savePackMetadata: 'Save pack metadata',
saveMetadata: 'Save metadata',
deletePack: 'Delete pack',
downloadPack: 'Download pack',
downloadPackArchive: 'Download pack archive',

71
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="120px" label-position="left" size="small" class="emoji-pack-metadata">
<el-form v-if="isLocal" :label-width="isDesktop ? '120px' : '90px'" label-position="left" size="small" class="emoji-pack-metadata">
<el-form-item :label=" $t('emoji.sharePack')">
<el-switch v-model="share" />
</el-form-item>
@ -21,11 +21,13 @@
:label=" $t('emoji.fallbackSrcSha')">
{{ pack.pack["fallback-src-sha256"] }}
</el-form-item>
<el-form-item class="save-pack-button">
<el-button type="primary" @click="savePackMetadata">{{ $t('emoji.savePackMetadata') }}</el-button>
<el-button @click="deletePack">{{ $t('emoji.deletePack') }}</el-button>
</el-form-item>
<el-form-item>
</el-form>
<div class="pack-button-container">
<div class="save-pack-button-container">
<el-button type="primary" class="save-pack-button" @click="savePackMetadata">{{ $t('emoji.saveMetadata') }}</el-button>
<el-button class="delete-pack-button" @click="deletePack">{{ $t('emoji.deletePack') }}</el-button>
</div>
<div class="download-pack-button-container">
<el-link
v-if="pack.pack['can-download']"
:href="`//${host}/api/pleroma/emoji/packs/${name}/download_shared`"
@ -34,8 +36,8 @@
target="_blank">
<el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
</el-link>
</el-form-item>
</el-form>
</div>
</div>
<el-form v-if="!isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata">
<el-form-item :label=" $t('emoji.sharePack')">
<el-switch v-model="share" disabled />
@ -132,6 +134,9 @@ export default {
}
},
computed: {
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
share: {
get() { return this.pack.pack['share-files'] },
set(value) {
@ -218,9 +223,24 @@ export default {
</script>
<style rel='stylesheet/scss' lang='scss'>
.pack-button-container {
margin: 0 0 18px 120px;
}
.download-archive {
width: 250px
}
.download-pack-button-container {
width: 265px;
.el-link {
width: inherit;
span {
width: inherit;
.download-archive {
width: inherit;
}
}
}
}
.download-shared-pack {
display: flex;
margin-bottom: 10px;
@ -251,7 +271,38 @@ export default {
.no-background .el-collapse-item__header {
background: white;
}
.save-pack-button {
margin-bottom: 5px
.save-pack-button-container {
margin-bottom: 8px;
width: 265px;
display: flex;
justify-content: space-between;
}
@media only screen and (max-width:480px) {
.delete-pack-button {
width: 45%;
}
.download-pack-button-container {
width: 100%;
}
.pack-button-container {
width: 100%;
margin: 0 0 22px 0;
}
.save-pack-button {
width: 54%;
}
.save-pack-button-container {
margin-bottom: 8px;
width: 100%;
display: flex;
justify-content: space-between;
button {
padding: 10px 5px;
}
.el-button+.el-button {
margin-left: 3px;
}
}
}
</style>

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

@ -1,7 +1,7 @@
<template>
<div class="emoji-packs">
<h1 class="emoji-packs-header">{{ $t('emoji.emojiPacks') }}</h1>
<div class="button-container">
<div class="emoji-packs-header-button-container">
<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">
@ -76,7 +76,7 @@ export default {
},
labelWidth() {
if (this.isMobile) {
return '110px'
return '105px'
} else if (this.isTablet) {
return '200px'
} else {
@ -140,7 +140,7 @@ export default {
</script>
<style rel='stylesheet/scss' lang='scss'>
.button-container {
.emoji-packs-header-button-container {
display: flex;
margin: 0 0 22px 15px;
}
@ -175,9 +175,14 @@ export default {
}
@media only screen and (max-width:480px) {
.button-container {
.emoji-packs-header-button-container {
height: 82px;
flex-direction: column;
.el-button+.el-button {
margin: 10px 0 0 0;
width: fit-content;
}
}
.create-pack {
height: 82px;
@ -191,17 +196,15 @@ export default {
}
.emoji-packs-form {
margin: 0 10px;
label {
padding-right: 8px;
}
}
.emoji-packs-header {
margin: 15px;
}
.import-pack-button {
margin: 10px 0 0 0;
width: fit-content;
}
.reload-emoji-button {
width: fit-content;
}
}
</style>