github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-27 00:13:37 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #1565 from awesomerobot/master

Browse Source 
topic page: alignment fixes for replies, minor alignment changes
This commit is contained in:
Sam 2013-10-22 23:09:44 -07:00
commit 9ae4245955
5 changed files with 94 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/stylesheets/common/foundation/base.scss
View File

@ -8,7 +8,7 @@
html { html {
color: $black; color: $black;
font: #{$base-font-size}/#{$base-line-height} $base-font-family; font: #{$base-font-size}/#{$base-line-height} $base-font-family;
background-color: $base-background-color; background-color: #fff;
overflow-y: scroll; overflow-y: scroll;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
} }
@ -42,7 +42,7 @@ hr {
height: 1px; height: 1px;
margin: 1em 0; margin: 1em 0;
border: 0; border: 0;
border-top: 1px solid $hr-border-color; border-top: 1px solid #eee;
padding: 0; padding: 0;
} }

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

@ -11,9 +11,8 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: 1000; z-index: 1000;
border-bottom: 1px solid #9baab2; box-shadow: 0 1px 5px rgba(70, 70, 70, .4);
background-color: $white; background-color: $white;
@include box-shadow((0 1px 3px rgba($black, 0.12), inset 0 -4px 4px -4px rgba($black, 0.3)));
.docked & { .docked & {
position: fixed; position: fixed;
} }
@ -60,14 +59,11 @@
> li { > li {
float: left; float: left;
&:first-child .icon { &:first-child .icon {
@include border-radius-all(4px 0 0 4px);
} }
&:first-child.active .icon { &:first-child.active .icon {
@include border-radius-all(4px 0 0 0);
} }
&:last-child .icon { &:last-child .icon {
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
@include border-radius-all(0 4px 4px 0);
} }
} }
.icon { .icon {
@ -79,7 +75,6 @@
color: $nav-button-color; color: $nav-button-color;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
@include box-shadow(inset 0 -4px 4px -4px rgba($black, 0.14));
&: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;
@ -159,7 +154,6 @@
margin-top: -1px; margin-top: -1px;
border: 1px solid #ccc; border: 1px solid #ccc;
background-color: $white; background-color: $white;
@include border-radius-all(4px);
@include box-shadow(0 3px 3px rgba($black, 0.2)); @include box-shadow(0 3px 3px rgba($black, 0.2));
// Common // Common

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

@ -43,7 +43,7 @@
@include border-radius-all(4px 4px 0 0); @include border-radius-all(4px 4px 0 0);
@include box-shadow(0 1px 3px rgba($black, 0.22)); @include box-shadow(0 1px 3px rgba($black, 0.22));
a:visited {color: #888;} a:visited:not(.badge-notification) {color: #888;}
tbody tr { tbody tr {
background-color: $white; background-color: $white;

136
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -1,6 +1,5 @@
@import "common/foundation/variables"; @import "common/foundation/variables";
html {background-color: #fff;}
.container { .container {
@extend .clearfix; @extend .clearfix;
@ -10,6 +9,9 @@ html {background-color: #fff;}
} }
h1 .topic-statuses .topic-status i {margin-right: 5px;}
.full-width { .full-width {
margin-left: 0px; margin-left: 0px;
} }
@ -18,10 +20,17 @@ html {background-color: #fff;}
.topic-post { .topic-post {
padding: 0; padding: 0;
&:first-of-type { &:first-of-type {
border-top: none; border-top: none;
} }
&:last-of-type {
border-bottom: 1px solid #ddd;
}
.reply-to-tab { .reply-to-tab {
display: block; display: block;
position: absolute; position: absolute;
@ -47,7 +56,7 @@ html {background-color: #fff;}
} }
section.post-menu-area { section.post-menu-area, .post-actions {
.discourse-no-touch & { .discourse-no-touch & {
opacity: 0.2; opacity: 0.2;
transition: linear 0.15s; transition: linear 0.15s;
@ -55,7 +64,7 @@ section.post-menu-area {
} }
} }
&:hover section.post-menu-area { &:hover section.post-menu-area, &:hover .post-actions {
opacity: 1; opacity: 1;
} }
@ -66,18 +75,10 @@ section.post-menu-area {
opacity:1; opacity:1;
} }
} }
}
}
nav.post-controls { nav.post-controls {
background-color: #fff;
padding: 0; padding: 0;
margin-top: 20px;
button {color: #aaa; button {color: #aaa;
margin-right: 2px; margin-right: 2px;
@ -96,7 +97,7 @@ nav.post-controls {
button.show-replies { button.show-replies {
padding: 8px 20px; padding: 8px 15px;
margin-left: 0px; margin-left: 0px;
} }
@ -105,13 +106,11 @@ nav.post-controls {
margin-right: 0; margin-right: 0;
color: darken(#e4f2f8, 35%); color: darken(#e4f2f8, 35%);
background: #e4f2f8; background: #e4f2f8;
padding: 7px 20px; padding: 8px 20px;
border: 1px solid #e4f2f8;
margin-left: 10px; margin-left: 10px;
&:hover { color: darken(#e4f2f8, 45%); &:hover { color: darken(#e4f2f8, 45%);
background: darken(#e4f2f8, 10%); background: darken(#e4f2f8, 10%);
border: 1px solid darken(#e4f2f8, 10%);
} }
} }
@ -128,7 +127,7 @@ nav.post-controls {
vertical-align: top; vertical-align: top;
background: transparent; background: transparent;
border: none; border: none;
margin-left: 1px; margin-left: 3px;
transition: all linear 0.15s; transition: all linear 0.15s;
outline: none; //removes the pesky square button highlight from some browsers outline: none; //removes the pesky square button highlight from some browsers
&:hover { &:hover {
@ -189,39 +188,26 @@ nav.post-controls {
.quote .title {background: #ddd;} .quote .title {background: #ddd;}
blockquote {background: #ddd;} blockquote {background: #ddd;}
&.bottom { margin-top: -11px;}
.reply {padding-bottom: 10px;}
.topic-body {
padding-top: 7px;
padding-bottom: 10px;
}
.topic-meta-data h5 {margin: 5px;} .topic-meta-data h5 {margin: 5px;}
.topic-meta-data-inside { .topic-meta-data-inside {
margin: -3px 15px 0 0; margin: -3px 0 0 0;
color: #aaa; color: #aaa;
} }
.topic-meta-data {padding-top: 20px;} .topic-meta-data {padding-top: 20px;}
} }
.post-action { .post-action {
margin-top: 3px;
margin-bottom: 3px;
.relative-date { .relative-date {
margin-left: 5px; margin-left: 5px;
} }
.avatar {margin-right: 2px;} .avatar { margin-right: 2px; }
} }
a.star { a.star {
display: inline-block; display: inline-block;
float: left; float: left;
@ -236,23 +222,16 @@ a.star {
display: none; display: none;
} }
.topic-link {margin-left: -8px;}
.topic-summary { .topic-summary {
button {border-radius: 0;} button {border-radius: 0;}
.btn {
}
.topic-links li { .topic-links li {
word-wrap: break-word; word-wrap: break-word;
} }
margin: 15px 0 20px 0; margin: 20px 0 0 0;
border: 1px solid #ddd; border: 1px solid #ddd;
h3 { h3 {
@ -391,13 +370,20 @@ a.star {
#suggested-topics { #suggested-topics {
clear: left; clear: left;
.topics table tbody tr {background: #fff;}
table { table {
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
border-color: #ddd; border-color: #ddd;
margin-top: 10px; margin-top: 10px;
} }
padding: 20px 10px 15px 10px; padding: 20px 10px 15px 10px;
.title { .title {
font-size: 14px; line-height: 8px; font-size: 14px; line-height: 8px;
@ -423,7 +409,7 @@ span.post-count {
#topic-title { #topic-title {
z-index: 1000; z-index: 1000;
padding: 20px 10px 15px 10px; padding: 25px 10px 15px 10px;
.chzn-container {vertical-align: middle;} .chzn-container {vertical-align: middle;}
} }
@ -456,7 +442,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;} #main .inner a.star {margin-top: 6px;}
@ -467,11 +455,9 @@ iframe {
a:not(.badge-category) {margin-left: -10px;} a:not(.badge-category) {margin-left: -10px;}
} }
a.star { a.star {
margin-right: 8px; margin-right: 5px;
margin-top: 6px; margin-top: 6px;
} }
@ -485,7 +471,8 @@ iframe {
margin-bottom: 10px; margin-bottom: 10px;
width: 92px; width: 92px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
padding-top: 25px; padding-top: 30px;
img { text-align: center; } img { text-align: center; }
.contents { .contents {
@ -519,6 +506,8 @@ h3 {display: block;}
.contents .cooked { .contents .cooked {
padding-right: 30px;
h1, h2, h3 {margin: 10px 0;} h1, h2, h3 {margin: 10px 0;}
} }
@ -536,16 +525,13 @@ h1, h2, h3 {margin: 10px 0;}
.deleted { .deleted {
.topic-body { .topic-body {
background-color: lighten(red, 45%); background-color: lighten(red, 45%);
}
} }
}
.moderator { .moderator {
.topic-body { .topic-body {
background-color: lighten(yellow, 45%); background-color: lighten(yellow, 45%);
} }
} }
#share-link { #share-link {
@ -633,7 +619,6 @@ h3 {
blockquote { blockquote {
clear:both;
margin: 0; margin: 0;
padding: 12px; padding: 12px;
} }
@ -644,7 +629,7 @@ blockquote {
} }
.quote .title {margin-right: 0;} .quote .title {margin-right: 0;}
.quote {margin-top: 20px;}
.quote-controls { .quote-controls {
float: right; float: right;
color: #aaa; color: #aaa;
@ -692,10 +677,12 @@ blockquote {
ul {margin: 0;} ul {margin: 0;}
padding-left: 10px; padding-left: 10px;
i {font-size: 12px;}
.post-links { .post-links {
margin-top: 6px; margin-top: 3px;
list-style-type: none; list-style-type: none;
padding-left: 20px; padding-left: 19px;
position: relative; position: relative;
margin-left: 5px; margin-left: 5px;
a i { a i {
@ -703,6 +690,7 @@ blockquote {
left: 0; left: 0;
margin-right: 15px; margin-right: 15px;
margin-bottom: 20px; margin-bottom: 20px;
} }
a {color: #aaa;} a {color: #aaa;}
@ -718,7 +706,7 @@ blockquote {
float: left; float: left;
position: relative; position: relative;
width: 720px; width: 720px;
padding: 10px 10px 10px 20px; padding: 10px 0 15px 20px;
} }
@ -749,35 +737,49 @@ blockquote {
.row:after {clear: both;} .row:after {clear: both;}
.embedded-posts { .embedded-posts {
h1, h2, h3 {margin: 10px 0;} 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;} &.top {margin-left: 112px;}
.topic-body img {max-width: 100%; height: auto;} .topic-body img {max-width: 100%; height: auto;}
.topic-body, .topic-meta-data {border: none;} .topic-body, .topic-meta-data {border: none;}
.row {border-top: 1px solid #ddd; padding-top: 7px;} .row {border-top: 1px solid #ddd; padding-top: 7px;}
.reply:first-of-type .row {border-top: none;} .reply:first-of-type .row {border-top: none;}
} }
.contents.regular { .contents.regular {
button.show-replies { button.show-replies {
background: #eee; background: #eee;
border-bottom: 10px solid #eee; padding-bottom: 20px;
&:hover {background: #ddd;
.badge-posts {color: #888;}
} }
}
&.bottom-round button.show-replies { &.bottom-round button.show-replies {
background: #fff; background: #eee;
margin-bottom: 0; margin-bottom: 0;
border-bottom: none; padding-bottom: 8px;
&:hover {background: #eee;
.badge-posts {color: #888;} &:hover {background: #ddd;
.badge-posts {color: #888;}
} }
} }

29
app/assets/stylesheets/desktop/topic.scss
View File

@ -2,12 +2,26 @@
.post-info a {color: #aaa;} .post-info a {color: #aaa;}
.topic-meta-data-inside { .topic-meta-data-inside {
float: right;
margin-top: -22px;
float: right; float: right;
margin-top: -19px;
font-size: 12px; 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; margin-top: 20px;}
.post-info { .post-info {
display: inline-block; display: inline-block;
} }
@ -17,11 +31,11 @@
#topic-title { #topic-title {
margin-bottom: 20px; margin-bottom: 20px;
margin: -20px 0 0 0; margin: -20px 0 0 0;
.topic-statuses {margin-left: 5px;}
h1 { h1 {
font-size: 2em; font-size: 2.2em;
line-height: 1.0; line-height: 1em;
margin: 0; margin: 0;
@ -56,7 +70,7 @@ a.edit-topic {font-size: 15px;}
.reply-new { .reply-new {
i { i {
font-size: 12px;
margin-right: 5px; margin-right: 5px;
background: #fff; background: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -73,7 +87,7 @@ a.reply-new {color: #aaa;}
a:hover.reply-new {color: #56aed3; a:hover.reply-new {color: #56aed3;
i {background: #e4f2f8; i {background: #e4f2f8;
border: 1px solid #e4f2f8; border: 1px solid #56aed3;
padding: 2px 4px; padding: 2px 4px;
} }
@ -154,7 +168,6 @@ i {background: #e4f2f8;
.topic-statuses .topic-status { .topic-statuses .topic-status {
padding: 0; padding: 0;
i { i {
margin-left: 5px !important;
font-size:20px; font-size:20px;
} }
@ -181,4 +194,4 @@ i {background: #e4f2f8;
width: 100%; width: 100%;
font-size: 15px; font-size: 15px;
z-index: 495 z-index: 495
} }