From 60f62f6f366f1baa5b5005ee630eb8f3adcee0ab Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 1 Aug 2018 19:54:27 -0400
Subject: [PATCH] FIX: improves report-show mobile UI (#6229)

---
 .../templates/components/admin-report.hbs     |  4 ++--
 .../admin/templates/reports-show.hbs          | 18 ++++++--------
 .../common/admin/admin_report.scss            |  6 +++--
 app/assets/stylesheets/mobile.scss            |  1 +
 .../stylesheets/mobile/admin_reports.scss     | 24 +++++++++++++++++++
 5 files changed, 38 insertions(+), 15 deletions(-)
 create mode 100644 app/assets/stylesheets/mobile/admin_reports.scss

diff --git a/app/assets/javascripts/admin/templates/components/admin-report.hbs b/app/assets/javascripts/admin/templates/components/admin-report.hbs
index b8a7c41144f..716a893fe0b 100644
--- a/app/assets/javascripts/admin/templates/components/admin-report.hbs
+++ b/app/assets/javascripts/admin/templates/components/admin-report.hbs
@@ -68,13 +68,13 @@
         {{else}}
           <div class="alert alert-info no-data">
             {{d-icon "pie-chart"}}
-            {{i18n 'admin.dashboard.reports.no_data'}}
+            <span>{{i18n 'admin.dashboard.reports.no_data'}}</span>
           </div>
         {{/if}}
       {{else}}
         {{#if showTimeoutError}}
           <div class="alert alert-error report-error timeout">
-            {{i18n "admin.dashboard.timeout_error"}}
+            <span>{{i18n "admin.dashboard.timeout_error"}}</span>
           </div>
         {{/if}}
 
diff --git a/app/assets/javascripts/admin/templates/reports-show.hbs b/app/assets/javascripts/admin/templates/reports-show.hbs
index d595ff46e9f..899a8ebd9e7 100644
--- a/app/assets/javascripts/admin/templates/reports-show.hbs
+++ b/app/assets/javascripts/admin/templates/reports-show.hbs
@@ -1,11 +1,7 @@
-<div class="report-container">
-  <div class="visualization">
-    {{admin-report
-      showAllReportsLink=true
-      dataSourceName=model.type
-      filters=filters
-      reportOptions=reportOptions
-      showFilteringUI=true
-      onRefresh=(action "onParamsChange")}}
-  </div>
-</div>
+{{admin-report
+  showAllReportsLink=true
+  dataSourceName=model.type
+  filters=filters
+  reportOptions=reportOptions
+  showFilteringUI=true
+  onRefresh=(action "onParamsChange")}}
diff --git a/app/assets/stylesheets/common/admin/admin_report.scss b/app/assets/stylesheets/common/admin/admin_report.scss
index 492b6febca6..96709f07777 100644
--- a/app/assets/stylesheets/common/admin/admin_report.scss
+++ b/app/assets/stylesheets/common/admin/admin_report.scss
@@ -6,6 +6,7 @@
     align-self: flex-start;
     text-align: center;
     padding: 3em;
+    box-sizing: border-box;
   }
 
   .report-error {
@@ -26,8 +27,9 @@
     }
   }
 
-  .conditional-loading-section {
-    width: 100%;
+  .conditional-loading-section.is-loading {
+    flex: 1;
+    margin: 0.5em 0;
   }
 
   .report-header {
diff --git a/app/assets/stylesheets/mobile.scss b/app/assets/stylesheets/mobile.scss
index 9d3312c99a3..e7330a79f6b 100644
--- a/app/assets/stylesheets/mobile.scss
+++ b/app/assets/stylesheets/mobile.scss
@@ -22,6 +22,7 @@
 @import "mobile/ring";
 @import "mobile/group";
 @import "mobile/groups";
+@import "mobile/admin_reports";
 @import "mobile/admin_report";
 @import "mobile/admin_report_table";
 
diff --git a/app/assets/stylesheets/mobile/admin_reports.scss b/app/assets/stylesheets/mobile/admin_reports.scss
new file mode 100644
index 00000000000..210d4e33fdb
--- /dev/null
+++ b/app/assets/stylesheets/mobile/admin_reports.scss
@@ -0,0 +1,24 @@
+.admin-reports {
+  .admin-report {
+    .report-body {
+      flex-direction: column;
+
+      .report-filters {
+        order: 0;
+        margin: 0;
+      }
+
+      .alert {
+        margin: 0;
+        order: 1;
+        flex: 1;
+        padding: 1em;
+      }
+
+      .admin-report-table,
+      .admin-report-chart {
+        order: 2;
+      }
+    }
+  }
+}