some incremental style enhancements, as discussed here https://meta.discourse.org/t/discourse-design-experiments/13479
This commit is contained in:
parent
4efabef8f2
commit
10858d3c87
|
@ -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>
|
||||
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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%);
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue