From c2865e3e2cb56eedb24480daa97b7c435232ac62 Mon Sep 17 00:00:00 2001 From: Kris Aubuchon Date: Tue, 22 Oct 2013 15:37:44 -0400 Subject: [PATCH] fixing alignment on replies, buttons - also making topic new gutter link visible on touch --- .../stylesheets/desktop/topic-list.scss | 2 +- .../stylesheets/desktop/topic-post.scss | 103 ++++++++++++------ app/assets/stylesheets/desktop/topic.scss | 24 +++- 3 files changed, 91 insertions(+), 38 deletions(-) diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss index 902f0c9f883..291499d5e63 100644 --- a/app/assets/stylesheets/desktop/topic-list.scss +++ b/app/assets/stylesheets/desktop/topic-list.scss @@ -43,7 +43,7 @@ @include border-radius-all(4px 4px 0 0); @include box-shadow(0 1px 3px rgba($black, 0.22)); - a:visited {color: #888;} + a:visited:not(.badge-notification) {color: #888;} tbody tr { background-color: $white; diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index f1a74708877..b981cd06a4b 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -8,7 +8,7 @@ html {background-color: #fff;} margin-right: auto; margin-left: auto; } - +h1 .topic-statuses .topic-status i {margin-right: 5px;} .full-width { margin-left: 0px; @@ -47,7 +47,7 @@ html {background-color: #fff;} } -section.post-menu-area { +section.post-menu-area, .post-actions { .discourse-no-touch & { opacity: 0.2; transition: linear 0.15s; @@ -55,7 +55,7 @@ section.post-menu-area { } } - &:hover section.post-menu-area { + &:hover section.post-menu-area, &:hover .post-actions { opacity: 1; } @@ -75,9 +75,7 @@ section.post-menu-area { nav.post-controls { - background-color: #fff; padding: 0; - margin-top: 20px; button {color: #aaa; margin-right: 2px; @@ -96,7 +94,7 @@ nav.post-controls { button.show-replies { - padding: 8px 20px; + padding: 8px; margin-left: 0px; } @@ -105,8 +103,8 @@ nav.post-controls { margin-right: 0; color: darken(#e4f2f8, 35%); background: #e4f2f8; - padding: 7px 20px; - border: 1px solid #e4f2f8; + padding: 8px 20px; + border: 1px solid darken(#e4f2f8, 35%); margin-left: 10px; &:hover { color: darken(#e4f2f8, 45%); @@ -127,8 +125,8 @@ nav.post-controls { padding: 8px 10px; vertical-align: top; background: transparent; - border: none; - margin-left: 1px; + border: 1px solid #ddd; + margin-left: 3px; transition: all linear 0.15s; outline: none; //removes the pesky square button highlight from some browsers &:hover { @@ -189,22 +187,54 @@ nav.post-controls { .quote .title {background: #ddd;} blockquote {background: #ddd;} +&.bottom { margin-top: -11px; + .reply { + border-left: 1px solid #ddd; + border-right: 1px solid #ddd; + + &:first-of-type { + border-top: 1px solid #ddd; + } + &:last-of-type { + border-bottom: 1px solid #ddd; + } + + } +} + +&.top { + .reply { + border-left: 1px solid #ddd; + border-right: 1px solid #ddd; + + &:first-of-type { + border-top: 1px solid #ddd; + } + &:last-of-type { + } + + } +} + + - .reply {padding-bottom: 10px;} .topic-body { - padding-top: 7px; - padding-bottom: 10px; } .topic-meta-data h5 {margin: 5px;} .topic-meta-data-inside { - margin: -3px 15px 0 0; + margin: -3px 0 0 0; color: #aaa; } .topic-meta-data {padding-top: 20px;} + + + + + } @@ -212,8 +242,6 @@ nav.post-controls { .post-action { - margin-top: 3px; - margin-bottom: 3px; .relative-date { margin-left: 5px; } @@ -236,11 +264,9 @@ a.star { display: none; } -.topic-link {margin-left: -8px;} .topic-summary { - button {border-radius: 0;} .btn { @@ -252,7 +278,7 @@ a.star { - margin: 15px 0 20px 0; + margin: 20px 0 0 0; border: 1px solid #ddd; h3 { @@ -456,7 +482,9 @@ iframe { } -.extra-info-wrapper {float: left; width: 78%;} +.extra-info-wrapper {float: left; width: 78%; +.topic-statuses {margin-right: 5px;} +} #main .inner a.star {margin-top: 6px;} @@ -467,11 +495,9 @@ iframe { a:not(.badge-category) {margin-left: -10px;} } - - - + a.star { - margin-right: 8px; + margin-right: 5px; margin-top: 6px; } @@ -692,10 +718,12 @@ blockquote { ul {margin: 0;} padding-left: 10px; + i {font-size: 12px;} + .post-links { - margin-top: 6px; + margin-top: 3px; list-style-type: none; - padding-left: 20px; + padding-left: 19px; position: relative; margin-left: 5px; a i { @@ -703,6 +731,7 @@ blockquote { left: 0; margin-right: 15px; margin-bottom: 20px; + } a {color: #aaa;} @@ -718,12 +747,13 @@ blockquote { float: left; position: relative; width: 720px; - padding: 10px 10px 10px 20px; + padding: 10px 10px 15px 20px; } .posts-wrapper { position: relative; + border-bottom: 1px solid #ddd; } @@ -749,21 +779,29 @@ blockquote { .row:after {clear: both;} .embedded-posts { h1, h2, h3 {margin: 10px 0;} + &.bottom { + &.hidden {display: block; opacity: 0; } - &.bottom .arrow {float: right; margin: 0 15px 0 0;} + } + &.bottom .arrow {float: right; margin: 0 0 0 0;} &.top {margin-left: 112px;} .topic-body img {max-width: 100%; height: auto;} .topic-body, .topic-meta-data {border: none;} .row {border-top: 1px solid #ddd; padding-top: 7px;} .reply:first-of-type .row {border-top: none;} } + + + + + .contents.regular { button.show-replies { background: #eee; - border-bottom: 10px solid #eee; - + padding-bottom: 20px; + border-bottom: none; } @@ -771,10 +809,11 @@ button.show-replies { background: #fff; margin-bottom: 0; - border-bottom: none; + padding-bottom: 10px; + border: 1px solid #ddd; &:hover {background: #eee; - .badge-posts {color: #888;} + .badge-posts {color: #888;} } diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index d80aa066c8a..8a84c5e21ef 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/app/assets/stylesheets/desktop/topic.scss @@ -2,12 +2,27 @@ .post-info a {color: #aaa;} .topic-meta-data-inside { + float: right; + margin-top: -22px; float: right; margin-top: -19px; font-size: 12px; } +.post-actions { + color: #bbb; + text-align: right; + a {color: #bbb;} + .post-action { +display: inline-block; +margin-left: 10px; + margin-top: 10px; + + } +} +.post-menu-area {margin-bottom: 10px;} + .post-info { display: inline-block; } @@ -17,7 +32,7 @@ #topic-title { margin-bottom: 20px; margin: -20px 0 0 0; - +.topic-statuses {margin-left: 5px;} h1 { font-size: 2em; @@ -56,7 +71,7 @@ a.edit-topic {font-size: 15px;} .reply-new { i { - + font-size: 12px; margin-right: 5px; background: #fff; border: 1px solid #ddd; @@ -73,7 +88,7 @@ a.reply-new {color: #aaa;} a:hover.reply-new {color: #56aed3; i {background: #e4f2f8; - border: 1px solid #e4f2f8; + border: 1px solid #56aed3; padding: 2px 4px; } @@ -154,7 +169,6 @@ i {background: #e4f2f8; .topic-statuses .topic-status { padding: 0; i { - margin-left: 5px !important; font-size:20px; } @@ -181,4 +195,4 @@ i {background: #e4f2f8; width: 100%; font-size: 15px; z-index: 495 -} \ No newline at end of file +}