FIX: improves report-show mobile UI (#6229)

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

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")}}

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 {

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";
 

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;
+      }
+    }
+  }
+}