From b2675a61baf39515fc74c7df530a1b04d8742ba8 Mon Sep 17 00:00:00 2001 From: Kris Aubuchon Date: Sat, 10 May 2014 02:09:04 -0400 Subject: [PATCH] rearranging layout to better fit the new username placement --- .../templates/embedded_post.js.handlebars | 8 +- .../discourse/templates/post.js.handlebars | 56 +++--- .../discourse/views/poster_expansion_view.js | 2 +- .../stylesheets/desktop/poster_expansion.scss | 12 +- .../stylesheets/desktop/topic-post.scss | 160 +++++------------- app/assets/stylesheets/desktop/topic.scss | 9 - app/assets/stylesheets/mobile/discourse.scss | 10 +- app/assets/stylesheets/mobile/header.scss | 4 +- app/assets/stylesheets/mobile/topic-list.scss | 22 ++- app/assets/stylesheets/mobile/topic-post.scss | 28 ++- app/assets/stylesheets/mobile/topic.scss | 14 +- 11 files changed, 136 insertions(+), 189 deletions(-) diff --git a/app/assets/javascripts/discourse/templates/embedded_post.js.handlebars b/app/assets/javascripts/discourse/templates/embedded_post.js.handlebars index cc07cc78c3a..46d9e95c330 100644 --- a/app/assets/javascripts/discourse/templates/embedded_post.js.handlebars +++ b/app/assets/javascripts/discourse/templates/embedded_post.js.handlebars @@ -1,16 +1,16 @@
-
+
-
{{{breakUp username name}}}
-
-
{{unboundAgeWithTooltip created_at}}
+
+
{{{breakUp username name}}}
{{#if view.parentView.previousPost}}{{/if}} +
{{unboundAgeWithTooltip created_at}}
{{{unbound cooked}}} {{#unless view.parentView.previousPost}}{{/unless}} diff --git a/app/assets/javascripts/discourse/templates/post.js.handlebars b/app/assets/javascripts/discourse/templates/post.js.handlebars index e5a1b2b2bc0..27ea9f941b2 100644 --- a/app/assets/javascripts/discourse/templates/post.js.handlebars +++ b/app/assets/javascripts/discourse/templates/post.js.handlebars @@ -17,26 +17,11 @@ {{/if}} {{/if}} -
+
{{#unless userDeleted}}
{{avatar this imageSize="large"}} -
-

{{{breakUp username name}}}

- {{#if showName}} -

{{breakUp name}}

- {{/if}} - - {{#if user_title}} - {{#if primary_group_name}} -
{{unbound user_title}}
- {{else}} -
{{unbound user_title}}
- {{/if}} - {{/if}} - -
{{else}}
@@ -49,14 +34,25 @@
-
- - -
+
+
+

{{{breakUp username name}}}

-
- {{#unless controller.multiSelect}} -
+ {{#if showName}} +

{{breakUp name}}

+ {{/if}} + + {{#if user_title}} + {{#if primary_group_name}} +
{{unbound user_title}}
+ {{else}} +
{{unbound user_title}}
+ {{/if}} + {{/if}} +
+
+ {{unboundAgeWithTooltip created_at}} +
{{#if hasHistory}}
{{#if can_view_edit_history}} @@ -72,10 +68,16 @@ {{/if}}
{{/if}} -
- {{unboundAgeWithTooltip created_at}} -
-
+
+ +
+ + +
+ +
+ {{#unless controller.multiSelect}} + {{/unless}}
{{{cooked}}}
{{#if view.showExpandButton}} diff --git a/app/assets/javascripts/discourse/views/poster_expansion_view.js b/app/assets/javascripts/discourse/views/poster_expansion_view.js index c2bc872e70d..dc775fd73dc 100644 --- a/app/assets/javascripts/discourse/views/poster_expansion_view.js +++ b/app/assets/javascripts/discourse/views/poster_expansion_view.js @@ -20,7 +20,7 @@ Discourse.PosterExpansionView = Discourse.View.extend({ Em.run.schedule('afterRender', function() { if (post) { var $post = $('#' + post.get('postElementId')), - $avatar = $('.topic-meta-data img.avatar', $post), + $avatar = $('.topic-avatar img.avatar', $post), position = $avatar.offset(); if (position) { diff --git a/app/assets/stylesheets/desktop/poster_expansion.scss b/app/assets/stylesheets/desktop/poster_expansion.scss index 8190d8d0774..5b616c5bac4 100644 --- a/app/assets/stylesheets/desktop/poster_expansion.scss +++ b/app/assets/stylesheets/desktop/poster_expansion.scss @@ -50,6 +50,13 @@ } } + .metadata { + float: right; + max-width: 180px; + text-align: right; + margin-top: 5px; + } + .bottom { clear: both; padding-top: 10px; @@ -85,10 +92,7 @@ float: left; } - .metadata { - float: right; - max-width: 180px; - } + h2 { line-height: 12px; diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 88e45fad190..a0d6431d4d7 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -49,12 +49,11 @@ h1 .topic-statuses .topic-status i { border-top: none; } - .reply-to-tab { position: absolute; right: 330px; z-index: 400; - padding: 10px 6px 5px; + padding: 13px 6px 5px; border-top: 1px solid scale-color($primary, $lightness: 90%); font-size: 12px; color: scale-color($primary, $lightness: 50%); @@ -66,14 +65,6 @@ h1 .topic-statuses .topic-status i { } } - -.topic-meta-data-inside { - float: right; - margin-top: -30px; - float: right; - font-size: 12px; -} - .gutter { .reply-new { .discourse-no-touch & { @@ -218,7 +209,6 @@ nav.post-controls { h1, h2, h3 {margin: 10px 0;} a.mention {background: scale-color($primary, $lightness: 90%);} &.bottom { - .topic-meta-data {padding-left: 13px;} &.hidden {display: block; opacity: 0; } } @@ -227,7 +217,6 @@ nav.post-controls { margin-left: 66px; max-width: 713px; - .topic-meta-data {padding-left: 13px;} @include medium-width { margin-left: 59px; @@ -239,9 +228,12 @@ nav.post-controls { } } &.top.span14 {padding-left: 0;} - .topic-body, .topic-meta-data {border: none;} - .row {border-top: 1px solid scale-color($primary, $lightness: 90%); padding-top: 7px;} - .reply:first-of-type .row {border-top: none;} + .topic-body, .topic-avatar {border: none;} + .topic-avatar {padding-left: 15px;} + .post-date {color: scale-color($primary, $lightness: 50%);} + .fa-arrow-up {margin-left: 5px;} + .row {border-top: 1px solid scale-color($primary, $lightness: 90%); padding-top: 7px;} + .reply:first-of-type .row {border-top: none;} background: scale-color($primary, $lightness: 95%); .quote .title, blockquote, .onebox, .onebox-result { @@ -252,28 +244,16 @@ nav.post-controls { &.bottom { margin-top: -11px;} .topic-meta-data { position: relative; - .avatar { - margin-top: -10px; - } } .topic-meta-data h5 { position: absolute; - left: 70px; - top: 4px; z-index: 1; font-size: 13px; - width: 300px; a { font-weight: bold; color: scale-color($primary, $lightness: 30%); } } - .topic-meta-data-inside { - margin: -15px 0 0 0; - color: scale-color($primary, $lightness: 50%); - a {color: scale-color($primary, $lightness: 50%);} - } - .topic-meta-data {padding-top: 20px;} .arrow {color: scale-color($primary, $lightness: 50%);} } @@ -382,7 +362,7 @@ a.star { .number, i { color: $primary; } - .avatar + a { + .avatar a { float: left; } } @@ -557,77 +537,6 @@ iframe { } -.topic-meta-data { - margin-bottom: 10px; - border-top: 1px solid scale-color($primary, $lightness: 90%); - padding-top: 30px; - width: 92px; - - .names { - position: absolute; - left: 66px; - top: 10px; - width: 400px; - z-index: 1; - @include medium-width { - left: 60px; - } - - @include small-width { - left: 55px; - } - } - - .names, .user-title { - display: inline; - font-size: 13px; - } - - .main-avatar img { - width: 45px; - height: 45px; - position: absolute; - top: 16px; - } - - .contents { - - a { - font-weight: normal; - line-height: 1.3; - } - - .username a { - font-weight: bold; - color: scale-color($primary, $lightness: 20%); - font-size: 13px; - } - - .new-user a { - color: scale-color($primary, $lightness: 60%); - } - - a.user-group { - color: scale-color($primary, $lightness: 50%); - width: 100%; - } - - h3 a { - width: auto; - } - - h3.full-name { - font-weight: normal; - font-size: 12px; - margin-top: 2px; - a {color: $primary;} - } - } - - h3 { display: inline; } - -} - .open >.dropdown-menu { display: block; } @@ -652,7 +561,6 @@ iframe { .contents .cooked { margin-right: 30px; - margin-top: 20px; word-wrap: break-word; h1, h2, h3, h4, h5, h6 { margin: 30px 0 10px; } @@ -729,16 +637,6 @@ iframe { background-color: scale-color($highlight, $lightness: 60%); } -.topic-meta-data { - h3 { - font-size: 15px; - margin-top: 5px; - overflow: hidden; - line-height: 1.2em; - } -} - - .user-title { margin-top: 5px; color: $primary; @@ -805,7 +703,7 @@ blockquote { /* solo quotes */ .gutter { float: left; - margin-top: 12px; + margin-top: 15px; ul {margin: 0;} padding-left: 10px; @@ -837,7 +735,7 @@ blockquote { /* solo quotes */ float: left; position: relative; border-top: 1px solid scale-color($primary, $lightness: 90%); - padding: 20px 0 15px 0; + padding: 12px 0 15px 0; &.highlighted { background-color: scale-color($tertiary, $lightness: 85%); } @@ -845,6 +743,10 @@ blockquote { /* solo quotes */ max-width: 100%; } } +.topic-avatar { + border-top: 1px solid scale-color($primary, $lightness: 90%); + padding-top: 16px; +} .bottom-round.contents.regular { -webkit-transition: background-color .25s linear; @@ -1042,7 +944,6 @@ blockquote { /* solo quotes */ } article.boxed { position: relative; - line-height: 21px; .select-posts { position: absolute; @@ -1091,3 +992,36 @@ a.attachment:before { .private_message .gutter:before { content: "\f0e0"; } + + + .names { + float: left; + .username { + a { + font-size: 13px; + color: scale-color($primary, $lightness: 20%); + } + } + } + + .topic-meta-data { + margin-bottom: 10px; + + &:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } + + .post-info { + display: inline-block; + float: right; + font-size: 12px; + margin-top: 1px; + a {color: scale-color($primary, $lightness: 50%);} + } + + } diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index 8c968c1dfae..f4ba71fcae9 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/app/assets/stylesheets/desktop/topic.scss @@ -1,8 +1,3 @@ -.post-info a { - color: scale-color($primary, $lightness: 60%); -} - - .post-actions { @include unselectable; clear: both; @@ -18,10 +13,6 @@ margin-top: 20px; } -.post-info { - display: inline-block; -} - .edits {margin-right: 5px;} #topic-title { diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss index a3d6d0ebec4..9922ff43166 100644 --- a/app/assets/stylesheets/mobile/discourse.scss +++ b/app/assets/stylesheets/mobile/discourse.scss @@ -30,21 +30,20 @@ body { } #main { .fa-star.starred { - color: $highlight; + color: $danger; } a.star { display: inline-block; font-size: 15px; line-height: 1; - color: $primary; - margin-right: 5px; + color: scale-color($primary, $lightness: 75%); + margin-right: 3px; &:before { font-family: "FontAwesome"; content: "\f005"; } &.starred { - color: #fe1; - text-shadow: 0 0 3px rgba($primary, 0.5); + color: $danger; @include hover { opacity: 1; &:before { @@ -104,7 +103,6 @@ blockquote { margin: 0; padding: 0; .topic-status { - padding: 5px 2px 0 0; margin: 0; display: inline-block; i { diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss index 762ebe61b92..96651cb1250 100644 --- a/app/assets/stylesheets/mobile/header.scss +++ b/app/assets/stylesheets/mobile/header.scss @@ -85,8 +85,8 @@ position: relative; color: scale-color($primary, $lightness: 75%); background-color: $secondary; + border: 1px solid scale-color($primary, $lightness: 90%); cursor: default; - @include box-shadow((6px 0 6px -6px rgba($primary, 0.2), -6px 0 6px -6px rgba($primary, 0.2), inset 0 13px 13px -13px rgba($primary, 0.1))); &:after { display: block; position: absolute; @@ -96,7 +96,7 @@ width: 100%; height: 0; content: ""; - border-top: 1px solid scale-color($primary, $lightness: 90%); + border-top: 1px solid $secondary; } } [class^="fa fa-"] { diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 1f27a36632d..f54f49f4539 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -69,6 +69,7 @@ line-height: 1.25; text-align: left; vertical-align: middle; + color: scale-color($primary, $lightness: 50%); &:first-of-type { padding-left: 5px; } @@ -88,12 +89,12 @@ } } td { - color: $primary; font-size: 14px; } .main-link { font-size: 16px; - + a {color: $primary;} + a:visited {color: scale-color($primary, $lightness: 50%);} i.score { color: $success; cursor: pointer; @@ -311,7 +312,7 @@ float: left; } .category-dropdown-button { - padding: 4px 10px 3px 8px; + padding: 4px 10px 4px 8px; border-left: 1px solid rgba(0, 0, 0, 0.15); font-size: 16px; width: 10px; @@ -393,7 +394,7 @@ span.posted { margin: 1px 0 0; list-style: none; background-color: $secondary; - border: 1px solid scale-color($primary, $lightness: 90%);; + border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); @@ -413,9 +414,9 @@ span.posted { .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { - color: $secondary; + color: $tertiary; text-decoration: none; - background-color: $tertiary; + background-color: scale-color($tertiary, $lightness: 75%); } .open > .dropdown-menu { display: block; @@ -434,7 +435,7 @@ ol.category-breadcrumb { display: block; float: left; list-style: none; - margin: 0 10px 0 0; + margin: 5px 10px 0 0; padding: 0; li { @@ -449,7 +450,6 @@ ol.category-breadcrumb { position: absolute; border: 1px solid scale-color($primary, $lightness: 90%);; background-color: $secondary; - width: 200px; height: 200px; padding: 8px 5px 0 7px; z-index: 100; @@ -466,3 +466,9 @@ ol.category-breadcrumb { margin-bottom: 10px; } } + +.top-lists {margin-left: 15px; + #topic-list-bottom { + margin: 20px 0 0 0; + } +} diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index cae7fd01065..dce07b70153 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -102,8 +102,8 @@ a.reply-to-tab { a.star { display: inline-block; float: left; - font-size: 1.4em !important; - margin-top: 3px; + font-size: 1.3em; + margin-top: 4px; } #main a.star.starred { @@ -222,7 +222,7 @@ a.star { border-left: 1px solid scale-color($primary, $lightness: 95%);; padding: 0 23px; color: $primary; - background: scale-color($primary, $lightness: 75%); + background: scale-color($primary, $lightness: 90%); &:hover { background: scale-color($primary, $lightness: 75%); color: $primary; @@ -258,6 +258,7 @@ a.star { a.badge-category, a.badge-category-parent { font-size: 10px; + vertical-align: top; } .title { @@ -417,6 +418,7 @@ background-color: scale-color($danger, $lightness: 75%); background-color: lighten(yellow, 35%); } +.username a { color: scale-color($primary, $lightness: 30%); } .new-user a { color: scale-color($primary, $lightness: 60%); } @@ -480,5 +482,23 @@ blockquote { } .topic-body.highlighted { - background-color: scale-color($tertiary, $lightness: 40%); + background-color: scale-color($tertiary, $lightness: 75%); +} + +.topic-avatar { + width: 100%; + float: left; + position: relative; + z-index: 2; +} + +.topic-meta-data { + float: left; + position: absolute; + z-index: 1; + width: 100%; + .names {margin: 5px 0 0 70px; float: left;} + .post-info {float: right; font-size: 12px; margin: 21px 10px 0 0; + .edits {margin-right: 5px;} + } } diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss index 50da12ed0a1..4486a99a957 100644 --- a/app/assets/stylesheets/mobile/topic.scss +++ b/app/assets/stylesheets/mobile/topic.scss @@ -1,12 +1,3 @@ -.topic-meta-data { - width: 100%; - h3 a {margin-left: 10px;} - a {float: left; - } - -} - - .post-info a {color: #aaa;} .topic-meta-data-inside { @@ -31,6 +22,7 @@ font-size: 1.5em; margin:0; a.edit-topic {font-size: 15px;} + a {color: $primary;} } .private-message-glyph { display: none; } } @@ -74,7 +66,7 @@ display: none; } border: none; - background-color: scale-color($secondary, $lightness: 75%); + background-color: scale-color($primary, $lightness: 90%); color: $primary; width: 130px; height: 34px; @@ -124,7 +116,7 @@ top: 0; bottom: 0; width: 0; - border-right: 1px solid scale-color($secondary, $lightness: 90%); + border-right: 1px solid scale-color($success, $lightness: 50%); background-color: scale-color($success, $lightness: 50%); } }