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,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'>
|
||||||
|
|
|
@ -8,4 +8,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{outlet}}
|
<div class="admin-container">
|
||||||
|
{{outlet}}
|
||||||
|
</div>
|
|
@ -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>
|
||||||
|
|
|
@ -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,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> </th>
|
<th> </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> </th>
|
<th> </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>
|
|
@ -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