FIX: site settings page layout at smaller widths
This commit is contained in:
parent
482b752046
commit
6eb5f1aec2
7 changed files with 190 additions and 168 deletions
app/assets
javascripts/admin/templates
customize.js.handlebarsemail.js.handlebarsflags.js.handlebarslogs.js.handlebarssite_settings_category.js.handlebarsusers_list.js.handlebars
stylesheets/common/admin
|
@ -31,6 +31,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="admin-container">
|
||||||
{{#if view.headerActive}}
|
{{#if view.headerActive}}
|
||||||
{{aceEditor content=header mode="html"}}
|
{{aceEditor content=header mode="html"}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
@ -43,6 +44,7 @@
|
||||||
{{#if view.mobileStylesheetActive}}
|
{{#if view.mobileStylesheetActive}}
|
||||||
{{aceEditor content=mobile_stylesheet mode="scss"}}
|
{{aceEditor content=mobile_stylesheet mode="scss"}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
</div>
|
||||||
{{/with}}
|
{{/with}}
|
||||||
<br>
|
<br>
|
||||||
<div class='status-actions'>
|
<div class='status-actions'>
|
||||||
|
|
|
@ -8,4 +8,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{outlet}}
|
<div class="admin-container">
|
||||||
|
{{outlet}}
|
||||||
|
</div>
|
|
@ -7,9 +7,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{#if model.loading}}
|
<div class="admin-container">
|
||||||
|
{{#if model.loading}}
|
||||||
<div class='admin-loading'>{{i18n loading}}</div>
|
<div class='admin-loading'>{{i18n loading}}</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
{{#if model.length}}
|
{{#if model.length}}
|
||||||
<table class='admin-flags'>
|
<table class='admin-flags'>
|
||||||
<thead>
|
<thead>
|
||||||
|
@ -98,4 +99,5 @@
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>{{i18n admin.flags.no_results}}</p>
|
<p>{{i18n admin.flags.no_results}}</p>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|
|
@ -9,4 +9,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{outlet}}
|
<div class="admin-container">
|
||||||
|
{{outlet}}
|
||||||
|
</div>
|
|
@ -1,4 +1 @@
|
||||||
<h2>{{name}}</h2>
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
{{collection contentBinding="filteredContent" classNames="form-horizontal settings" itemViewClass="Discourse.SiteSettingView"}}
|
{{collection contentBinding="filteredContent" classNames="form-horizontal settings" itemViewClass="Discourse.SiteSettingView"}}
|
||||||
|
|
|
@ -17,19 +17,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{#if hasSelection}}
|
<div class="admin-container">
|
||||||
|
{{#if hasSelection}}
|
||||||
<div id='selected-controls'>
|
<div id='selected-controls'>
|
||||||
<button {{action approveUsers}} class='btn'>{{countI18n admin.users.approved_selected countBinding="selectedCount"}}</button>
|
<button {{action approveUsers}} class='btn'>{{countI18n admin.users.approved_selected countBinding="selectedCount"}}</button>
|
||||||
<button {{action rejectUsers}} class='btn btn-danger'>{{countI18n admin.users.reject_selected countBinding="selectedCount"}}</button>
|
<button {{action rejectUsers}} class='btn btn-danger'>{{countI18n admin.users.reject_selected countBinding="selectedCount"}}</button>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
<h2>{{title}}</h2>
|
<h2>{{title}}</h2>
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
{{#if loading}}
|
{{#if loading}}
|
||||||
<div class='admin-loading'>{{i18n loading}}</div>
|
<div class='admin-loading'>{{i18n loading}}</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
{{#if model.length}}
|
{{#if model.length}}
|
||||||
<table class='table'>
|
<table class='table'>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -92,4 +93,5 @@
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>{{i18n search.no_results}}</p>
|
<p>{{i18n search.no_results}}</p>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
</div>
|
|
@ -78,12 +78,15 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.admin-container {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.admin-controls {
|
.admin-controls {
|
||||||
@include border-radius-all(5px);
|
@include border-radius-all(5px);
|
||||||
background-color: darken($white, 5%);
|
background-color: darken($white, 5%);
|
||||||
border: 1px solid darken($white, 10%);
|
border: 1px solid darken($white, 10%);
|
||||||
padding: 10px 10px 3px 0px;
|
padding: 10px 10px 3px 0px;
|
||||||
margin-bottom: 20px;
|
|
||||||
height: 35px;
|
height: 35px;
|
||||||
.nav.nav-pills {
|
.nav.nav-pills {
|
||||||
li.active {
|
li.active {
|
||||||
|
@ -145,7 +148,10 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
|
||||||
|
|
||||||
.site-settings-nav {
|
.site-settings-nav {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
margin-top: 33px;
|
margin-top: 40px;
|
||||||
|
.nav-stacked {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
li a.active {
|
li a.active {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: $nav-stacked-background-color-active;
|
background-color: $nav-stacked-background-color-active;
|
||||||
|
@ -154,7 +160,11 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
|
||||||
|
|
||||||
.site-settings-detail {
|
.site-settings-detail {
|
||||||
width: 850px;
|
width: 850px;
|
||||||
margin-left: 30px;
|
@include medium-width { width: 740px; }
|
||||||
|
@include small-width { width: 700px; }
|
||||||
|
margin-left: 0;
|
||||||
|
border-left: solid 1px lighten($nav-stacked-border-color, 5%);
|
||||||
|
padding: 30px 0 30px 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings {
|
.settings {
|
||||||
|
@ -164,16 +174,25 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
|
||||||
.setting-label {
|
.setting-label {
|
||||||
float: left;
|
float: left;
|
||||||
width: 196px;
|
width: 196px;
|
||||||
|
@include medium-width { width: 176px; }
|
||||||
|
@include small-width { width: 166px; }
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
.setting-value {
|
.setting-value {
|
||||||
float: left;
|
float: left;
|
||||||
width: 450px;
|
width: 450px;
|
||||||
|
@include medium-width { width: 360px; }
|
||||||
|
@include small-width { width: 330px; }
|
||||||
}
|
}
|
||||||
.setting-controls {
|
.setting-controls {
|
||||||
float: left;
|
float: left;
|
||||||
width: 144px;
|
width: 144px;
|
||||||
}
|
}
|
||||||
|
.input-setting-string {
|
||||||
|
width: 404px;
|
||||||
|
@include medium-width { width: 314px; }
|
||||||
|
@include small-width { width: 284px; }
|
||||||
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
padding-top: 3px;
|
padding-top: 3px;
|
||||||
|
@ -195,10 +214,6 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
|
||||||
color: darken($yellow, 20%);
|
color: darken($yellow, 20%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-setting-string {
|
|
||||||
width: 404px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
section.details {
|
section.details {
|
||||||
|
|
Reference in a new issue