FIX: site settings page layout at smaller widths

This commit is contained in:
Neil Lalonde 2013-11-16 14:14:34 -05:00
parent 482b752046
commit 6eb5f1aec2
7 changed files with 190 additions and 168 deletions

View file

@ -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'>

View file

@ -8,4 +8,6 @@
</div> </div>
</div> </div>
{{outlet}} <div class="admin-container">
{{outlet}}
</div>

View file

@ -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>

View file

@ -9,4 +9,6 @@
</div> </div>
</div> </div>
{{outlet}} <div class="admin-container">
{{outlet}}
</div>

View file

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

View file

@ -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>

View file

@ -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 {