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

{{i18n 'admin.badges.badge_intro.title'}}

@@ -13,4 +13,4 @@
-{{/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 @@ -
+

{{I18n "admin.customize.theme.themes_intro"}}

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