From df85d4593e724b9a87ecf0ee4cc164002105ee38 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 9 Apr 2019 20:32:24 -0400
Subject: [PATCH] UX: Unify admin intro styles for badges/customize, improve
 mobile

---
 .../admin/templates/badges-index.hbs          |  4 +-
 .../templates/customize-themes-index.hbs      |  2 +-
 .../stylesheets/common/admin/admin_base.scss  |  1 +
 .../stylesheets/common/admin/admin_intro.scss | 44 +++++++++++++++++++
 .../stylesheets/common/admin/badges.scss      | 22 ----------
 .../stylesheets/common/admin/customize.scss   | 31 -------------
 .../stylesheets/mobile/admin_customize.scss   |  5 +++
 7 files changed, 53 insertions(+), 56 deletions(-)
 create mode 100644 app/assets/stylesheets/common/admin/admin_intro.scss

diff --git a/app/assets/javascripts/admin/templates/badges-index.hbs b/app/assets/javascripts/admin/templates/badges-index.hbs
index ebeb2d56439..a3296fc23e3 100644
--- a/app/assets/javascripts/admin/templates/badges-index.hbs
+++ b/app/assets/javascripts/admin/templates/badges-index.hbs
@@ -1,5 +1,5 @@
 {{#d-section class="current-badges"}}
-  <div class="badge-intro">
+  <div class="badge-intro admin-intro">
     <img src={{badgeIntroEmoji}} class="badge-intro-emoji">
     <div class="content-wrapper">
       <h1>{{i18n 'admin.badges.badge_intro.title'}}</h1>
@@ -13,4 +13,4 @@
       </div>
     </div>
   </div>
-{{/d-section}}
\ No newline at end of file
+{{/d-section}}
diff --git a/app/assets/javascripts/admin/templates/customize-themes-index.hbs b/app/assets/javascripts/admin/templates/customize-themes-index.hbs
index d450f50efe2..56438e5ae74 100644
--- a/app/assets/javascripts/admin/templates/customize-themes-index.hbs
+++ b/app/assets/javascripts/admin/templates/customize-themes-index.hbs
@@ -1,4 +1,4 @@
-<div class="themes-intro">
+<div class="themes-intro admin-intro">
   <img src={{womanArtistEmojiURL}}>
   <div class="content-wrapper">
     <h1>{{I18n "admin.customize.theme.themes_intro"}}</h1>
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index a81ff64ea93..f1c7b9c4da0 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -980,3 +980,4 @@ table#user-badges {
 @import "common/admin/admin_report_stacked_chart";
 @import "common/admin/admin_report_table";
 @import "common/admin/admin_report_inline_table";
+@import "common/admin/admin_intro";
diff --git a/app/assets/stylesheets/common/admin/admin_intro.scss b/app/assets/stylesheets/common/admin/admin_intro.scss
new file mode 100644
index 00000000000..f0a7ad156d5
--- /dev/null
+++ b/app/assets/stylesheets/common/admin/admin_intro.scss
@@ -0,0 +1,44 @@
+// Unified styles for badge and customize pages
+.admin-intro {
+  display: inline-block;
+  width: 51%;
+  vertical-align: top;
+  margin-left: 20%;
+  margin-top: 60px;
+
+  img {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+    vertical-align: top;
+    margin-top: 5px;
+  }
+  .create-actions {
+    margin-bottom: 1em;
+  }
+  .content-wrapper {
+    display: inline-block;
+    vertical-align: top;
+    width: 65%;
+    h1 {
+      display: inline-block;
+      line-height: $line-height-medium;
+    }
+  }
+  .external-link {
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  @include breakpoint(mobile) {
+    width: 100%;
+    margin: 2em 0;
+    .content-wrapper {
+      width: 100%;
+    }
+    img {
+      display: none;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/admin/badges.scss b/app/assets/stylesheets/common/admin/badges.scss
index 495eb24a772..5351533f4fe 100644
--- a/app/assets/stylesheets/common/admin/badges.scss
+++ b/app/assets/stylesheets/common/admin/badges.scss
@@ -12,10 +12,6 @@
         margin-left: auto;
       }
     }
-    .badge-intro {
-      display: inline-flex;
-      flex: 0 1 50%;
-    }
     .content-list {
       flex: 0 0 27%;
     }
@@ -64,24 +60,6 @@
       background-color: unset;
     }
   }
-  .badge-intro {
-    margin-top: 10%;
-    h1 {
-      line-height: $line-height-medium;
-    }
-    .badge-intro-emoji {
-      // it's an emoji so we want fixed deminsions
-      height: 55px;
-      width: 55px;
-      margin-top: 5px;
-      margin-right: 5px;
-      flex: 0 0 auto; // IE flex fix
-    }
-    .external-link {
-      display: block;
-      margin-bottom: 5px;
-    }
-  }
   .current-badge {
     margin: 20px;
     p.help {
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index f93e7085046..c9652e3c345 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -171,37 +171,6 @@
   .add-component-button {
     vertical-align: middle;
   }
-  .themes-intro {
-    display: inline-block;
-    width: 51%;
-    vertical-align: top;
-    margin-left: 20%;
-    margin-top: 60px;
-
-    img {
-      display: inline-block;
-      margin-right: 10px;
-      width: 10%;
-      vertical-align: top;
-      margin-top: 5px;
-    }
-    .create-actions {
-      margin-bottom: 1em;
-    }
-    .content-wrapper {
-      display: inline-block;
-      vertical-align: top;
-      width: 65%;
-      h1 {
-        display: inline-block;
-        line-height: $line-height-medium;
-      }
-    }
-    .external-link {
-      display: block;
-      margin-bottom: 5px;
-    }
-  }
   .themes-list {
     display: inline-block;
     .create-actions {
diff --git a/app/assets/stylesheets/mobile/admin_customize.scss b/app/assets/stylesheets/mobile/admin_customize.scss
index 0bacd8c6587..83751fb311d 100644
--- a/app/assets/stylesheets/mobile/admin_customize.scss
+++ b/app/assets/stylesheets/mobile/admin_customize.scss
@@ -12,4 +12,9 @@
   .admin-container .select-kit {
     width: 100%;
   }
+
+  .admin-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }