From c2cfb6ebae7bd0983caa7e3adffa1bc891672de5 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 13 Jul 2018 01:43:40 -0400
Subject: [PATCH] mobile admin cleanup

---
 .../admin/templates/logs/screened-emails.hbs  | 52 +++++++++----------
 .../admin/templates/logs/screened-urls.hbs    | 41 +++++++--------
 .../stylesheets/common/admin/admin_base.scss  | 24 ++++++++-
 app/assets/stylesheets/common/admin/api.scss  |  3 ++
 .../stylesheets/common/admin/staff_logs.scss  | 26 ----------
 5 files changed, 71 insertions(+), 75 deletions(-)

diff --git a/app/assets/javascripts/admin/templates/logs/screened-emails.hbs b/app/assets/javascripts/admin/templates/logs/screened-emails.hbs
index b370ae419f7..ce0dd4e3554 100644
--- a/app/assets/javascripts/admin/templates/logs/screened-emails.hbs
+++ b/app/assets/javascripts/admin/templates/logs/screened-emails.hbs
@@ -1,41 +1,41 @@
 <p>
   {{i18n 'admin.logs.screened_emails.description'}}
-  <button class="btn screened-email-export" {{action "exportScreenedEmailList"}} title="{{i18n 'admin.export_csv.button_title.screened_email'}}">{{d-icon "download"}}{{i18n 'admin.export_csv.button_text'}}</button>
 </p>
