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>
</div>
{{#if view.headerActive}}
{{aceEditor content=header mode="html"}}
{{/if}}
{{#if view.stylesheetActive}}
{{aceEditor content=stylesheet mode="scss"}}
{{/if}}
{{#if view.mobileHeaderActive}}
{{aceEditor content=mobile_header mode="html"}}
{{/if}}
{{#if view.mobileStylesheetActive}}
{{aceEditor content=mobile_stylesheet mode="scss"}}
{{/if}}
<div class="admin-container">
{{#if view.headerActive}}
{{aceEditor content=header mode="html"}}
{{/if}}
{{#if view.stylesheetActive}}
{{aceEditor content=stylesheet mode="scss"}}
{{/if}}
{{#if view.mobileHeaderActive}}
{{aceEditor content=mobile_header mode="html"}}
{{/if}}
{{#if view.mobileStylesheetActive}}
{{aceEditor content=mobile_stylesheet mode="scss"}}
{{/if}}
</div>
{{/with}}
<br>
<div class='status-actions'>

View File

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

View File

@ -7,95 +7,97 @@
</div>
</div>
{{#if model.loading}}
<div class='admin-loading'>{{i18n loading}}</div>
{{else}}
{{#if model.length}}
<table class='admin-flags'>
<thead>
<tr>
<th class='user'></th>
<th class='excerpt'></th>
<th class='flaggers'>{{i18n admin.flags.flagged_by}}</th>
<th class='last-flagged'></th>
<th class='action'></th>
</tr>
</thead>
<tbody>
{{#each flaggedPost in content}}
<tr {{bindAttr class="flaggedPost.extraClasses"}}>
<div class="admin-container">
{{#if model.loading}}
<div class='admin-loading'>{{i18n loading}}</div>
{{else}}
{{#if model.length}}
<table class='admin-flags'>
<thead>
<tr>
<th class='user'></th>
<th class='excerpt'></th>
<th class='flaggers'>{{i18n admin.flags.flagged_by}}</th>
<th class='last-flagged'></th>
<th class='action'></th>
</tr>
</thead>
<tbody>
{{#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>
<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 class='flaggers'>
<table>
{{#each flaggedPost.flaggers}}
<td class='flaggers'>
<table>
{{#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>
<td>
{{#link-to 'adminUser' this.user}}{{avatar this.user imageSize="small"}} {{/link-to}}
</td>
<td>
{{date this.flaggedAt}}
</td>
<td>
{{this.flagType}}
<td></td>
<td class='message'>
<div>
{{#link-to 'adminUser' user}}{{avatar user imageSize="small"}}{{/link-to}}
{{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></td>
</tr>
{{/each}}
</table>
</td>
{{/each}}
</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}}
<tr>
<td></td>
<td class='message'>
<div>
{{#link-to 'adminUser' user}}{{avatar user imageSize="small"}}{{/link-to}}
{{message}}
{{#unless bySystemUser}}
<a href="{{unbound permalink}}"><button class='btn'><i class="icon-reply"></i> {{i18n admin.flags.view_message}}</button></a>
{{/unless}}
</div>
{{#if flaggedPost.canDeleteAsSpammer}}
<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>
{{/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>
<td></td>
<td></td>
</tr>
</tr>
{{/each}}
<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}}
</tbody>
</table>
{{#if view.loading}}
<div class='admin-loading'>{{i18n loading}}</div>
{{/if}}
{{#if flaggedPost.canDeleteAsSpammer}}
<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>
{{/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>
{{else}}
<p>{{i18n admin.flags.no_results}}</p>
{{/if}}
{{else}}
<p>{{i18n admin.flags.no_results}}</p>
{{/if}}
{{/if}}
</div>

View File

@ -9,4 +9,6 @@
</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"}}

View File

@ -17,79 +17,81 @@
</div>
</div>
{{#if hasSelection}}
<div id='selected-controls'>
<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>
</div>
{{/if}}
<div class="admin-container">
{{#if hasSelection}}
<div id='selected-controls'>
<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>
</div>
{{/if}}
<h2>{{title}}</h2>
<br/>
<h2>{{title}}</h2>
<br/>
{{#if loading}}
<div class='admin-loading'>{{i18n loading}}</div>
{{else}}
{{#if model.length}}
<table class='table'>
<tr>
{{#if showApproval}}
<th>{{view Ember.Checkbox checkedBinding="selectAll"}}</th>
{{/if}}
<th>&nbsp;</th>
<th>{{i18n username}}</th>
<th>{{i18n email}}</th>
<th>{{i18n admin.users.last_emailed}}</th>
<th>{{i18n last_seen}}</th>
<th>{{i18n admin.user.topics_entered}}</th>
<th>{{i18n admin.user.posts_read_count}}</th>
<th>{{i18n admin.user.time_read}}</th>
<th>{{i18n created}}</th>
{{#if showApproval}}
<th>{{i18n admin.users.approved}}</th>
{{/if}}
<th>&nbsp;</th>
{{#if loading}}
<div class='admin-loading'>{{i18n loading}}</div>
{{else}}
{{#if model.length}}
<table class='table'>
<tr>
{{#if showApproval}}
<th>{{view Ember.Checkbox checkedBinding="selectAll"}}</th>
{{/if}}
<th>&nbsp;</th>
<th>{{i18n username}}</th>
<th>{{i18n email}}</th>
<th>{{i18n admin.users.last_emailed}}</th>
<th>{{i18n last_seen}}</th>
<th>{{i18n admin.user.topics_entered}}</th>
<th>{{i18n admin.user.posts_read_count}}</th>
<th>{{i18n admin.user.time_read}}</th>
<th>{{i18n created}}</th>
{{#if showApproval}}
<th>{{i18n admin.users.approved}}</th>
{{/if}}
<th>&nbsp;</th>
</tr>
</tr>
{{#each model}}
<tr {{bindAttr class="selected"}}>
{{#if controller.showApproval}}
{{#each model}}
<tr {{bindAttr class="selected"}}>
{{#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>
{{#if can_approve}}
{{view Ember.Checkbox checkedBinding="selected"}}
{{#if approved}}
{{i18n yes_value}}
{{else}}
{{i18n no_value}}
{{/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>
{{#if approved}}
{{i18n yes_value}}
{{else}}
{{i18n no_value}}
{{/if}}
</td>
{{/if}}
<td>
{{#if admin}}<i class="icon-trophy" title="{{i18n admin.title}}"></i>{{/if}}
{{#if moderator}}<i class="icon-magic" title="{{i18n admin.moderator}}"></i>{{/if}}
<td>
</tr>
{{/each}}
<td>
{{#if admin}}<i class="icon-trophy" title="{{i18n admin.title}}"></i>{{/if}}
{{#if moderator}}<i class="icon-magic" title="{{i18n admin.moderator}}"></i>{{/if}}
<td>
</tr>
{{/each}}
</table>
{{else}}
<p>{{i18n search.no_results}}</p>
</table>
{{else}}
<p>{{i18n search.no_results}}</p>
{{/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 {
@include border-radius-all(5px);
background-color: darken($white, 5%);
border: 1px solid darken($white, 10%);
padding: 10px 10px 3px 0px;
margin-bottom: 20px;
height: 35px;
.nav.nav-pills {
li.active {
@ -145,7 +148,10 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
.site-settings-nav {
width: 200px;
margin-top: 33px;
margin-top: 40px;
.nav-stacked {
border-right: none;
}
li a.active {
color: $white;
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 {
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 {
@ -164,16 +174,25 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
.setting-label {
float: left;
width: 196px;
@include medium-width { width: 176px; }
@include small-width { width: 166px; }
margin-right: 12px;
}
.setting-value {
float: left;
width: 450px;
@include medium-width { width: 360px; }
@include small-width { width: 330px; }
}
.setting-controls {
float: left;
width: 144px;
}
.input-setting-string {
width: 404px;
@include medium-width { width: 314px; }
@include small-width { width: 284px; }
}
.desc {
padding-top: 3px;
@ -195,10 +214,6 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
color: darken($yellow, 20%);
}
}
.input-setting-string {
width: 404px;
}
}
section.details {