From 1d2cabc2a652072c2ce0f3ad35a83322f4ed0e43 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 30 Apr 2014 12:13:16 +1000 Subject: [PATCH] FEATURE: usernames are now on top. --- .../javascripts/discourse/lib/utilities.js | 1 + .../discourse/templates/post.js.handlebars | 4 +- .../customizations/username-on-top.scss | 76 --------- .../stylesheets/desktop/topic-post.scss | 156 ++++++++++-------- app/assets/stylesheets/desktop/topic.scss | 6 - 5 files changed, 94 insertions(+), 149 deletions(-) delete mode 100644 app/assets/stylesheets/customizations/username-on-top.scss diff --git a/app/assets/javascripts/discourse/lib/utilities.js b/app/assets/javascripts/discourse/lib/utilities.js index cc268521726..8b703216e0c 100644 --- a/app/assets/javascripts/discourse/lib/utilities.js +++ b/app/assets/javascripts/discourse/lib/utilities.js @@ -13,6 +13,7 @@ Discourse.Utilities = { case 'small': return 25; case 'medium': return 32; case 'large': return 45; + case 'extra_large': return 60; case 'huge': return 120; } return size; diff --git a/app/assets/javascripts/discourse/templates/post.js.handlebars b/app/assets/javascripts/discourse/templates/post.js.handlebars index e60480a71b7..43b38d1217f 100644 --- a/app/assets/javascripts/discourse/templates/post.js.handlebars +++ b/app/assets/javascripts/discourse/templates/post.js.handlebars @@ -17,11 +17,10 @@ {{/if}} {{/if}} -
{{#unless userDeleted}}
- {{avatar this imageSize="large"}} + {{avatar this imageSize="large"}}

{{{breakUp username name}}}

@@ -36,6 +35,7 @@
{{unbound user_title}}
{{/if}} {{/if}} +
{{else}} diff --git a/app/assets/stylesheets/customizations/username-on-top.scss b/app/assets/stylesheets/customizations/username-on-top.scss deleted file mode 100644 index ad94b7cb20f..00000000000 --- a/app/assets/stylesheets/customizations/username-on-top.scss +++ /dev/null @@ -1,76 +0,0 @@ -@import "common/foundation/variables"; - -.topic-post { - article > .row { - & > .topic-meta-data { - width: 79%; - .contents { - text-align: left; - padding-left: 3%; - position: relative; - } - .names { - z-index: 1; - position: absolute; - top: -2px; - left: 10%; - width: 100%; - } - h3, .user-title { - display: inline; - padding-left: 5px; - font-size: $base-font-size; - a { - color: #6f6f6f; - font-weight: bold; - } - } - } - & > .topic-body { - width: 70.5%; - margin-left: 7.5%; - margin-top: -85px; - border-top: none; - padding-left: 10px; - & > .contents { - &.avoid-tab { padding-top: 0; } - .topic-meta-data-inside, .avoid-tab .topic-meta-data-inside { - margin-top: -52px; - } - .cooked, .avoid-tab .cooked { - margin-top: 48px; - z-index: 2; - } - } - } - & > .reply-to-tab { - left: 9%; - padding: 2px 12px; - .avatar { - height: 15px; - width: 15px; - } - } - } - .embedded-posts { - &.top { - margin-left: 7.5%; - } - position: relative; - .contents h5 { - position: absolute; - top: 12px; - left: 93px; - width: 500px; - text-align: left; - z-index: 1; - font-size: $base-font-size; - } - .topic-body { - margin-top: 15px; - .topic-meta-data-inside { - margin-top: -15px; - } - } - } -} diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 0b7e02ff7db..cfa124016f4 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -51,27 +51,28 @@ h1 .topic-statuses .topic-status i { .reply-to-tab { - display: block; position: absolute; - left: 120px; + right: 300px; z-index: 400; padding: 5px 12px; border: 1px solid $primary_border_color; font-size: 12px; - margin-left: -8px; background: $primary_background_color; color: $secondary_text_color; @include medium-width { - left: 107px; + right: 260px; } @include small-width { - left: 103px; + right: 200px; } } -.avoid-tab { - padding-top: 25px; - .topic-meta-data-inside {margin-top: -30px;} + +.topic-meta-data-inside { + float: right; + margin-top: -36px; + float: right; + font-size: 12px; } .gutter { @@ -212,23 +213,68 @@ nav.post-controls { } } } - } +} - .embedded-posts { - background: lighten($secondary_background_color, 76%); - .quote .title, blockquote, .onebox, .onebox-result { - background: lighten($secondary_background_color, 70%); - border-left: 5px solid lighten($secondary_background_color, 60%); +.embedded-posts { + h1, h2, h3 {margin: 10px 0;} + a.mention {background: lighten($secondary_background_color, 70%);} + &.bottom { + .topic-meta-data {padding-left: 13px;} + &.hidden {display: block; opacity: 0; } + + } + &.bottom .arrow {float: right; margin: 0 0 0 0;} + &.top { + + margin-left: 112px; + max-width: 775px; + .topic-meta-data {padding-left: 13px;} + + @include medium-width { + margin-left: 99px; } - &.bottom { margin-top: -11px;} - .topic-meta-data h5 {margin: 5px;} - .topic-meta-data-inside { - margin: -3px 0 0 0; - color: $secondary_text_color; + @include small-width { + margin-left: 95px; + max-width: 720px; } - .topic-meta-data {padding-top: 20px;} } + &.top.span14 {padding-left: 0;} + .topic-body, .topic-meta-data {border: none;} + .row {border-top: 1px solid $primary_border_color; padding-top: 7px;} + .reply:first-of-type .row {border-top: none;} + + background: lighten($secondary_background_color, 76%); + .quote .title, blockquote, .onebox, .onebox-result { + background: lighten($secondary_background_color, 70%); + border-left: 5px solid lighten($secondary_background_color, 60%); + } + + &.bottom { margin-top: -11px;} + .topic-meta-data { + position: relative; + .avatar { + margin-left: 10px; + margin-top: -10px; + } + } + .topic-meta-data h5 { + position: absolute; + left: 100px; + top: 0px; + z-index: 1; + width: 100%; + a { + font-weight: bold; + color: lighten($primary_text_color, 25%); + } + } + .topic-meta-data-inside { + margin: -3px 0 0 0; + color: $secondary_text_color; + } + .topic-meta-data {padding-top: 20px;} +} .bottom-round nav.post-controls .show-replies { background: lighten($secondary_background_color, 76%); @@ -513,29 +559,42 @@ iframe { .topic-meta-data { margin-bottom: 10px; - width: 92px; border-top: 1px solid $primary_border_color; padding-top: 30px; + width: 92px; - img { - text-align: center; + .names { + position: absolute; + left: 110px; + top: 5px; + width: 400px; + z-index: 1; + } + + .names, .user-title { + display: inline; + } + + .main-avatar img { width: 45px; height: 45px; + position: absolute; + left: 30px; + top: 10px; } .contents { - text-align: center; - a { - margin: 0 auto; - width: 45px; - word-wrap: break-word; - color: $primary_text_color; font-weight: normal; line-height: 1.3; } + .username a { + font-weight: bold; + color: lighten($primary_text_color, 25%); + } + .new-user a { color: $secondary_text_color; } @@ -547,7 +606,6 @@ iframe { h3 a { width: auto; - } h3.full-name { @@ -558,7 +616,7 @@ iframe { } } - h3 { display: block; } + h3 { display: inline; } } @@ -586,7 +644,7 @@ iframe { .contents .cooked { margin-right: 50px; - margin-top: 15px; + margin-top: 30px; word-wrap: break-word; h1, h2, h3, h4, h5, h6 { margin: 30px 0 10px; } @@ -664,9 +722,6 @@ iframe { } .topic-meta-data { -float: left; -position: relative; - h3 { font-size: 13px; margin-top: 5px; @@ -768,9 +823,9 @@ blockquote { /* solo quotes */ } .topic-body { - border-top: 1px solid $primary_border_color; float: left; position: relative; + border-top: 1px solid $primary_border_color; padding: 10px 0 15px 0; &.highlighted { background-color: $emphasis_background_color; @@ -806,35 +861,6 @@ blockquote { /* solo quotes */ .row:after {clear: both;} -.embedded-posts { - h1, h2, h3 {margin: 10px 0;} - a.mention {background: lighten($secondary_background_color, 70%);} - &.bottom { - .topic-meta-data {padding-left: 13px;} - &.hidden {display: block; opacity: 0; } - - } - &.bottom .arrow {float: right; margin: 0 0 0 0;} - &.top { - - margin-left: 112px; - max-width: 775px; - .topic-meta-data {padding-left: 13px;} - - @include medium-width { - margin-left: 99px; - } - - @include small-width { - margin-left: 95px; - max-width: 720px; - } - } - &.top.span14 {padding-left: 0;} - .topic-body, .topic-meta-data {border: none;} - .row {border-top: 1px solid $primary_border_color; padding-top: 7px;} - .reply:first-of-type .row {border-top: none;} -} .dropdown { position: relative; diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index 2eb8bedecb5..d1fa65dcb50 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/app/assets/stylesheets/desktop/topic.scss @@ -3,12 +3,6 @@ padding-right: 5px; } -.topic-meta-data-inside { - float: right; - margin-top: -22px; - float: right; - font-size: 12px; -} .post-actions { @include unselectable;