+  <button class="btn screened-email-export" {{action "exportScreenedEmailList"}} title="{{i18n 'admin.export_csv.button_title.screened_email'}}">{{d-icon "download"}}{{i18n 'admin.export_csv.button_text'}}</button>
+
 <br>
 
 {{#conditional-loading-spinner condition=loading}}
   {{#if model.length}}
 
-    <div class='table screened-emails'>
-      <div class="heading-container">
-        <div class="col heading first email">{{i18n 'admin.logs.screened_emails.email'}}</div>
-        <div class="col heading action">{{i18n 'admin.logs.action'}}</div>
-        <div class="col heading match_count">{{i18n 'admin.logs.match_count'}}</div>
-        <div class="col heading last_match_at">{{i18n 'admin.logs.last_match_at'}}</div>
-        <div class="col heading created_at">{{i18n 'admin.logs.created_at'}}</div>
-        <div class="col heading ip_address">{{i18n 'admin.logs.ip_address'}}</div>
-        <div class="col heading action"></div>
-        <div class="clearfix"></div>
-      </div>
-
+    <table class='screened-emails grid'>
+      <thead>
+        <th class="first email">{{i18n 'admin.logs.screened_emails.email'}}</th>
+        <th class="action">{{i18n 'admin.logs.action'}}</th>
+        <th class="match_count">{{i18n 'admin.logs.match_count'}}</th>
+        <th class="last_match_at">{{i18n 'admin.logs.last_match_at'}}</th>
+        <th class="created_at">{{i18n 'admin.logs.created_at'}}</th>
+        <th class="ip_address">{{i18n 'admin.logs.ip_address'}}</th>
+        <th class="action"></th>
+      </thead>
+      <tbody>
       {{#each model as |item|}}
-        <div class="admin-list-item">
-          <div class="col first email">
+        <tr class="admin-list-item">
+          <td class="col first email">
             <div class="overflow-ellipsis" title={{item.email}}>{{item.email}}</div>
-          </div>
-          <div class="col action">{{item.actionName}}</div>
-          <div class="col match_count">{{item.match_count}}</div>
-          <div class="col last_match_at">{{age-with-tooltip item.last_match_at}}</div>
-          <div class="col created_at">{{age-with-tooltip item.created_at}}</div>
-          <div class="col ip_address">{{item.ip_address}}</div>
-          <div class="col action">
+          </td>
+          <td class="action">{{item.actionName}}</td>
+          <td class="match_count"><div class="label">{{i18n 'admin.logs.match_count'}}</div>{{item.match_count}}</td>
+          <td class="last_match_at"><div class="label">{{i18n 'admin.logs.last_match_at'}}</div>{{age-with-tooltip item.last_match_at}}</td>
+          <td class="created_at"><div class="label">{{i18n 'admin.logs.created_at'}}</div>{{age-with-tooltip item.created_at}}</td>
+          <td class="ip_address">{{item.ip_address}}</td>
+          <td class="action">
             {{d-button action="clearBlock" actionParam=item icon="check" label="admin.logs.screened_emails.actions.allow"}}
-          </div>
-          <div class="clearfix"></div>
-        </div>
+          </td>
+        </tr>
       {{/each}}
-    </div>
+      </tbody>
+    </table>
 
   {{else}}
     {{i18n 'search.no_results'}}
diff --git a/app/assets/javascripts/admin/templates/logs/screened-urls.hbs b/app/assets/javascripts/admin/templates/logs/screened-urls.hbs
index 7b1048f1b44..3a5a69c955a 100644
--- a/app/assets/javascripts/admin/templates/logs/screened-urls.hbs
+++ b/app/assets/javascripts/admin/templates/logs/screened-urls.hbs
@@ -1,34 +1,33 @@
 <p>
   {{i18n 'admin.logs.screened_urls.description'}}
-  <button class="btn pull-right" {{action "exportScreenedUrlList"}} title="{{i18n 'admin.export_csv.button_title.screened_url'}}">{{d-icon "download"}}{{i18n 'admin.export_csv.button_text'}}</button>
 </p>
+  <button class="btn" {{action "exportScreenedUrlList"}} title="{{i18n 'admin.export_csv.button_title.screened_url'}}">{{d-icon "download"}}{{i18n 'admin.export_csv.button_text'}}</button>
 <br>
 
 {{#conditional-loading-spinner condition=loading}}
   {{#if model.length}}
-    <div class='table screened-urls'>
-      <div class="heading-container">
-        <div class="col heading first domain">{{i18n 'admin.logs.screened_urls.domain'}}</div>
-        <div class="col heading action">{{i18n 'admin.logs.action'}}</div>
-        <div class="col heading match_count">{{i18n 'admin.logs.match_count'}}</div>
-        <div class="col heading last_match_at">{{i18n 'admin.logs.last_match_at'}}</div>
-        <div class="col heading created_at">{{i18n 'admin.logs.created_at'}}</div>
-        <div class="clearfix"></div>
-      </div>
-
+    <table class='screened-urls grid'>
+      <thead>
+        <th class="first domain">{{i18n 'admin.logs.screened_urls.domain'}}</th>
+        <th class="action">{{i18n 'admin.logs.action'}}</th>
+        <th class="match_count">{{i18n 'admin.logs.match_count'}}</th>
+        <th class="last_match_at">{{i18n 'admin.logs.last_match_at'}}</th>
+        <th class="created_at">{{i18n 'admin.logs.created_at'}}</th>
+      </thead>
+      <tbody>
       {{#each model as |url|}}
-        <div class="admin-list-item">
-          <div class="col first domain">
+        <tr class="admin-list-item">
+          <td class="col first domain">
             <div class="overflow-ellipsis" title={{url.domain}}>{{url.domain}}</div>
-          </div>
-          <div class="col action">{{url.actionName}}</div>
-          <div class="col match_count">{{url.match_count}}</div>
-          <div class="col last_match_at">{{age-with-tooltip url.last_match_at}}</div>
-          <div class="col created_at">{{age-with-tooltip url.created_at}}</div>
-          <div class="clearfix"></div>
-        </div>
+          </td>
+          <td class="col action">{{url.actionName}}</td>
+          <td class="col match_count"><div class="label">{{i18n 'admin.logs.match_count'}}</div>{{url.match_count}}</td>
+          <td class="col last_match_at"><div class="label">{{i18n 'admin.logs.last_match_at'}}</div>{{age-with-tooltip url.last_match_at}}</td>
+          <td class="col created_at"><div class="label">{{i18n 'admin.logs.created_at'}}</div>{{age-with-tooltip url.created_at}}</td>
+        </tr>
       {{/each}}
-    </div>
+      </tbody>
+    </table>
   {{else}}
     {{i18n 'search.no_results'}}
   {{/if}}
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 6862be012bc..9572c81aa9e 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -237,24 +237,38 @@ $mobile-breakpoint: 700px;
     h3 {
       font-weight: normal;
       font-size: $font-0;
+      @include breakpoint(mobile) {
+        word-wrap: break-word;
+      }
     }
     button.edit {
       float: right;
     }
     .site-text-value {
       margin: 0.5em 5em 0.5em 0;
-      max-height: 100px;
+      @include breakpoint(medium, min-width) {
+        max-height: 100px;
+      }
+      @include breakpoint(mobile) {
+        word-wrap: break-word;
+      }
       color: $primary-medium;
     }
   }
   .edit-site-text {
     textarea {
-      width: 80%;
+      width: 100%;
+      max-width: 800px;
     }
     .save-messages,
     .title {
       margin-bottom: 1em;
     }
+    @include breakpoint(mobile) {
+      .title {
+        word-wrap: break-word;
+      }
+    }
     .go-back {
       margin-top: 1em;
     }
@@ -533,8 +547,14 @@ $mobile-breakpoint: 700px;
     padding: 10px;
     display: flex;
     align-items: center;
+    @include breakpoint(mobile) {
+      margin: 0 -10px;
+    }
     input {
       margin: 0;
+      @include breakpoint(tablet) {
+        max-width: 150px;
+      }
     }
     &.search {
       width: auto;
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index 3017ff8b239..f689bf5762b 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -97,6 +97,9 @@ table.api-keys {
       grid-column-end: -1;
       grid-column-start: 2;
       text-align: right;
+      .btn {
+        margin-bottom: 0.25em;
+      }
     }
   }
   //IE11 Support
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
index 6b440d73b72..0a047f6a6bc 100644
--- a/app/assets/stylesheets/common/admin/staff_logs.scss
+++ b/app/assets/stylesheets/common/admin/staff_logs.scss
@@ -1,7 +1,5 @@
 // Styles for /admin/logs
 
-.screened-emails,
-.screened-urls,
 .web-hook-events {
   border-bottom: dotted 1px dark-light-choose($primary-low-mid, $secondary);
   .heading-container {
@@ -222,22 +220,6 @@
   display: block;
 }
 
-.screened-emails,
-.screened-urls {
-  .email,
-  .url,
-  .domain {
-    width: 300px;
-  }
-  .action,
-  .match_count,
-  .last_match_at,
-  .created_at {
-    text-align: center;
-    width: 9.9099%;
-  }
-}
-
 .screened-ip-address-form {
   margin-left: 6px;
   .combobox {
@@ -245,14 +227,6 @@
   }
 }
 
-.screened-emails,
-.screened-urls {
-  .ip_address {
-    width: 9.9099%;
-    text-align: center;
-  }
-}
-
 .screened-ip-controls {
   display: flex;
   flex-wrap: wrap;