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

Change the way user profile is rendered to using flexbox

Browse source
This commit is contained in:
Angelina Filippova 2020-02-27 02:18:47 +03:00
parent 2524581cfd
commit 1ac453058f
3 changed files with 90 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/views/users/components/NewAccountDialog.vue
View file

@ -139,9 +139,8 @@ export default {
.create-account-form-item-without-margin {
margin-bottom: 0px;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (max-width:480px) {
.create-user-dialog {
width: 85%
}

5
src/views/users/index.vue
View file

@ -269,9 +269,8 @@ export default {
font-size: 28px;
}
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (max-width:480px) {
.password-reset-token-dialog {
width: 85%
}

155
src/views/users/show.vue
View file

@ -23,81 +23,73 @@
</p>
</div>
</el-dialog>
<el-row>
<el-col :span="8">
<el-card class="user-profile-card">
<div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
<table class="user-profile-table">
<tbody>
<tr class="el-table__row">
<td>{{ $t('userProfile.nickname') }}</td>
<td>
{{ user.nickname }}
</td>
</tr>
<tr class="el-table__row">
<td class="name-col">ID</td>
<td class="value-col">
{{ user.id }}
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.tags') }}</td>
<td>
<el-tag v-for="tag in user.tags" :key="tag" class="user-profile-tag">{{ tag }}</el-tag>
<span v-if="user.tags.length === 0">—</span>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.roles') }}</td>
<td>
<el-tag v-if="user.roles.admin" class="user-profile-tag">
{{ $t('users.admin') }}
</el-tag>
<el-tag v-if="user.roles.moderator" class="user-profile-tag">
{{ $t('users.moderator') }}
</el-tag>
<span v-if="!user.roles.moderator && !user.roles.admin">—</span>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.localUppercase') }}</td>
<td>
<el-tag v-if="user.local" type="info">{{ $t('userProfile.local') }}</el-tag>
<el-tag v-if="!user.local" type="info">{{ $t('userProfile.external') }}</el-tag>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.activeUppercase') }}</td>
<td>
<el-tag v-if="!user.deactivated" type="success">{{ $t('userProfile.active') }}</el-tag>
<el-tag v-if="user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
</td>
</tr>
</tbody>
</table>
</div>
</el-card>
</el-col>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="18">
<h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
</el-col>
<el-col :span="6" class="show-private">
<el-checkbox v-model="showPrivate" @change="onTogglePrivate">
{{ $t('userProfile.showPrivateStatuses') }}
</el-checkbox>
</el-col>
</el-row>
<el-col :span="16">
<div class="user-profile-container">
<el-card class="user-profile-card">
<div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
<table class="user-profile-table">
<tbody>
<tr class="el-table__row">
<td>{{ $t('userProfile.nickname') }}</td>
<td>
{{ user.nickname }}
</td>
</tr>
<tr class="el-table__row">
<td class="name-col">ID</td>
<td class="value-col">
{{ user.id }}
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.tags') }}</td>
<td>
<el-tag v-for="tag in user.tags" :key="tag" class="user-profile-tag">{{ tag }}</el-tag>
<span v-if="user.tags.length === 0">—</span>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.roles') }}</td>
<td>
<el-tag v-if="user.roles.admin" class="user-profile-tag">
{{ $t('users.admin') }}
</el-tag>
<el-tag v-if="user.roles.moderator" class="user-profile-tag">
{{ $t('users.moderator') }}
</el-tag>
<span v-if="!user.roles.moderator && !user.roles.admin">—</span>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.localUppercase') }}</td>
<td>
<el-tag v-if="user.local" type="info">{{ $t('userProfile.local') }}</el-tag>
<el-tag v-if="!user.local" type="info">{{ $t('userProfile.external') }}</el-tag>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.activeUppercase') }}</td>
<td>
<el-tag v-if="!user.deactivated" type="success">{{ $t('userProfile.active') }}</el-tag>
<el-tag v-if="user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
</td>
</tr>
</tbody>
</table>
</div>
</el-card>
<div class="recent-statuses-container">
<h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
<el-checkbox v-model="showPrivate" class="show-private-statuses" @change="onTogglePrivate">
{{ $t('userProfile.showPrivateStatuses') }}
</el-checkbox>
<el-timeline v-if="!statusesLoading" class="statuses">
<el-timeline-item v-for="status in statuses" :key="status.id">
<status :status="status" :show-checkbox="false" :user-id="user.id" :godmode="showPrivate"/>
</el-timeline-item>
<p v-if="statuses.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
</el-timeline>
</el-col>
</el-row>
</div>
</div>
</main>
</template>
@ -193,6 +185,11 @@ table {
margin-left: 28px;
color: #606266;
}
.recent-statuses-container {
display: flex;
flex-direction: column;
width: 67%;
}
.recent-statuses-header {
margin-top: 10px;
}
@ -205,6 +202,9 @@ table {
line-height: 67px;
margin-right: 20px;
}
.show-private-statuses {
margin-left: 28px;
}
.recent-statuses {
margin-left: 28px;
}
@ -218,6 +218,11 @@ table {
}
.user-profile-card {
margin: 0 20px;
width: 30%;
height: fit-content;
}
.user-profile-container {
display: flex;
}
.user-profile-table {
margin: 0;
@ -225,4 +230,16 @@ table {
.user-profile-tag {
margin: 0 4px 4px 0;
}
@media only screen and (max-width:480px) {
.avatar-name-container {
margin-bottom: 10px;
}
.user-page-header {
flex-direction: column;
align-items: flex-start;
padding: 0;
margin: 7px 0 15px 10px;
}
}
</style>