Merge branch 'feature/fix-styles' into 'develop'

Add mobile and tablet UI, fix styles

See merge request pleroma/admin-fe!97
This commit is contained in:
Angelina Filippova 2020-02-27 00:05:23 +00:00
commit 7603141b12
15 changed files with 284 additions and 156 deletions

View file

@ -267,9 +267,8 @@ export default {
font-style: italic;
}
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (max-width:480px) {
.el-message {
min-width: 80%;
}

View file

@ -85,7 +85,7 @@
sortable/>
<el-table-column
:label="$t('invites.token')"
:min-width="isDesktop ? 350 : 125"
:min-width="isDesktop ? 320 : 120"
prop="token"/>
<el-table-column
v-if="isDesktop"
@ -119,7 +119,9 @@
<template slot-scope="scope">
<el-tag
:type="scope.row.used ? 'danger' : 'success'"
disable-transitions>{{ scope.row.used ? $t('invites.used') : $t('invites.active') }}</el-tag>
disable-transitions>
{{ scope.row.used ? $t('invites.used') : $t('invites.active') }}
</el-tag>
</template>
</el-table-column>
<el-table-column
@ -268,9 +270,8 @@ export default {
margin: 0 0 10px 0;
}
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (max-width:480px) {
.invites-container {
.actions-container {
display: flex;
@ -279,6 +280,9 @@ only screen and (max-width: 760px),
align-items: center;
margin: 15px 10px 7px 10px;
}
.cell {
padding: 0;
}
.create-invite-token {
width: 100%;
}
@ -296,7 +300,9 @@ only screen and (max-width: 760px),
}
.invite-token-table {
width: 100%;
margin: 0;
margin: 0 5px;
font-size: 12px;
font-weight: 500;
}
.invite-via-email {
width: 100%;
@ -308,6 +314,11 @@ only screen and (max-width: 760px),
.info {
margin: 0 0 10px 5px;
}
th {
.cell {
padding: 0;
}
}
}
.create-invite-token {
width: 100%

View file

@ -1,11 +1,10 @@
<template>
<div v-if="!loading" class="moderation-log-container">
<h1>{{ $t('moderationLog.moderationLog') }}</h1>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="9">
<div class="moderation-log-nav-container">
<el-select
v-model="user"
class="user-select"
class="moderation-log-user-select"
clearable
placeholder="Filter by admin/moderator"
@change="fetchLogWithFilters">
@ -20,17 +19,13 @@
:value="item.id"/>
</el-option-group>
</el-select>
</el-col>
<el-col :span="6" class="search-container">
<el-input
v-model="search"
placeholder="Search logs"
clearable
class="moderation-log-search"
@input="handleDebounceSearchInput"/>
</el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="9" class="date-container">
</div>
<el-date-picker
:default-time="['00:00:00', '23:59:59']"
v-model="dateRange"
@ -38,9 +33,8 @@
start-placeholder="Start date"
end-placeholder="End date"
unlink-panels
class="moderation-log-date-panel"
@change="fetchLogWithFilters" />
</el-col>
</el-row>
<el-timeline>
<el-timeline-item
v-for="(logEntry, index) in log"
@ -55,6 +49,7 @@
:hide-on-single-page="true"
:page-size="50"
:total="total"
:small="isMobile"
layout="prev, pager, next"
@current-change="fetchLogWithFilters" />
</div>
@ -76,6 +71,9 @@ export default {
}
},
computed: {
isMobile() {
return this.$store.state.app.device === 'mobile'
},
loading() {
return this.$store.state.moderationLog.logLoading &&
this.$store.state.moderationLog.adminsLoading
@ -138,7 +136,17 @@ h1 {
margin: 25px 45px 0 0;
padding: 0px;
}
.user-select {
.moderation-log-date-panel {
width: 350px;
}
.moderation-log-nav-container {
display: flex;
justify-content: space-between;
}
.moderation-log-search {
width: 350px;
}
.moderation-log-user-select {
margin: 0 0 20px;
width: 350px;
}
@ -148,4 +156,30 @@ h1 {
.pagination {
text-align: center;
}
@media only screen and (max-width:480px) {
.moderation-log-date-panel {
width: 100%;
}
.moderation-log-user-select {
margin: 0 0 10px;
width: 55%;
}
.moderation-log-search {
width: 40%;
}
}
@media only screen and (max-width:801px) and (min-width: 481px) {
.moderation-log-date-panel {
width: 55%;
}
.moderation-log-user-select {
margin: 0 0 10px;
width: 55%;
}
.moderation-log-search {
width: 40%;
}
}
</style>

View file

@ -109,6 +109,9 @@ export default {
.el-icon-arrow-right {
margin-right: 6px;
}
.divider {
margin: 15px 0;
}
.grouped-report {
.header-container {
display: flex;
@ -137,9 +140,8 @@ export default {
.reported-status {
margin-top: 15px;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (max-width:480px) {
.grouped-report {
.header-container {
display: flex;
@ -155,5 +157,13 @@ export default {
margin-bottom: 7px;
}
}
.block {
.reports-timeline .el-timeline {
margin: 20px 10px;
.el-timeline-item__wrapper {
padding-left: 20px;
}
}
}
}
</style>

View file

@ -97,9 +97,8 @@ export default {
display: flex;
justify-content: space-between;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (max-width:480px) {
.el-card__header {
padding: 10px 17px;
}

View file

@ -74,7 +74,7 @@
v-model="notes[report.id]"
:placeholder="$t('reports.leaveNote')"
type="textarea"
rows="3"/>
rows="2"/>
<div class="report-post-note">
<el-button @click="handleNewNote(report.id)">{{ $t('reports.postNote') }}</el-button>
</div>
@ -279,9 +279,8 @@ export default {
font-style: italic;
color: gray;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (max-width:480px) {
.report {
.header-container {
display: flex;
@ -303,5 +302,11 @@ export default {
margin-bottom: 7px;
}
}
.reports-timeline {
margin: 20px 10px;
.el-timeline-item__wrapper {
padding-left: 20px;
}
}
}
</style>

View file

@ -108,9 +108,8 @@ export default {
display: flex;
justify-content: space-between;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (max-width:480px) {
.el-card__header {
padding: 10px 17px;
}

View file

@ -54,12 +54,17 @@ export default {
.select-field {
width: 350px;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (max-width:480px) {
.select-field {
width: 100%;
margin-bottom: 5px;
}
}
@media only screen and (max-width:801px) and (min-width: 481px) {
.select-field {
width: 50%;
}
}
</style>

View file

@ -92,9 +92,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) {
.reports-container {
h1 {
margin: 7px 10px 15px 10px;
@ -103,8 +102,5 @@ only screen and (max-width: 760px),
margin: 0 10px;
}
}
#app > div > div.main-container > section > div > div.block > ul {
margin: 45px 45px 5px 19px;
}
}
</style>

View file

@ -520,8 +520,8 @@
margin-right: 8px
}
}
@media only screen and (max-width:801px) and (min-width: 481px) {
@media only screen and (max-width:801px) and (min-width: 481px) {
.delete-setting-button {
margin: 4px 0 0 10px;
height: 28px;

View file

@ -129,19 +129,19 @@ h1 {
margin: 22px 0 0 0;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (max-width:480px) {
.filter-container {
display: flex;
height: 36px;
flex-direction: column;
margin: 10px 10px
margin: 10px 0;
}
.select-field {
width: 100%;
margin-bottom: 5px;
}
.select-instance {
width: 100%;
}
}
</style>

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%
}

View file

@ -61,12 +61,17 @@ export default {
.select-field {
width: 350px;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (max-width:480px) {
.select-field {
width: 100%;
margin-bottom: 5px;
}
}
@media only screen and (max-width:801px) and (min-width: 481px) {
.select-field {
width: 50%;
}
}
</style>

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%
}

View file

@ -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,10 @@ table {
line-height: 67px;
margin-right: 20px;
}
.show-private-statuses {
margin-left: 28px;
margin-bottom: 20px;
}
.recent-statuses {
margin-left: 28px;
}
@ -218,6 +219,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 +231,65 @@ table {
.user-profile-tag {
margin: 0 4px 4px 0;
}
@media only screen and (max-width:480px) {
.avatar-name-container {
margin-bottom: 10px;
}
.recent-statuses {
margin: 20px 10px 15px 10px;
}
.recent-statuses-container {
width: 100%;
margin: 0 10px;
}
.show-private-statuses {
margin: 0 10px 20px 10px;
}
.user-page-header {
flex-direction: column;
align-items: flex-start;
padding: 0;
margin: 7px 0 15px 10px;
}
.user-profile-card {
margin: 0 10px;
width: 95%;
td {
width: 80px;
}
}
.user-profile-container {
flex-direction: column;
}
}
@media only screen and (max-width:801px) and (min-width: 481px) {
.avatar-name-container {
margin-bottom: 20px;
}
.recent-statuses {
margin: 20px 10px 15px 0;
}
.recent-statuses-container {
width: 97%;
margin: 0 20px;
}
.show-private-statuses {
margin: 0 10px 20px 0;
}
.user-page-header {
flex-direction: column;
align-items: flex-start;
padding: 0;
margin: 7px 0 20px 20px;
}
.user-profile-card {
margin: 0 20px;
width: fit-content;
}
.user-profile-container {
flex-direction: column;
}
}
</style>