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