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

Merge pull request #2551 from awesomerobot/master 

fixing the topic-body at 690px wide, leaving gutter flexible
This commit is contained in:
Jeff Atwood 2014-07-16 20:06:25 -07:00
parent 3518a3db1e 38a6b5439d
commit e9e4ec0e52
2 changed files with 44 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,7 @@ h1 .topic-statuses .topic-status i {
.reply-to-tab { .reply-to-tab {
position: absolute; position: absolute;
right: 40%; right: 420px;
z-index: 400; z-index: 400;
padding: 13px 6px 5px; padding: 13px 6px 5px;
font-size: 12px; font-size: 12px;
@ -281,8 +281,8 @@ nav.post-controls {
// top means "in reply to expansion" above a post // top means "in reply to expansion" above a post
&.top { &.top {
margin-left: 5.4594229%; margin-left: 56px;
width: 62.6690712%; width: 690px;
} }
&.top.topic-body {padding-left: 0;} &.top.topic-body {padding-left: 0;}
@ -729,8 +729,8 @@ blockquote > *:last-child {
.gutter { .gutter {
float: left; float: left;
margin-top: 15px; margin-top: 15px;
padding-left: 01.3525699%; padding-left: 11px;
width: 28%; width: 341px;
ul {margin: 0;} ul {margin: 0;}
li {margin-bottom: 10px;} li {margin-bottom: 10px;}
@ -742,6 +742,7 @@ blockquote > *:last-child {
position: relative; position: relative;
margin-left: 5px; margin-left: 5px;
line-height: 18px; line-height: 18px;
word-wrap: break-word;
a i { a i {
position: absolute; position: absolute;
left: 0; left: 0;
@ -759,11 +760,11 @@ blockquote > *:last-child {
} }
.topic-body { .topic-body {
width: 62.6690712%; width: 690px;
float: left; float: left;
position: relative; position: relative;
border-top: 1px solid scale-color-diff(); border-top: 1px solid scale-color-diff();
padding: 12px .5% 15px .5%; padding: 12px 11px 15px 11px;
&.highlighted { &.highlighted {
background-color: scale-color($tertiary, $lightness: 85%); background-color: scale-color($tertiary, $lightness: 85%);
} }
@ -775,8 +776,7 @@ blockquote > *:last-child {
.topic-avatar { .topic-avatar {
border-top: 1px solid scale-color-diff(); border-top: 1px solid scale-color-diff();
padding-top: 16px; padding-top: 16px;
width: 04.9594229%; width: 45px;
min-width: 45px;
float: left; float: left;
.wiki { .wiki {
@ -1060,12 +1060,18 @@ span.highlighted {
/* Tablet (portrait) ----------- */ /* Tablet (portrait) ----------- */
@media only screen @media only screen
and (max-width : 1150px) { and (max-width : 1140px) {
.extra-info { .extra-info {
h1 { h1 {
width: 720px; width: 720px;
} }
} }
.gutter {
width: 200px;
}
.post-cloak .reply-to-tab {
right: 320px;
}
} }
@ -1076,6 +1082,22 @@ and (max-width : 975px) {
width: 650px; width: 650px;
} }
} }
.gutter {
width: 150px;
}
.post-cloak .reply-to-tab {
right: 300px;
}
}
@media only screen
and (max-width : 940px) {
.gutter {
width: 100px;
}
.post-cloak .reply-to-tab {
right: 250px;
}
} }
@media only screen @media only screen
@ -1085,17 +1107,9 @@ and (max-width : 870px) {
width: 520px; width: 520px;
} }
} }
}
@media only screen
and (max-width : 850px) {
.gutter { .gutter {
display: none; display: none;
} }
#topic-progress, #topic-progress-expanded {
left: 210px;
}
.topic-avatar { .topic-avatar {
width: 5%; width: 5%;
@ -1106,15 +1120,15 @@ and (max-width : 850px) {
} }
.topic-body { .topic-body {
width: 92%; width: 91%;
padding-left: 1%; padding-left: 2%;
} }
.embedded-posts { .embedded-posts {
// top means "in reply to expansion" above a post // top means "in reply to expansion" above a post
&.top { &.top {
margin-left: 6%; margin-left: 6%;
width: 93%; width: 91%;
} }
} }

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

@ -292,13 +292,18 @@ kbd
padding: .1em .6em; padding: .1em .6em;
} }
@media only screen
and (max-width : 940px) {
#topic-progress, #topic-progress-expanded {
left: 295px;
}
}
@media only screen @media only screen
and (max-width : 850px) { and (max-width : 870px) {
.gutter {
display: none;
}
#topic-progress, #topic-progress-expanded { #topic-progress, #topic-progress-expanded {
left: 210px; left: 210px;
} }