some incremental style enhancements, as discussed here https://meta.discourse.org/t/discourse-design-experiments/13479

This commit is contained in:
Kris Aubuchon 2014-03-08 00:55:02 -05:00
parent 4efabef8f2
commit 10858d3c87
8 changed files with 45 additions and 34 deletions

View File

@ -30,13 +30,13 @@
{{topicStatus topic=topic}}
<a class='title' href="{{unbound topic.lastUnreadUrl}}">{{{unbound topic.fancy_title}}}</a>
{{#if unread}}
<a href="{{unbound topic.lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unbound topic.unread}}</a>
<a href="{{unbound topic.lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unbound topic.unread}} Unread</a>
{{/if}}
{{#if topic.new_posts}}
<a href="{{unbound topic.lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="new_posts"}}'>{{unbound topic.new_posts}}</a>
<a href="{{unbound topic.lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="new_posts"}}'>{{unbound topic.new_posts}} New</a>
{{/if}}
{{#if topic.unseen}}
<a href="{{unbound topic.lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'><i class='fa fa-asterisk'></i></a>
<a href="{{unbound topic.lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'>New</a>
{{/if}}
</td>

View File

@ -20,10 +20,10 @@
{{#if controller.ordering}}<i class="fa fa-bars"></i>{{/if}}
{{categoryLink this allowUncategorized=true}}
{{#if unreadTopics}}
<a href={{unbound unreadUrl}} class='badge new-posts badge-notification' title='{{i18n topic.unread_topics count="unreadTopics"}}'>{{unbound unreadTopics}}</a>
<a href={{unbound unreadUrl}} class='badge new-posts badge-notification' title='{{i18n topic.unread_topics count="unreadTopics"}}'>{{unbound unreadTopics}} Unread</a>
{{/if}}
{{#if newTopics}}
<a href={{unbound newUrl}} class='badge new-posts badge-notification' title='{{i18n topic.new_topics count="newTopics"}}'>{{unbound newTopics}} <i class='fa fa-asterisk'></i></a>
<a href={{unbound newUrl}} class='badge new-posts badge-notification' title='{{i18n topic.new_topics count="newTopics"}}'>{{unbound newTopics}} New</a>
{{/if}}
</div>
<div class='featured-users'>
@ -47,7 +47,7 @@
<a href={{unbound unreadUrl}} class='badge new-posts badge-notification' title='{{i18n topic.unread_topics count="unreadTopics"}}'>{{unbound unreadTopics}}</a>
{{/if}}
{{#if newTopics}}
<a href={{unbound newUrl}} class='badge new-posts badge-notification' title='{{i18n topic.new_topics count="newTopics"}}'>{{unbound newTopics}} <i class='fa fa-asterisk'></i></a>
<a href={{unbound newUrl}} class='badge new-posts badge-notification' title='{{i18n topic.new_topics count="newTopics"}}'>{{unbound newTopics}} New</a>
{{/if}}
{{/each}}
</div>
@ -59,13 +59,13 @@
{{topicStatus topic=this}}
<a class='title' href="{{unbound lastUnreadUrl}}">{{{unbound fancy_title}}}</a>
{{#if unread}}
<a href="{{unbound lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unread}}</a>
<a href="{{unbound lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unread}} Unread</a>
{{/if}}
{{#if new_posts}}
<a href="{{unbound lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="new_posts"}}'>{{new_posts}}</a>
<a href="{{unbound lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="new_posts"}}'>{{new_posts}} New</a>
{{/if}}
{{#if unseen}}
<a href="{{unbound lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'><i class='fa fa-asterisk'></i></a>
<a href="{{unbound lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'>New</a>
{{/if}}
{{#if controller.latestTopicOnly}}

View File

@ -14,13 +14,13 @@
{{topicStatus topic=this}}
{{{topicLink this}}}
{{#if unread}}
<a href="{{lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unread}}</a>
<a href="{{lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unread}} Unread</a>
{{/if}}
{{#if displayNewPosts}}
<a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="displayNewPosts"}}'>{{displayNewPosts}}</a>
<a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="displayNewPosts"}}'>{{displayNewPosts}} New</a>
{{/if}}
{{#if unseen}}
<a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'><i class='fa fa-asterisk'></i></a>
<a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'>New</a>
{{/if}}
{{#if hasExcerpt}}

View File

@ -4,7 +4,7 @@
<a href={{unbound unreadUrl}} class='badge unread-posts badge-notification' title='{{i18n topic.unread_topics count="unreadTopics"}}'>{{unreadTopics}}</a>
{{/if}}
{{#if newTopics}}
<a href={{unbound newUrl}} class='badge new-posts badge-notification' title='{{i18n topic.new_topics count="newTopics"}}'>{{newTopics}} <i class='fa fa-asterisk'></i></a>
<a href={{unbound newUrl}} class='badge new-posts badge-notification' title='{{i18n topic.new_topics count="newTopics"}}'>{{newTopics}} New</a>
{{/if}}
{{else}}
<b class="topics-count">{{unbound topic_count}}</b>

View File

@ -67,7 +67,9 @@ h1 a.badge-category div {vertical-align: top;}
// New posts
&.new-posts, &.unread-posts {
background-color: $emphasis_text_color;
background-color: $emphasis_background_color;
color: $emphasis_text_color;
font-weight: normal;
}
// Click count
@ -75,7 +77,7 @@ h1 a.badge-category div {vertical-align: top;}
&.clicks {
font-weight: normal;
background-color: #ddd;
top: -1px;
top: -1px;
color: #888;
position: relative;
margin-left: 2px;

View File

@ -157,7 +157,7 @@ $controls_active: darken($blue, 10%);
$primary_border_color: lighten($black, 60%);
$secondary_border_color: lighten($black, 76%);
$tertiary_border_color: $white;
$tertiary_border_color: $white;
$highlight_border_color: $yellow;
$emphasis_border_color: $blue;
$warning_border_color: lighten($red, 20%);

View File

@ -11,7 +11,7 @@
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0 1px 3px rgba($primary_shadow_color, .2);
border-bottom: 1px solid $primary_border_color;
background-color: $primary_background_color;
padding-top: 3px;
.docked & {
@ -45,12 +45,12 @@
.current-username {
float: left;
a {
color: $primary_text_color;
color: $secondary_text_color;
font-size: 14px;
line-height: 40px;
}
button {
margin-top: 8px;
margin-top: 9px;
}
}
.icons {
@ -60,22 +60,23 @@
list-style: none;
> li {
float: left;
&:last-child .icon {
border-right: 1px solid $primary_border_color;
}
}
.icon {
display: block;
border-top: 1px solid $primary_border_color;
border-bottom: 1px solid $primary_border_color;
border-left: 1px solid $primary_border_color;
padding: 3px;
color: $nav-button-color;
text-decoration: none;
cursor: pointer;
border-top: 1px solid $tertiary_border_color;
border-left: 1px solid $tertiary_border_color;
border-right: 1px solid $tertiary_border_color;
&:hover {
color: $nav-button-color-hover;
background-color: $nav-button-background-color-hover;
border-top: 1px solid $primary_border_color;
border-left: 1px solid $primary_border_color;
border-right: 1px solid $primary_border_color;
}
&:active {
color: $nav-button-color-active;
@ -87,7 +88,9 @@
color: #7b7b7b;
background-color: $primary_background_color;
cursor: default;
@include box-shadow((6px 0 6px -6px rgba($primary_shadow_color, 0.2), -6px 0 6px -6px rgba($primary_shadow_color, 0.2), inset 0 13px 13px -13px rgba($primary_shadow_color, 0.1)));
border-top: 1px solid $primary_border_color;
border-left: 1px solid $primary_border_color;
border-right: 1px solid $primary_border_color;
&:after {
display: block;
position: absolute;
@ -99,6 +102,9 @@
content: "";
border-top: 1px solid $tertiary_border_color;
}
&:hover {
border-bottom: none;
}
}
[class^="fa fa-"] {
width: 32px;
@ -135,7 +141,7 @@
}
#main-outlet {
padding-top: 75px;
padding-top: 80px;
}
// Dropdowns
@ -152,7 +158,7 @@
margin-top: -1px;
border: 1px solid $primary_border_color;
background-color: $primary_background_color;
@include box-shadow(0 3px 3px rgba($primary_shadow_color, .4));
@include box-shadow(0 2px 2px rgba($primary_shadow_color, .4));
// Common

View File

@ -11,7 +11,7 @@
.list-controls {
.nav {
float: left;
margin-bottom: 15px;
margin-bottom: 20px;
}
.btn {
@ -63,6 +63,7 @@
border-collapse: separate;
border-spacing: 0;
margin: 0 0 10px;
a.title {color: $primary_text_color;}
a.title:visited:not(.badge-notification) {color: lighten($primary_text_color, 35%);}
> tbody > tr {
@ -87,7 +88,7 @@
}
th,
td {
padding: 9px 5px;
padding: 12px 5px;
line-height: 1.25;
text-align: left;
vertical-align: middle;
@ -141,11 +142,12 @@
}
.topic-excerpt {
font-size: 14px;
font-size: 13px;
margin-top: 8px;
color: lighten($primary_text_color, 35%);
word-break: break-word;
padding-right: 20px;
padding-right: 50px;
line-height: 1.4;
}
@include medium-width {
@ -174,10 +176,11 @@
}
.badge-notification {
position: relative;
top: -1px;
top: -2px;
}
.category {
width: 140px;
padding: 0 20px 0 20px;
min-width: 80px;
}
.posters {
min-width: 150px;