diff --git a/app/assets/javascripts/admin/components/themes-list.js.es6 b/app/assets/javascripts/admin/components/themes-list.js.es6 index c9498566c39..da14b6492a0 100644 --- a/app/assets/javascripts/admin/components/themes-list.js.es6 +++ b/app/assets/javascripts/admin/components/themes-list.js.es6 @@ -1,8 +1,6 @@ import { THEMES, COMPONENTS } from "admin/models/theme"; import { default as computed } from "ember-addons/ember-computed-decorators"; -const MAX_LIST_HEIGHT = 700; - export default Ember.Component.extend({ THEMES: THEMES, COMPONENTS: COMPONENTS, @@ -72,15 +70,6 @@ export default Ember.Component.extend({ const width = containerNode.offsetWidth - containerNode.clientWidth; $container.css("width", `calc(100% + ${width}px)`); } - - let height = -1; - Array.from(this.$(".themes-list-item")).forEach(node => { - const nodeHeight = $(node).outerHeight(); - if (height + nodeHeight <= MAX_LIST_HEIGHT) { - height += nodeHeight; - } - }); - $container.css("max-height", `${height}px`); }, actions: { diff --git a/app/assets/javascripts/admin/routes/admin-customize-themes-index.js.es6 b/app/assets/javascripts/admin/routes/admin-customize-themes-index.js.es6 index d74a4778009..ea09122d628 100644 --- a/app/assets/javascripts/admin/routes/admin-customize-themes-index.js.es6 +++ b/app/assets/javascripts/admin/routes/admin-customize-themes-index.js.es6 @@ -1,3 +1,5 @@ +import { emojiUrlFor } from "discourse/lib/text"; + const externalResources = [ { key: "admin.customize.theme.beginners_guide_title", @@ -20,6 +22,9 @@ export default Ember.Route.extend({ setupController(controller) { this._super(...arguments); this.controllerFor("adminCustomizeThemes").set("editingTheme", false); - controller.set("externalResources", externalResources); + controller.setProperties({ + externalResources, + womanArtistEmojiURL: emojiUrlFor("woman_artist:t5") + }); } }); diff --git a/app/assets/javascripts/admin/templates/components/themes-list.hbs b/app/assets/javascripts/admin/templates/components/themes-list.hbs index 5daf60e8a94..6a553a9450a 100644 --- a/app/assets/javascripts/admin/templates/components/themes-list.hbs +++ b/app/assets/javascripts/admin/templates/components/themes-list.hbs @@ -7,7 +7,7 @@ -
+
{{#if hasThemes}} {{#if componentsTabActive}} {{#each themesList as |theme|}} diff --git a/app/assets/javascripts/admin/templates/customize-themes-index.hbs b/app/assets/javascripts/admin/templates/customize-themes-index.hbs index 307044d16ed..565d0024dbb 100644 --- a/app/assets/javascripts/admin/templates/customize-themes-index.hbs +++ b/app/assets/javascripts/admin/templates/customize-themes-index.hbs @@ -1,11 +1,14 @@
-

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

-
- {{#each externalResources as |resource|}} - - {{d-icon resource.icon}} - {{I18n resource.key}} - - {{/each}} + +
+

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

+
+ {{#each externalResources as |resource|}} + + {{d-icon resource.icon}} + {{I18n resource.key}} + + {{/each}} +
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss index 41bee9e411d..667393f66c8 100644 --- a/app/assets/stylesheets/common/admin/customize.scss +++ b/app/assets/stylesheets/common/admin/customize.scss @@ -59,18 +59,6 @@ } .admin-customize.admin-customize-themes { - .themes-intro { - float: right; - width: 34%; - margin-right: 20%; - margin-top: 60px; - - .external-link { - display: block; - margin-bottom: 5px; - } - } - .customize-themes-header { border-bottom: 1px solid $primary-low; padding-bottom: 8px; @@ -146,6 +134,12 @@ } } .show-current-style { + padding-left: 10px; + padding-top: 10px; + display: inline-block; + width: 70%; + vertical-align: top; + .url { margin-bottom: 10px; } @@ -175,19 +169,42 @@ .description { margin-bottom: 12px; } - - padding-left: 15px; - padding-top: 10px; - float: left; - width: 70%; } .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; + } + .content-wrapper { + display: inline-block; + vertical-align: top; + width: 65%; + h1 { + display: inline-block; + } + } + .external-link { + display: inline-block; + display: block; + margin-bottom: 5px; + } + } .themes-list { border-right: 1px solid $primary-low; border-bottom: 1px solid $primary-low; - float: left; + display: inline-block; width: 28%; overflow: hidden; } @@ -213,7 +230,7 @@ cursor: pointer; &:hover { - background-color: $tertiary-low; + background-color: $primary-very-low; } } } @@ -222,6 +239,7 @@ .themes-list-container { overflow-y: scroll; box-sizing: content-box; + max-height: 700px; width: 100%; /* overridden in javascript to hide scrollbar */ .themes-list-item:last-child { @@ -245,7 +263,7 @@ } } &:not(.inactive-indicator):not(.selected):hover { - background-color: $tertiary-low; + background-color: $primary-very-low; .component { border-color: $primary-low-mid; }