diff --git a/app/assets/javascripts/admin/components/themes-list.js.es6 b/app/assets/javascripts/admin/components/themes-list.js.es6 index 56006005886..b97ecfd9b6e 100644 --- a/app/assets/javascripts/admin/components/themes-list.js.es6 +++ b/app/assets/javascripts/admin/components/themes-list.js.es6 @@ -61,18 +61,6 @@ export default Ember.Component.extend({ } }, - didRender() { - this._super(...arguments); - - // hide scrollbar - const $container = this.$(".themes-list-container"); - const containerNode = $container[0]; - if (containerNode) { - const width = containerNode.offsetWidth - containerNode.clientWidth; - $container.css("width", `calc(100% + ${width}px)`); - } - }, - actions: { changeView(newTab) { if (newTab !== this.get("currentTab")) { diff --git a/app/assets/javascripts/admin/templates/components/themes-list.hbs b/app/assets/javascripts/admin/templates/components/themes-list.hbs index eff53727149..f605d21d5bb 100644 --- a/app/assets/javascripts/admin/templates/components/themes-list.hbs +++ b/app/assets/javascripts/admin/templates/components/themes-list.hbs @@ -37,4 +37,11 @@ {{I18n "admin.customize.theme.empty"}} {{/if}} - \ No newline at end of file + + + + +
+ {{d-button label="admin.customize.new" icon="plus" action=(route-action "showCreateModal") class="btn-primary"}} + {{d-button action=(route-action "importModal") icon="upload" label="admin.customize.import" class="btn-default"}} +
diff --git a/app/assets/javascripts/admin/templates/customize-themes.hbs b/app/assets/javascripts/admin/templates/customize-themes.hbs index 268febd4352..74186ca728c 100644 --- a/app/assets/javascripts/admin/templates/customize-themes.hbs +++ b/app/assets/javascripts/admin/templates/customize-themes.hbs @@ -1,12 +1,5 @@ {{#unless editingTheme}} -
- - -
- {{d-button label="admin.customize.new" icon="plus" action=(route-action "showCreateModal") class="btn-primary"}} - {{d-button action=(route-action "importModal") icon="upload" label="admin.customize.import" class="btn-default"}} -
-
{{themes-list themes=fullThemes components=childThemes currentTab=currentTab}} + {{/unless}} {{outlet}} diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss index dcbaf0212e9..a5f26939a48 100644 --- a/app/assets/stylesheets/common/admin/customize.scss +++ b/app/assets/stylesheets/common/admin/customize.scss @@ -59,19 +59,6 @@ } .admin-customize.admin-customize-themes { - .customize-themes-header { - border-bottom: 1px solid $primary-low; - padding-bottom: 8px; - display: flex; - - .title { - color: $primary-medium; - flex-grow: 1; - h3 { - margin-bottom: 0; - } - } - } .admin-container { padding: 0; } @@ -141,6 +128,12 @@ font-size: $font-up-4; font-weight: bold; margin-bottom: 10px; + a { + font-size: $font-down-2; + } + .btn { + line-height: $line-height-small; + } } .theme-description { @@ -217,16 +210,17 @@ } } .themes-list { - border-right: 1px solid $primary-low; - border-bottom: 1px solid $primary-low; display: inline-block; - overflow: hidden; + .create-actions { + margin-top: 0.5em; + } } .themes-list-header { width: 100%; border-bottom: 1px solid $primary-low; - + border-top: 1px solid $primary-low; + border-right: 1px solid $primary-low; .tab { display: inline-block; padding: 10px; @@ -237,7 +231,8 @@ &.active { font-weight: bold; - color: $tertiary; + color: $secondary; + background: $danger; } &:not(.active) { @@ -251,10 +246,18 @@ } .themes-list-container { - overflow-y: scroll; + overflow-y: auto; box-sizing: content-box; - max-height: 700px; - width: 100%; /* overridden in javascript to hide scrollbar */ + max-height: 60vh; + @media screen and (max-height: 1000px) { + max-height: 50vh; + } + @media screen and (max-height: 800px) { + max-height: 40vh; + } + border-right: 1px solid $primary-low; + border-bottom: 1px solid $primary-low; + width: 100%; .themes-list-item:last-child { border-bottom: none; @@ -311,15 +314,12 @@ .info { overflow: hidden; + display: flex; font-weight: bold; font-size: $font-up-1; - .name { - float: left; - } - .icons { - float: right; + margin-left: auto; } } diff --git a/app/assets/stylesheets/desktop/admin_customize.scss b/app/assets/stylesheets/desktop/admin_customize.scss index 73ef095ec10..d816db9b72a 100644 --- a/app/assets/stylesheets/desktop/admin_customize.scss +++ b/app/assets/stylesheets/desktop/admin_customize.scss @@ -1,16 +1,10 @@ .admin-customize { .show-current-style { - padding-left: 10px; - padding-top: 10px; - width: 70%; + padding-left: 2%; + width: 68%; } .themes-list { width: 28%; } - - .customize-themes-header { - flex-direction: row; - align-items: center; - } } diff --git a/app/assets/stylesheets/mobile/admin_customize.scss b/app/assets/stylesheets/mobile/admin_customize.scss index 76676e67448..0bacd8c6587 100644 --- a/app/assets/stylesheets/mobile/admin_customize.scss +++ b/app/assets/stylesheets/mobile/admin_customize.scss @@ -6,10 +6,10 @@ .themes-list { width: 100%; + margin-bottom: 1em; } - - .customize-themes-header { - flex-direction: column; - align-items: flex-start; + .form-horizontal.theme.settings .setting-label, + .admin-container .select-kit { + width: 100%; } }