From 2a82ad691c12b8cd6325c4c5b821c0c5ae7d38ee Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 9 Feb 2020 22:24:23 +0300
Subject: [PATCH] Fix styles for desktop and mobile UI on Reports tab

---
 src/components/Status/index.vue               |  4 +-
 .../reports/components/GroupedReport.vue      | 40 +++++++++-----
 src/views/reports/components/Report.vue       | 54 +++++++++++++------
 src/views/reports/components/ReportCard.vue   | 14 +++--
 src/views/reports/index.vue                   | 13 ++---
 5 files changed, 77 insertions(+), 48 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index 99d4df0f..f6c63a12 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -214,6 +214,7 @@ export default {
 
 <style rel='stylesheet/scss' lang='scss'>
 .status-card {
+  margin-bottom: 10px;
   .account {
     text-decoration: underline;
     line-height: 26px;
@@ -254,9 +255,6 @@ export default {
     font-size: 15px;
     line-height: 26px;
   }
-  .status-card {
-    margin-bottom: 15px;
-  }
   .status-deleted {
     font-style: italic;
     margin-top: 3px;
diff --git a/src/views/reports/components/GroupedReport.vue b/src/views/reports/components/GroupedReport.vue
index 24242f59..b2f3e675 100644
--- a/src/views/reports/components/GroupedReport.vue
+++ b/src/views/reports/components/GroupedReport.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-timeline class="timeline">
+  <el-timeline class="reports-timeline">
     <el-timeline-item
       v-for="groupedReport in groupedReports"
       :key="groupedReport.id"
@@ -13,7 +13,7 @@
           </div>
           <div>
             <el-dropdown trigger="click">
-              <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeAllReports') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
+              <el-button plain size="small" icon="el-icon-edit" class="report-actions-button">{{ $t('reports.changeAllReports') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item @click.native="changeAllReports('resolved', groupedReport.reports)">{{ $t('reports.resolveAll') }}</el-dropdown-item>
                 <el-dropdown-item @click.native="changeAllReports('open', groupedReport.reports)">{{ $t('reports.reopenAll') }}</el-dropdown-item>
@@ -46,7 +46,7 @@
         <div v-if="groupedReport.status">
           <div class="line"/>
           <span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
-          <status :status="groupedReport.status" class="reported-status"/>
+          <status :status="groupedReport.status" :show-checkbox="false" class="reported-status"/>
         </div>
         <div v-if="groupedReport.reports">
           <el-collapse>
@@ -109,11 +109,13 @@ export default {
   .el-icon-arrow-right {
     margin-right: 6px;
   }
-  .header-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    height: 40px;
+  .grouped-report {
+    .header-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      height: 36px;
+    }
   }
   .line {
     width: 100%;
@@ -128,16 +130,30 @@ export default {
     font-size: 14px;
     font-weight: 500;
   }
+  .reports-timeline {
+    margin: 30px 45px 45px 19px;
+    padding: 0px;
+  }
   .reported-status {
     margin-top: 15px;
   }
   @media
   only screen and (max-width: 760px),
   (min-device-width: 768px) and (max-device-width: 1024px) {
-    .header-container {
-      display: flex;
-      flex-direction: column;
-      height: 80px;
+    .grouped-report {
+      .header-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        height: auto;
+      }
+      .report-actions-button {
+        margin: 3px 0 6px;
+      }
+      .report-title {
+        margin-bottom: 7px;
+      }
     }
   }
 </style>
diff --git a/src/views/reports/components/Report.vue b/src/views/reports/components/Report.vue
index 45d93382..537815e2 100644
--- a/src/views/reports/components/Report.vue
+++ b/src/views/reports/components/Report.vue
@@ -1,22 +1,22 @@
 <template>
   <div>
-    <el-timeline class="timeline">
+    <el-timeline class="reports-timeline">
       <el-timeline-item
         v-for="report in reports"
         :timestamp="parseTimestamp(report.created_at)"
         :key="report.id"
         placement="top"
         class="timeline-item-container">
-        <el-card>
+        <el-card class="report">
           <div class="header-container">
-            <div>
+            <div class="title-container">
               <h3 class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3>
               <h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5>
             </div>
             <div>
-              <el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
+              <el-tag :type="getStateType(report.state)" size="large" class="report-tag">{{ capitalizeFirstLetter(report.state) }}</el-tag>
               <el-dropdown trigger="click">
-                <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
+                <el-button plain size="small" icon="el-icon-edit" class="report-actions-button">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item v-if="report.state !== 'resolved'" @click.native="changeReportState('resolved', report.id)">{{ $t('reports.resolve') }}</el-dropdown-item>
                   <el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">{{ $t('reports.reopen') }}</el-dropdown-item>
@@ -43,7 +43,7 @@
               <span>{{ report.content }}</span>
             </span>
           </div>
-          <div>
+          <div :style="showStatuses(report.statuses) ? '' : 'margin-bottom:15px'">
             <div class="line"/>
             <span class="report-row-key">{{ $t('reports.actor') }}:</span>
             <img
@@ -54,7 +54,7 @@
               <span>{{ report.actor.acct }}</span>
             </a>
           </div>
-          <div v-if="report.statuses.length > 0" class="statuses">
+          <div v-if="showStatuses(report.statuses)" class="statuses">
             <el-collapse>
               <el-collapse-item :title="getStatusesTitle(report.statuses)">
                 <div v-for="status in report.statuses" :key="status.id">
@@ -153,15 +153,18 @@ export default {
     getNotesTitle(notes = []) {
       return `Notes: ${notes.length} item(s)`
     },
+    handleNewNote(reportID) {
+      this.$store.dispatch('CreateReportNote', { content: this.notes[reportID], reportID })
+      this.notes[reportID] = ''
+    },
     handlePageChange(page) {
       this.$store.dispatch('FetchReports', page)
     },
     parseTimestamp(timestamp) {
       return moment(timestamp).format('L HH:mm')
     },
-    handleNewNote(reportID) {
-      this.$store.dispatch('CreateReportNote', { content: this.notes[reportID], reportID })
-      this.notes[reportID] = ''
+    showStatuses(statuses) {
+      return statuses.length > 0
     }
   }
 }
@@ -205,11 +208,13 @@ export default {
     margin: 0;
     height: 17px;
   }
-  .header-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    height: 40px;
+  .report {
+    .header-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      height: 40px;
+    }
   }
   .id {
     color: gray;
@@ -258,6 +263,10 @@ export default {
     margin: 25px 0;
     text-align: center;
   }
+  .reports-timeline {
+    margin: 30px 45px 45px 19px;
+    padding: 0px;
+  }
   .statuses {
     margin-top: 15px;
   }
@@ -273,15 +282,26 @@ export default {
   @media
   only screen and (max-width: 760px),
   (min-device-width: 768px) and (max-device-width: 1024px) {
-    .timeline-item-container {
+    .report {
       .header-container {
         display: flex;
         flex-direction: column;
-        height: 80px;
+        justify-content: flex-start;
+        align-items: flex-start;
+        height: auto;
       }
       .id {
         margin: 6px 0 0 0;
       }
+      .report-actions-button {
+        margin: 3px 0 6px;
+      }
+      .report-tag {
+        margin: 3px 0 6px;
+      }
+      .title-container {
+        margin-bottom: 7px;
+      }
     }
   }
 </style>
diff --git a/src/views/reports/components/ReportCard.vue b/src/views/reports/components/ReportCard.vue
index 67b0b01c..6121bb52 100644
--- a/src/views/reports/components/ReportCard.vue
+++ b/src/views/reports/components/ReportCard.vue
@@ -13,7 +13,7 @@
             </a>
           </div>
           <div>
-            <el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
+            <el-tag :type="getStateType(report.state)" size="large" class="report-tag">{{ capitalizeFirstLetter(report.state) }}</el-tag>
             <el-dropdown trigger="click">
               <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
               <el-dropdown-menu slot="dropdown">
@@ -117,14 +117,12 @@ export default {
     .report-header {
       display: flex;
       flex-direction: column;
-      height: 80px;
+      justify-content: flex-start;
+      align-items: flex-start;
+      height: auto;
     }
-    .report-actor-container {
-      margin-bottom: 5px;
-    }
-    .report-header {
-      display: flex;
-      flex-direction: column;
+    .report-tag {
+      margin: 3px 0 6px;
     }
   }
 </style>
diff --git a/src/views/reports/index.vue b/src/views/reports/index.vue
index 3c87d3e5..3e67d90e 100644
--- a/src/views/reports/index.vue
+++ b/src/views/reports/index.vue
@@ -8,7 +8,7 @@
       {{ $t('reports.reports') }}
       <span class="report-count">({{ normalizedReportsCount }})</span>
     </h1>
-    <div class="filter-container">
+    <div class="reports-filter-container">
       <reports-filter v-if="!groupReports"/>
       <el-checkbox v-model="groupReports" class="group-reports-checkbox">
         Group reports by statuses
@@ -70,13 +70,10 @@ export default {
 
 <style rel='stylesheet/scss' lang='scss' scoped>
 .reports-container {
-  .el-timeline {
-    margin: 45px 45px 45px 19px;
-    padding: 0px;
-  }
-  .filter-container {
+  .reports-filter-container {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
     margin: 22px 15px 22px 15px;
     padding-bottom: 0
   }
@@ -102,8 +99,8 @@ only screen and (max-width: 760px),
     h1 {
       margin: 7px 10px 15px 10px;
     }
-    .filter-container {
-      margin: 0 10px
+    .reports-filter-container {
+      margin: 0 10px;
     }
   }
   #app > div > div.main-container > section > div > div.block > ul {