Change the way user profile is rendered to using flexbox
This commit is contained in:
parent
2524581cfd
commit
1ac453058f
3 changed files with 90 additions and 75 deletions
|
@ -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%
|
||||
}
|
||||
|
|
|
@ -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%
|
||||
}
|
||||
|
|
|
@ -23,8 +23,7 @@
|
|||
</p>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<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">
|
||||
|
@ -78,26 +77,19 @@
|
|||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-col :span="18">
|
||||
<div class="recent-statuses-container">
|
||||
<h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
|
||||
</el-col>
|
||||
<el-col :span="6" class="show-private">
|
||||
<el-checkbox v-model="showPrivate" @change="onTogglePrivate">
|
||||
<el-checkbox v-model="showPrivate" class="show-private-statuses" @change="onTogglePrivate">
|
||||
{{ $t('userProfile.showPrivateStatuses') }}
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-col :span="16">
|
||||
<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>
|
||||
|
|
Loading…
Reference in a new issue