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,18 +31,20 @@
</ul> </ul>
</div> </div>
{{#if view.headerActive}} <div class="admin-container">
{{aceEditor content=header mode="html"}} {{#if view.headerActive}}
{{/if}} {{aceEditor content=header mode="html"}}
{{#if view.stylesheetActive}} {{/if}}
{{aceEditor content=stylesheet mode="scss"}} {{#if view.stylesheetActive}}
{{/if}} {{aceEditor content=stylesheet mode="scss"}}
{{#if view.mobileHeaderActive}} {{/if}}
{{aceEditor content=mobile_header mode="html"}} {{#if view.mobileHeaderActive}}
{{/if}} {{aceEditor content=mobile_header mode="html"}}
{{#if view.mobileStylesheetActive}} {{/if}}
{{aceEditor content=mobile_stylesheet mode="scss"}} {{#if view.mobileStylesheetActive}}
{{/if}} {{aceEditor content=mobile_stylesheet mode="scss"}}
{{/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,95 +7,97 @@
</div> </div>
</div> </div>
{{#if model.loading}} <div class="admin-container">
<div class='admin-loading'>{{i18n loading}}</div> {{#if model.loading}}
{{else}} <div class='admin-loading'>{{i18n loading}}</div>
{{#if model.length}} {{else}}
<table class='admin-flags'> {{#if model.length}}
<thead> <table class='admin-flags'>
<tr> <thead>
<th class='user'></th> <tr>
<th class='excerpt'></th> <th class='user'></th>
<th class='flaggers'>{{i18n admin.flags.flagged_by}}</th> <th class='excerpt'></th>
<th class='last-flagged'></th> <th class='flaggers'>{{i18n admin.flags.flagged_by}}</th>
<th class='action'></th> <th class='last-flagged'></th>
</tr> <th class='action'></th>
</thead> </tr>
<tbody> </thead>
{{#each flaggedPost in content}} <tbody>
<tr {{bindAttr class="flaggedPost.extraClasses"}}> {{#each flaggedPost in content}}
<tr {{bindAttr class="flaggedPost.extraClasses"}}>
<td class='user'>{{#if flaggedPost.user}}{{#link-to 'adminUser' flaggedPost.user}}{{avatar flaggedPost.user imageSize="small"}}{{/link-to}}{{/if}}</td> <td class='user'>{{#if flaggedPost.user}}{{#link-to 'adminUser' flaggedPost.user}}{{avatar flaggedPost.user imageSize="small"}}{{/link-to}}{{/if}}</td>
<td class='excerpt'>{{#if flaggedPost.topicHidden}}<i title='{{i18n topic_statuses.invisible.help}}' class='icon icon-eye-close'></i> {{/if}}<h3><a href='{{unbound flaggedPost.url}}'>{{flaggedPost.title}}</a></h3><br>{{{flaggedPost.excerpt}}} <td class='excerpt'>{{#if flaggedPost.topicHidden}}<i title='{{i18n topic_statuses.invisible.help}}' class='icon icon-eye-close'></i> {{/if}}<h3><a href='{{unbound flaggedPost.url}}'>{{flaggedPost.title}}</a></h3><br>{{{flaggedPost.excerpt}}}
</td> </td>
<td class='flaggers'> <td class='flaggers'>
<table> <table>
{{#each flaggedPost.flaggers}} {{#each flaggedPost.flaggers}}
<tr>
<td>
{{#link-to 'adminUser' this.user}}{{avatar this.user imageSize="small"}} {{/link-to}}
</td>
<td>
{{date this.flaggedAt}}
</td>
<td>
{{this.flagType}}
</td>
</tr>
{{/each}}
</table>
</td>
</tr>
{{#each flaggedPost.messages}}
<tr> <tr>
<td> <td></td>
{{#link-to 'adminUser' this.user}}{{avatar this.user imageSize="small"}} {{/link-to}} <td class='message'>
</td> <div>
<td> {{#link-to 'adminUser' user}}{{avatar user imageSize="small"}}{{/link-to}}
{{date this.flaggedAt}} {{message}}
</td> {{#unless bySystemUser}}
<td> <a href="{{unbound permalink}}"><button class='btn'><i class="icon-reply"></i> {{i18n admin.flags.view_message}}</button></a>
{{this.flagType}} {{/unless}}
</div>
</td> </td>
<td></td>
<td></td>
</tr> </tr>
{{/each}} {{/each}}
</table>
</td>
</tr> <tr>
<td colspan="4" class="action">
{{#if adminActiveFlagsView}}
{{#if flaggedPost.postHidden}}
<button title='{{i18n admin.flags.disagree_unhide_title}}' class='btn' {{action disagreeFlags flaggedPost}}><i class="icon-thumbs-down"></i> {{i18n admin.flags.disagree_unhide}}</button>
<button title='{{i18n admin.flags.defer_title}}' class='btn' {{action deferFlags flaggedPost}}><i class="icon-external-link"></i> {{i18n admin.flags.defer}}</button>
{{else}}
<button title='{{i18n admin.flags.agree_hide_title}}' class='btn' {{action agreeFlags flaggedPost}}><i class="icon-thumbs-up"></i> {{i18n admin.flags.agree_hide}}</button>
<button title='{{i18n admin.flags.disagree_title}}' class='btn' {{action disagreeFlags flaggedPost}}><i class="icon-thumbs-down"></i> {{i18n admin.flags.disagree}}</button>
{{/if}}
{{#each flaggedPost.messages}} {{#if flaggedPost.canDeleteAsSpammer}}
<tr> <button title='{{i18n admin.flags.delete_spammer_title}}' class="btn" {{action deleteSpammer flaggedPost}}><i class="icon icon-warning-sign"></i> {{i18n flagging.delete_spammer}}</button>
<td></td> {{/if}}
<td class='message'>
<div> <button title='{{i18n admin.flags.delete_post_title}}' class='btn' {{action deletePost flaggedPost}}><i class="icon-trash"></i> {{i18n admin.flags.delete_post}}</button>
{{#link-to 'adminUser' user}}{{avatar user imageSize="small"}}{{/link-to}} {{/if}}
{{message}}
{{#unless bySystemUser}}
<a href="{{unbound permalink}}"><button class='btn'><i class="icon-reply"></i> {{i18n admin.flags.view_message}}</button></a>
{{/unless}}
</div>
</td> </td>
<td></td> </tr>
<td></td>
</tr>
{{/each}} {{/each}}
<tr> </tbody>
<td colspan="4" class="action"> </table>
{{#if adminActiveFlagsView}} {{#if view.loading}}
{{#if flaggedPost.postHidden}} <div class='admin-loading'>{{i18n loading}}</div>
<button title='{{i18n admin.flags.disagree_unhide_title}}' class='btn' {{action disagreeFlags flaggedPost}}><i class="icon-thumbs-down"></i> {{i18n admin.flags.disagree_unhide}}</button> {{/if}}
<button title='{{i18n admin.flags.defer_title}}' class='btn' {{action deferFlags flaggedPost}}><i class="icon-external-link"></i> {{i18n admin.flags.defer}}</button>
{{else}}
<button title='{{i18n admin.flags.agree_hide_title}}' class='btn' {{action agreeFlags flaggedPost}}><i class="icon-thumbs-up"></i> {{i18n admin.flags.agree_hide}}</button>
<button title='{{i18n admin.flags.disagree_title}}' class='btn' {{action disagreeFlags flaggedPost}}><i class="icon-thumbs-down"></i> {{i18n admin.flags.disagree}}</button>
{{/if}}
{{#if flaggedPost.canDeleteAsSpammer}} {{else}}
<button title='{{i18n admin.flags.delete_spammer_title}}' class="btn" {{action deleteSpammer flaggedPost}}><i class="icon icon-warning-sign"></i> {{i18n flagging.delete_spammer}}</button> <p>{{i18n admin.flags.no_results}}</p>
{{/if}}
<button title='{{i18n admin.flags.delete_post_title}}' class='btn' {{action deletePost flaggedPost}}><i class="icon-trash"></i> {{i18n admin.flags.delete_post}}</button>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{#if view.loading}}
<div class='admin-loading'>{{i18n loading}}</div>
{{/if}} {{/if}}
{{else}}
<p>{{i18n admin.flags.no_results}}</p>
{{/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,79 +17,81 @@
</div> </div>
</div> </div>
{{#if hasSelection}} <div class="admin-container">
<div id='selected-controls'> {{#if hasSelection}}
<button {{action approveUsers}} class='btn'>{{countI18n admin.users.approved_selected countBinding="selectedCount"}}</button> <div id='selected-controls'>
<button {{action rejectUsers}} class='btn btn-danger'>{{countI18n admin.users.reject_selected countBinding="selectedCount"}}</button> <button {{action approveUsers}} class='btn'>{{countI18n admin.users.approved_selected countBinding="selectedCount"}}</button>
</div> <button {{action rejectUsers}} class='btn btn-danger'>{{countI18n admin.users.reject_selected countBinding="selectedCount"}}</button>
{{/if}} </div>
{{/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>
{{#if showApproval}} {{#if showApproval}}
<th>{{view Ember.Checkbox checkedBinding="selectAll"}}</th> <th>{{view Ember.Checkbox checkedBinding="selectAll"}}</th>
{{/if}} {{/if}}
<th>&nbsp;</th> <th>&nbsp;</th>
<th>{{i18n username}}</th> <th>{{i18n username}}</th>
<th>{{i18n email}}</th> <th>{{i18n email}}</th>
<th>{{i18n admin.users.last_emailed}}</th> <th>{{i18n admin.users.last_emailed}}</th>
<th>{{i18n last_seen}}</th> <th>{{i18n last_seen}}</th>
<th>{{i18n admin.user.topics_entered}}</th> <th>{{i18n admin.user.topics_entered}}</th>
<th>{{i18n admin.user.posts_read_count}}</th> <th>{{i18n admin.user.posts_read_count}}</th>
<th>{{i18n admin.user.time_read}}</th> <th>{{i18n admin.user.time_read}}</th>
<th>{{i18n created}}</th> <th>{{i18n created}}</th>
{{#if showApproval}} {{#if showApproval}}
<th>{{i18n admin.users.approved}}</th> <th>{{i18n admin.users.approved}}</th>
{{/if}} {{/if}}
<th>&nbsp;</th> <th>&nbsp;</th>
</tr> </tr>
{{#each model}} {{#each model}}
<tr {{bindAttr class="selected"}}> <tr {{bindAttr class="selected"}}>
{{#if controller.showApproval}} {{#if controller.showApproval}}
<td>
{{#if can_approve}}
{{view Ember.Checkbox checkedBinding="selected"}}
{{/if}}
</td>
{{/if}}
<td>{{#link-to 'adminUser' this}}{{avatar this imageSize="small"}}{{/link-to}}</td>
<td>{{#link-to 'adminUser' this}}{{unbound username}}{{/link-to}}</td>
<td>{{shorten email}}</td>
<td>{{{unbound last_emailed_age}}}</td>
<td>{{{unbound last_seen_age}}}</td>
<td>{{{unbound topics_entered}}}</td>
<td>{{{unbound posts_read_count}}}</td>
<td>{{{unbound time_read}}}</td>
<td>{{{unbound created_at_age}}}</td>
{{#if showApproval}}
<td> <td>
{{#if can_approve}} {{#if approved}}
{{view Ember.Checkbox checkedBinding="selected"}} {{i18n yes_value}}
{{else}}
{{i18n no_value}}
{{/if}} {{/if}}
</td> </td>
{{/if}}
<td>{{#link-to 'adminUser' this}}{{avatar this imageSize="small"}}{{/link-to}}</td>
<td>{{#link-to 'adminUser' this}}{{unbound username}}{{/link-to}}</td>
<td>{{shorten email}}</td>
<td>{{{unbound last_emailed_age}}}</td>
<td>{{{unbound last_seen_age}}}</td>
<td>{{{unbound topics_entered}}}</td>
<td>{{{unbound posts_read_count}}}</td>
<td>{{{unbound time_read}}}</td>
<td>{{{unbound created_at_age}}}</td>
{{#if showApproval}}
<td>
{{#if approved}}
{{i18n yes_value}}
{{else}}
{{i18n no_value}}
{{/if}} {{/if}}
</td> <td>
{{/if}} {{#if admin}}<i class="icon-trophy" title="{{i18n admin.title}}"></i>{{/if}}
<td> {{#if moderator}}<i class="icon-magic" title="{{i18n admin.moderator}}"></i>{{/if}}
{{#if admin}}<i class="icon-trophy" title="{{i18n admin.title}}"></i>{{/if}} <td>
{{#if moderator}}<i class="icon-magic" title="{{i18n admin.moderator}}"></i>{{/if}} </tr>
<td> {{/each}}
</tr>
{{/each}}
</table> </table>
{{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 {