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

Merge pull request #2526 from awesomerobot/master

Browse Source 
adding some topic layout flexibility
This commit is contained in:
Régis Hanol 2014-07-10 18:05:24 +02:00
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 {
position: absolute;
right: 430px;
right: 40%;
z-index: 400;
padding: 13px 6px 5px;
border-top: 1px solid scale-color-diff();
font-size: 12px;
color: scale-color($primary, $lightness: 50%);
@include medium-width {
right: 320px;
}
@include small-width {
right: 280px;
}
}
.gutter {
@ -258,29 +252,36 @@ nav.post-controls {
h1, h2, h3 {margin: 10px 0;}
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 {
&.hidden {display: block; opacity: 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 {
margin-left: 66px;
max-width: 713px;
@include medium-width {
margin-left: 59px;
}
@include small-width {
margin-left: 57px;
max-width: 720px;
}
margin-left: 5.4594229%;
width: 62.6690712%;
}
&.top.topic-body {padding-left: 0;}
.topic-avatar {border: none; padding-left: 15px;}
.post-date {color: scale-color($primary, $lightness: 50%);}
.fa-arrow-up {margin-left: 5px;}
.row {border-top: 1px solid darken(scale-color-diff(), 10%); padding-top: 7px;}
@ -550,9 +551,6 @@ text-overflow: ellipsis;
}
}
.extra-info {
h1 {
margin: 5px 0 0 0;
@ -731,9 +729,8 @@ blockquote > *:last-child {
.gutter {
float: left;
margin-top: 15px;
padding-left: 15px;
/* urgent fix, must set max width or long gutter width float flows under posts */
max-width: 215px;
padding-left: 01.3525699%;
width: 28%;
ul {margin: 0;}
li {margin-bottom: 10px;}
@ -762,22 +759,24 @@ blockquote > *:last-child {
}
.topic-body {
width: 695px;
width: 62.6690712%;
float: left;
position: relative;
border-top: 1px solid scale-color-diff();
padding: 12px 0 15px 0;
padding: 12px .5% 15px .5%;
&.highlighted {
background-color: scale-color($tertiary, $lightness: 85%);
}
img:not(.avatar), svg {
max-width: 100%;
max-width: 100% !important;
height: auto !important;
}
}
.topic-avatar {
border-top: 1px solid scale-color-diff();
padding-top: 16px;
width: 55px;
width: 04.9594229%;
min-width: 45px;
float: left;
.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%;
}
}
}