sam/admin-fe
1
0
Fork 0
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 class="status-actions">
<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 class="status-tags">
<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-button plain size="small" icon="el-icon-edit" class="status-actions-button">
{{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
@ -283,7 +285,7 @@ export default {
line-height: 26px;
}
.status-created-at {
font-size: 14px;
font-size: 13px;
color: #606266;
}
.status-deleted {
@ -300,6 +302,9 @@ export default {
justify-content: space-between;
align-items: center;
}
.status-tags {
display: inline;
}
.status-without-content {
font-style: italic;
}
@ -317,7 +322,7 @@ export default {
padding: 10px 17px;
}
.el-tag {
margin: 3px 4px 3px 0;
margin: 3px 0;
}
.status-account-container {
margin-bottom: 5px;
@ -326,12 +331,20 @@ export default {
margin: 3px 0 3px;
}
.status-actions {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.status-footer {
flex-direction: column;
align-items: flex-start;
margin-top: 10px;
}
.status-header {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
}

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

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

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

@ -1,5 +1,5 @@
<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>
<span v-if="page === 'users'" class="el-dropdown-link">
{{ $t('users.moderation') }}