From f22485cc2114fb50b27569223081441af95ecb0c Mon Sep 17 00:00:00 2001 From: Angelina Filippova Date: Fri, 29 May 2020 00:48:58 +0300 Subject: [PATCH] Fix styles for Desktop, Mobile and Tablet --- src/components/Status/index.vue | 21 +++++++-- src/views/statuses/show.vue | 45 ++++++++++++++----- .../users/components/ModerationDropdown.vue | 2 +- 3 files changed, 51 insertions(+), 17 deletions(-) diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue index 2e918cc7..ffb8f74c 100644 --- a/src/components/Status/index.vue +++ b/src/components/Status/index.vue @@ -18,8 +18,10 @@
- {{ $t('reports.sensitive') }} - {{ capitalizeFirstLetter(status.visibility) }} +
+ {{ $t('reports.sensitive') }} + {{ capitalizeFirstLetter(status.visibility) }} +
{{ $t('reports.changeScope') }} @@ -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; } } } diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue index 29845e69..8ae05bcb 100644 --- a/src/views/statuses/show.vue +++ b/src/views/statuses/show.vue @@ -21,7 +21,7 @@
-
+
@@ -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; diff --git a/src/views/users/components/ModerationDropdown.vue b/src/views/users/components/ModerationDropdown.vue index dc1b74f5..f8cf5ee6 100644 --- a/src/views/users/components/ModerationDropdown.vue +++ b/src/views/users/components/ModerationDropdown.vue @@ -1,5 +1,5 @@