UX: make the blue notification float over the column headers on desktop

This commit is contained in:
Régis Hanol 2014-10-29 00:46:05 +01:00
parent 8f97056878
commit 7525a896df
5 changed files with 42 additions and 41 deletions

View file

@ -121,7 +121,6 @@ var controllerOpts = {
canBulkSelect: Em.computed.alias('currentUser.staff'),
hasTopics: Em.computed.gt('topics.length', 0),
showTable: Em.computed.or('hasTopics', 'topicTrackingState.hasIncoming'),
allLoaded: Em.computed.empty('more_topics_url'),
latest: Discourse.computed.endWith('filter', 'latest'),
new: Discourse.computed.endWith('filter', 'new'),

View file

@ -26,53 +26,46 @@
{{top-period-chooser period=period}}
</div>
{{/if}}
{{#if showTable}}
{{#if topicTrackingState.hasIncoming}}
<div class="show-more">
<div class='alert alert-info clickable' {{action "showInserted"}}>
{{countI18n topic_count_ suffix=topicTrackingState.filter count=topicTrackingState.incomingCount}}
{{i18n click_to_show}}
</div>
</div>
{{/if}}
{{#if hasTopics}}
<table class='topic-list'>
<thead>
<tr>
{{#if currentUser}}
<th class='star'>
{{#if canBulkSelect}}
<button class='btn bulk-select' {{action "toggleBulkSelect"}} title="{{i18n topics.bulk.toggle}}"><i class='fa fa-list'></i></button>
<tr>
{{#if currentUser}}
<th class='star'>
{{#if canBulkSelect}}
<button class='btn bulk-select' {{action "toggleBulkSelect"}} title="{{i18n topics.bulk.toggle}}"><i class='fa fa-list'></i></button>
{{/if}}
</th>
{{/if}}
</th>
{{/if}}
{{#sortable-heading class="default"}} {{i18n topic.title}} {{/sortable-heading}}
{{#unless controller.hideCategory}}
{{#sortable-heading sortBy="category" action="changeSort" order=order ascending=ascending}}
{{i18n category_title}}
{{#sortable-heading class="default"}} {{i18n topic.title}} {{/sortable-heading}}
{{#unless controller.hideCategory}}
{{#sortable-heading sortBy="category" action="changeSort" order=order ascending=ascending}}
{{i18n category_title}}
{{/sortable-heading}}
{{/unless}}
{{#sortable-heading class="posters"}} {{i18n users}} {{/sortable-heading}}
{{#sortable-heading sortBy="posts" number=true action="changeSort" order=order ascending=ascending}}
{{i18n posts}}
{{/sortable-heading}}
{{/unless}}
{{#sortable-heading class="posters"}} {{i18n users}} {{/sortable-heading}}
{{#sortable-heading sortBy="posts" number=true action="changeSort" order=order ascending=ascending}}
{{i18n posts}}
{{/sortable-heading}}
{{#sortable-heading sortBy="views" number=true action="changeSort" order=order ascending=ascending}}
{{i18n views}}
{{/sortable-heading}}
{{#sortable-heading sortBy="activity" number=true action="changeSort" order=order ascending=ascending}}
{{i18n activity}}
{{/sortable-heading}}
</tr>
{{#sortable-heading sortBy="views" number=true action="changeSort" order=order ascending=ascending}}
{{i18n views}}
{{/sortable-heading}}
{{#sortable-heading sortBy="activity" number=true action="changeSort" order=order ascending=ascending}}
{{i18n activity}}
{{/sortable-heading}}
</tr>
</thead>
{{#if topicTrackingState.hasIncoming}}
<tbody>
<tr>
<td colspan="9">
<div class='alert alert-info clickable' {{action "showInserted"}}>
{{countI18n topic_count_ suffix=topicTrackingState.filter count=topicTrackingState.incomingCount}}
{{i18n click_to_show}}
</div>
</td>
</tr>
</tbody>
{{/if}}
<tbody>
{{each topics itemController="topic-list-item" itemView="topic-list-item"}}
</tbody>
</table>
{{/if}}
</div>

View file

@ -4,7 +4,7 @@
{{top-period-chooser period=period}}
</div>
{{/if}}
{{#if showTable}}
{{#if hasTopics}}
<table class='topic-list'>
{{#if topicTrackingState.hasIncoming}}
<tbody>

View file

@ -1,3 +1,9 @@
.show-more {
position: absolute;
top: 5px;
width: 100%;
}
.list-controls {
#navigation-bar {
.has-icon span:before {

View file

@ -2,6 +2,9 @@
@extend .clearfix;
margin-right: auto;
margin-left: auto;
.contents {
position: relative;
}
}
.full-width {