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 #2526 from awesomerobot/master 

adding some topic layout flexibility
This commit is contained in:
Régis Hanol 2014-07-10 18:05:24 +02:00
parent 21d3785622 5aaaa9b915
commit 70177fabf5
1 changed files with 62 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,18 +52,12 @@ h1 .topic-statuses .topic-status i {
.reply-to-tab { .reply-to-tab {
position: absolute; position: absolute;
right: 430px; right: 40%;
z-index: 400; z-index: 400;
padding: 13px 6px 5px; padding: 13px 6px 5px;
border-top: 1px solid scale-color-diff();
font-size: 12px; font-size: 12px;
color: scale-color($primary, $lightness: 50%); color: scale-color($primary, $lightness: 50%);
@include medium-width {
right: 320px;
}
@include small-width {
right: 280px;
}
} }
.gutter { .gutter {
@ -258,29 +252,36 @@ nav.post-controls {
h1, h2, h3 {margin: 10px 0;} h1, h2, h3 {margin: 10px 0;}
a.mention {background: darken(scale-color-diff(), 10%);} a.mention {background: darken(scale-color-diff(), 10%);}
.topic-body { width: 610px; border: none; } .topic-body {
width: 84%;
padding-left: 1%;
padding-right: 1%;
}
.topic-avatar {
width: 45px;
margin: 0 10px;
}
// bottom means "reply expansion" below a post // bottom means "reply expansion" below a post
&.bottom { &.bottom {
&.hidden {display: block; opacity: 0; } &.hidden {display: block; opacity: 0; }
} }
&.bottom .arrow {float: right; margin: 0 0 0 0;} &.bottom .arrow {float: right; margin: 0 0 0 0;}
&.bottom { margin-top: -11px;} &.bottom {
margin-top: -11px;
}
// top means "in reply to expansion" above a post // top means "in reply to expansion" above a post
&.top { &.top {
margin-left: 66px; margin-left: 5.4594229%;
max-width: 713px; width: 62.6690712%;
@include medium-width {
margin-left: 59px;
}
@include small-width {
margin-left: 57px;
max-width: 720px;
}
} }
&.top.topic-body {padding-left: 0;} &.top.topic-body {padding-left: 0;}
.topic-avatar {border: none; padding-left: 15px;}
.post-date {color: scale-color($primary, $lightness: 50%);} .post-date {color: scale-color($primary, $lightness: 50%);}
.fa-arrow-up {margin-left: 5px;} .fa-arrow-up {margin-left: 5px;}
.row {border-top: 1px solid darken(scale-color-diff(), 10%); padding-top: 7px;} .row {border-top: 1px solid darken(scale-color-diff(), 10%); padding-top: 7px;}
@ -550,9 +551,6 @@ text-overflow: ellipsis;
} }
} }
.extra-info { .extra-info {
h1 { h1 {
margin: 5px 0 0 0; margin: 5px 0 0 0;
@ -731,9 +729,8 @@ blockquote > *:last-child {
.gutter { .gutter {
float: left; float: left;
margin-top: 15px; margin-top: 15px;
padding-left: 15px; padding-left: 01.3525699%;
/* urgent fix, must set max width or long gutter width float flows under posts */ width: 28%;
max-width: 215px;
ul {margin: 0;} ul {margin: 0;}
li {margin-bottom: 10px;} li {margin-bottom: 10px;}
@ -762,22 +759,24 @@ blockquote > *:last-child {
} }
.topic-body { .topic-body {
width: 695px; width: 62.6690712%;
float: left; float: left;
position: relative; position: relative;
border-top: 1px solid scale-color-diff(); border-top: 1px solid scale-color-diff();
padding: 12px 0 15px 0; padding: 12px .5% 15px .5%;
&.highlighted { &.highlighted {
background-color: scale-color($tertiary, $lightness: 85%); background-color: scale-color($tertiary, $lightness: 85%);
} }
img:not(.avatar), svg { img:not(.avatar), svg {
max-width: 100%; max-width: 100% !important;
height: auto !important;
} }
} }
.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: 55px; width: 04.9594229%;
min-width: 45px;
float: left; float: left;
.wiki { .wiki {
@ -1087,3 +1086,36 @@ and (max-width : 870px) {
} }
} }
} }
@media only screen
and (max-width : 850px) {
.gutter {
display: none;
}
#topic-progress, #topic-progress-expanded {
left: 210px;
}
.topic-avatar {
width: 5%;
}
.post-cloak .reply-to-tab {
right: 15%;
}
.topic-body {
width: 92%;
padding-left: 1%;
}
.embedded-posts {
// top means "in reply to expansion" above a post
&.top {
margin-left: 6%;
width: 93%;
}
}
}