knova/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix styles for Desktop, Mobile and Tablet

Browse source
This commit is contained in:
Angelina Filippova 2020-05-29 00:48:58 +03:00
parent b8184c47fe
commit f22485cc21
3 changed files with 51 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/Status/index.vue
View file

@ -18,8 +18,10 @@
</div> </div>
</div> </div>
<div class="status-actions"> <div class="status-actions">
<el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag> <div class="status-tags">
<el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag> <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
<el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
</div>
<el-dropdown trigger="click" @click.native.stop> <el-dropdown trigger="click" @click.native.stop>
<el-button plain size="small" icon="el-icon-edit" class="status-actions-button"> <el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
{{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/> {{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
@ -283,7 +285,7 @@ export default {
line-height: 26px; line-height: 26px;
} }
.status-created-at { .status-created-at {
font-size: 14px; font-size: 13px;
color: #606266; color: #606266;
} }
.status-deleted { .status-deleted {
@ -300,6 +302,9 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.status-tags {
display: inline;
}
.status-without-content { .status-without-content {
font-style: italic; font-style: italic;
} }
@ -317,7 +322,7 @@ export default {
padding: 10px 17px; padding: 10px 17px;
} }
.el-tag { .el-tag {
margin: 3px 4px 3px 0; margin: 3px 0;
} }
.status-account-container { .status-account-container {
margin-bottom: 5px; margin-bottom: 5px;
@ -326,12 +331,20 @@ export default {
margin: 3px 0 3px; margin: 3px 0 3px;
} }
.status-actions { .status-actions {
width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between;
}
.status-footer {
flex-direction: column;
align-items: flex-start;
margin-top: 10px;
} }
.status-header { .status-header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start;
} }
} }
} }

45
src/views/statuses/show.vue
View file

@ -21,7 +21,7 @@
<reboot-button/> <reboot-button/>
</div> </div>
</header> </header>
<div v-if="isMobile" class="user-page-header-container"> <div v-if="isMobile" class="status-page-header-container">
<header class="user-page-header"> <header class="user-page-header">
<div class="avatar-name-container"> <div class="avatar-name-container">
<el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" /> <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
@ -210,36 +210,57 @@ export default {
} }
.recent-statuses-container-show { .recent-statuses-container-show {
width: 100%; width: 100%;
margin: 0 0 0 15px; margin: 0 0 0 10px;
.el-timeline-item {
margin-left: 0;
}
.recent-statuses {
margin-left: 0;
}
.show-private-statuses {
margin: 0 10px 20px 0;
}
} }
.show-private-statuses { .status-card {
margin: 0 10px 20px 10px; .el-card__body {
padding: 15px;
}
} }
.status-container { .status-container {
margin: 0 10px; margin: 0 10px;
} }
.statuses { .statuses {
padding-right: 10px; padding-right: 10px;
margin-left: 8px; margin-left: 0;
.el-timeline-item__wrapper {
margin-right: 10px;
}
} }
.user-page-header { .user-page-header {
padding: 0; padding: 0;
margin: 7px 15px 15px 10px; margin: 7px 15px 5px 10px;
} }
.user-page-header-container { .status-page-header-container {
width: 100%;
.el-dropdown { .el-dropdown {
width: 95%; width: stretch;
margin: 0 15px 15px 10px; margin: 0 10px 15px 10px;
} }
} }
} }
@media only screen and (max-width:801px) and (min-width: 481px) { @media only screen and (max-width:801px) and (min-width: 481px) {
.recent-statuses {
margin: 20px 10px 15px 0;
}
.recent-statuses-container-show { .recent-statuses-container-show {
width: 97%; width: 97%;
margin: 0 20px; margin: 0 20px;
.el-timeline-item {
margin-left: 2px;
}
.recent-statuses {
margin: 20px 10px 15px 0;
}
.show-private-statuses {
margin: 0 10px 20px 0;
}
} }
.show-private-statuses { .show-private-statuses {
margin: 0 10px 20px 0; margin: 0 10px 20px 0;

2
src/views/users/components/ModerationDropdown.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<el-dropdown :hide-on-click="false" size="small" trigger="click"> <el-dropdown :hide-on-click="false" size="small" trigger="click" placement="top-start">
<div> <div>
<span v-if="page === 'users'" class="el-dropdown-link"> <span v-if="page === 'users'" class="el-dropdown-link">
{{ $t('users.moderation') }} {{ $t('users.moderation') }}