UX: Various admin class and structure improvements for styling

This commit is contained in:
Robin Ward 2017-10-30 14:13:49 -04:00
parent 28bc5ac10a
commit 528eac5a07
8 changed files with 44 additions and 30 deletions
app/assets
javascripts
stylesheets/common

@ -0,0 +1,3 @@
export default Ember.Component.extend({
tagName: ''
})

@ -1,5 +1,20 @@
import computed from 'ember-addons/ember-computed-decorators';
export default Ember.Controller.extend({
showBadges: function() {
return this.get('currentUser.admin') && this.siteSettings.enable_badges;
}.property()
application: Ember.inject.controller(),
@computed
showBadges() {
return this.currentUser.get('admin') && this.siteSettings.enable_badges;
},
@computed('application.currentPath')
adminContentsClassName(currentPath) {
return currentPath.split('.').filter(segment => {
return segment !== 'index' &&
segment !== 'loading' &&
segment !== 'show' &&
segment !== 'admin';
}).map(Ember.String.dasherize).join(' ');
}
});

@ -27,7 +27,7 @@
</ul>
<div class='boxed white admin-content'>
<div class='admin-contents'>
<div class='admin-contents {{adminContentsClassName}}'>
{{outlet}}
</div>
</div>

@ -1,10 +1,8 @@
<div class="api">
{{#admin-nav}}
{{nav-item route='adminApiKeys' label='admin.api.title'}}
{{nav-item route='adminWebHooks' label='admin.web_hooks.title'}}
{{/admin-nav}}
{{#admin-nav}}
{{nav-item route='adminApiKeys' label='admin.api.title'}}
{{nav-item route='adminWebHooks' label='admin.web_hooks.title'}}
{{/admin-nav}}
<div class="admin-container">
{{outlet}}
</div>
<div class="admin-container">
{{outlet}}
</div>

@ -1,16 +1,14 @@
<div class='customize'>
{{#admin-nav}}
{{nav-item route='adminCustomizeThemes' label='admin.customize.theme.title'}}
{{nav-item route='adminCustomize.colors' label='admin.customize.colors.title'}}
{{nav-item route='adminSiteText' label='admin.site_text.title'}}
{{nav-item route='adminCustomizeEmailTemplates' label='admin.customize.email_templates.title'}}
{{nav-item route='adminUserFields' label='admin.user_fields.title'}}
{{nav-item route='adminEmojis' label='admin.emoji.title'}}
{{nav-item route='adminPermalinks' label='admin.permalink.title'}}
{{nav-item route='adminEmbedding' label='admin.embedding.title'}}
{{/admin-nav}}
{{#admin-nav}}
{{nav-item route='adminCustomizeThemes' label='admin.customize.theme.title'}}
{{nav-item route='adminCustomize.colors' label='admin.customize.colors.title'}}
{{nav-item route='adminSiteText' label='admin.site_text.title'}}
{{nav-item route='adminCustomizeEmailTemplates' label='admin.customize.email_templates.title'}}
{{nav-item route='adminUserFields' label='admin.user_fields.title'}}
{{nav-item route='adminEmojis' label='admin.emoji.title'}}
{{nav-item route='adminPermalinks' label='admin.permalink.title'}}
{{nav-item route='adminEmbedding' label='admin.embedding.title'}}
{{/admin-nav}}
<div class="admin-container">
{{outlet}}
</div>
<div class="admin-container">
{{outlet}}
</div>

@ -1,7 +1,7 @@
import computed from 'ember-addons/ember-computed-decorators';
export default Ember.Component.extend({
classNameBindings: ['containerClass', 'condition:visible'],
classNameBindings: [':loading-container', 'containerClass', 'condition:visible'],
@computed('size')
containerClass(size) {

@ -1,5 +1,5 @@
// Customise area
.customize {
.admin-customize {
h1 {
margin-bottom: 10px;
input {

@ -42,11 +42,11 @@
left: 27px;
}
.rtl .customize .current-style .toggle-mobile {
.rtl .admin-customize .current-style .toggle-mobile {
position: static !important;
float: left !important;
}
.rtl .customize .current-style .toggle-maximize {
.rtl .admin-customize .current-style .toggle-maximize {
position: static !important;
float: left !important;
}