Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/discourse/templates/components/basic-topic-list.js.handlebars
View File

@ -30,13 +30,13 @@
{{topicStatus topic=topic}} {{topicStatus topic=topic}}
<a class='title' href="{{unbound topic.lastUnreadUrl}}">{{{unbound topic.fancy_title}}}</a> <a class='title' href="{{unbound topic.lastUnreadUrl}}">{{{unbound topic.fancy_title}}}</a>
{{#if unread}} {{#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}}
{{#if topic.new_posts}} {{#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}}
{{#if topic.unseen}} {{#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}} {{/if}}
</td> </td>

12
app/assets/javascripts/discourse/templates/discovery/categories.js.handlebars
View File

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

6
app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars
View File

@ -14,13 +14,13 @@
{{topicStatus topic=this}} {{topicStatus topic=this}}
{{{topicLink this}}} {{{topicLink this}}}
{{#if unread}} {{#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}}
{{#if displayNewPosts}} {{#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}}
{{#if unseen}} {{#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}}
{{#if hasExcerpt}} {{#if hasExcerpt}}

2
app/assets/javascripts/discourse/templates/site_map/_category.js.handlebars
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> <a href={{unbound unreadUrl}} class='badge unread-posts badge-notification' title='{{i18n topic.unread_topics count="unreadTopics"}}'>{{unreadTopics}}</a>
{{/if}} {{/if}}
{{#if newTopics}} {{#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}} {{/if}}
{{else}} {{else}}
<b class="topics-count">{{unbound topic_count}}</b> <b class="topics-count">{{unbound topic_count}}</b>

6
app/assets/stylesheets/common/components/badges.css.scss
View File

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

2
app/assets/stylesheets/common/foundation/variables.scss
View File

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

30
app/assets/stylesheets/desktop/header.scss
View File

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

15
app/assets/stylesheets/desktop/topic-list.scss
View File

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