mirror of
https://github.com/codeninjasllc/discourse.git
synced 2024-11-30 19:08:10 -05:00
some reorganization, touch optimization, poster expansion design
This commit is contained in:
Kris Aubuchon
parent
9f42bde110
commit
d01185215d
3 changed files with 151 additions and 254 deletions
|
|
@ -7,11 +7,11 @@
|
|||
position: absolute;
|
||||
left: 20px;
|
||||
z-index: 990;
|
||||
@include border-radius-all(3px);
|
||||
@include box-shadow(1px 1px 5px $darkish_gray);
|
||||
box-shadow: 0 2px 6px rgba(70, 70, 70, 0.4);
|
||||
margin-top: -2px;
|
||||
background-color: $white;
|
||||
padding: 7px 7px 6px 7px;
|
||||
width: 400px;
|
||||
padding: 12px 12px 5px 12px;
|
||||
max-width: 350px;
|
||||
|
||||
h1.new-user a {
|
||||
color: $dark_gray;
|
||||
|
|
|
|||
|
|
@ -9,14 +9,12 @@
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
h1 .topic-statuses .topic-status i {margin-right: 5px;}
|
||||
|
||||
.full-width {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
h1 .topic-statuses .topic-status i {margin-right: 5px;}
|
||||
|
||||
.logo-small {margin-right: 8px;}
|
||||
|
||||
.topic-post {
|
||||
|
|
@ -28,9 +26,7 @@ h1 .topic-statuses .topic-status i {margin-right: 5px;}
|
|||
|
||||
&:last-of-type {
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.reply-to-tab {
|
||||
display: block;
|
||||
|
|
@ -43,19 +39,21 @@ h1 .topic-statuses .topic-status i {margin-right: 5px;}
|
|||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.avoid-tab {padding-top: 25px;
|
||||
|
||||
.topic-meta-data-inside {margin-top: -30px;}
|
||||
.avoid-tab {
|
||||
padding-top: 25px;
|
||||
.topic-meta-data-inside {margin-top: -30px;}
|
||||
}
|
||||
|
||||
.gutter {
|
||||
.reply-new {
|
||||
.discourse-no-touch & {
|
||||
opacity:0;
|
||||
transition: linear 0.15s;
|
||||
-webkit-transition: linear 0.15s;
|
||||
}
|
||||
.discourse-touch & {opacity: 1;}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
section.post-menu-area, .post-actions {
|
||||
.discourse-no-touch & {
|
||||
|
|
@ -63,6 +61,7 @@ section.post-menu-area, .post-actions {
|
|||
transition: linear 0.15s;
|
||||
-webkit-transition: linear 0.15s;
|
||||
}
|
||||
.discourse-touch & {opacity: 1;}
|
||||
}
|
||||
|
||||
&:hover section.post-menu-area, &:hover .post-actions {
|
||||
|
|
@ -82,7 +81,6 @@ nav.post-controls {
|
|||
padding: 0;
|
||||
button {color: #aaa;
|
||||
margin-right: 2px;
|
||||
|
||||
}
|
||||
|
||||
span.badge-posts {
|
||||
|
|
@ -96,7 +94,6 @@ nav.post-controls {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
button.show-replies {
|
||||
padding: 8px 15px;
|
||||
margin-left: 0px;
|
||||
|
|
@ -122,12 +119,10 @@ nav.post-controls {
|
|||
|
||||
}
|
||||
|
||||
|
||||
.create i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
font-size: 16px;
|
||||
padding: 8px 10px;
|
||||
|
|
@ -136,20 +131,16 @@ nav.post-controls {
|
|||
border: none;
|
||||
margin-left: 3px;
|
||||
transition: all linear 0.15s;
|
||||
outline: none; //removes the pesky square button highlight from some browsers
|
||||
outline: none;
|
||||
&:hover {
|
||||
background: #eee;
|
||||
color: #888;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
&:active {
|
||||
|
||||
@include box-shadow(inset 0 1px 3px rgba($black, 0.2));
|
||||
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -190,25 +181,18 @@ nav.post-controls {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.embedded-posts {
|
||||
.embedded-posts {
|
||||
background: #eee;
|
||||
|
||||
.quote .title {background: #ddd;}
|
||||
blockquote {background: #ddd;}
|
||||
&.bottom { margin-top: -11px;}
|
||||
|
||||
.topic-meta-data h5 {margin: 5px;}
|
||||
|
||||
.topic-meta-data-inside {
|
||||
margin: -3px 0 0 0;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.topic-meta-data {padding-top: 20px;}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.post-action {
|
||||
.relative-date {
|
||||
|
|
@ -231,17 +215,15 @@ a.star {
|
|||
}
|
||||
|
||||
.topic-summary {
|
||||
margin: 20px 0 0 0;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
button {border-radius: 0;}
|
||||
|
||||
.topic-links li {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
|
||||
margin: 20px 0 0 0;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 4px;
|
||||
color: #323232;
|
||||
|
|
@ -322,11 +304,8 @@ a.star {
|
|||
}
|
||||
|
||||
|
||||
.participants {
|
||||
|
||||
.user {float: left; margin: 7px 20px 7px 0;}
|
||||
|
||||
|
||||
.participants { // PMs //
|
||||
.user {float: left; margin: 7px 20px 7px 0;}
|
||||
}
|
||||
|
||||
.topic-links {
|
||||
|
|
@ -374,7 +353,6 @@ a.star {
|
|||
|
||||
#topic-footer-buttons {
|
||||
padding: 20px 10px 0 10px;
|
||||
|
||||
p {
|
||||
line-height: 32px;
|
||||
color: #888;
|
||||
|
|
@ -384,29 +362,22 @@ a.star {
|
|||
|
||||
#suggested-topics {
|
||||
clear: left;
|
||||
padding: 20px 10px 15px 10px;
|
||||
|
||||
|
||||
.topics table tbody tr {background: #fff;}
|
||||
.topics table tbody tr {background: #fff;}
|
||||
|
||||
table {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border-color: #ddd;
|
||||
margin-top: 10px;
|
||||
|
||||
|
||||
|
||||
}
|
||||
padding: 20px 10px 15px 10px;
|
||||
|
||||
.title {
|
||||
font-size: 14px; line-height: 8px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
span.post-count {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
|
|
@ -423,14 +394,18 @@ span.post-count {
|
|||
}
|
||||
|
||||
#topic-title {
|
||||
|
||||
z-index: 1000;
|
||||
padding: 14px 0 8px 0;
|
||||
h1 { line-height: 1.2em; overflow: hidden; }
|
||||
.topic-statuses {margin-top: -2px; .icon-pushpin {margin-top: -1px;}}
|
||||
.star {font-size: 20px; margin-top: 8px;}
|
||||
|
||||
.chzn-container {vertical-align: middle;}
|
||||
h1 {
|
||||
line-height: 1.2em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.topic-statuses {
|
||||
margin-top: -2px;
|
||||
.icon-pushpin {margin-top: -1px;}
|
||||
}
|
||||
.star {font-size: 20px; margin-top: 8px;}
|
||||
.chzn-container {vertical-align: middle;}
|
||||
}
|
||||
|
||||
article.boxed {
|
||||
|
|
@ -461,12 +436,12 @@ iframe {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.extra-info-wrapper {float: left; width: 78%;
|
||||
.topic-statuses {margin-right: 5px;}
|
||||
.extra-info-wrapper {
|
||||
float: left;
|
||||
width: 78%;
|
||||
.topic-statuses {margin-right: 5px;}
|
||||
}
|
||||
|
||||
|
||||
.extra-info {
|
||||
h1 {
|
||||
margin: 5px 0 0 0;
|
||||
|
|
@ -496,14 +471,11 @@ iframe {
|
|||
padding-top: 30px;
|
||||
|
||||
img { text-align: center; }
|
||||
.contents {
|
||||
|
||||
text-align: center;}
|
||||
h3 {display: block;}
|
||||
.contents { text-align: center;}
|
||||
h3 { display: block; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
.open>.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -527,14 +499,10 @@ h3 {display: block;}
|
|||
}
|
||||
|
||||
.contents .cooked {
|
||||
|
||||
padding-right: 30px;
|
||||
|
||||
h1, h2, h3 {margin: 10px 0;}
|
||||
|
||||
h1, h2, h3 {margin: 10px 0;}
|
||||
}
|
||||
|
||||
|
||||
.modal-body {
|
||||
input[type=text] {
|
||||
font-size: 16px;
|
||||
|
|
@ -582,9 +550,6 @@ h1, h2, h3 {margin: 10px 0;}
|
|||
margin-top: -20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#show-topic-admin {
|
||||
right: 20px;
|
||||
padding: 5px 8px;
|
||||
|
|
@ -592,10 +557,6 @@ h1, h2, h3 {margin: 10px 0;}
|
|||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.topic-admin-menu {
|
||||
|
||||
h3 {margin-top: 0px;}
|
||||
|
|
@ -610,21 +571,19 @@ h1, h2, h3 {margin: 10px 0;}
|
|||
.staff a {
|
||||
padding: 4px;
|
||||
margin: -4px 0 0 0;
|
||||
background-color: lighten(yellow, 35%);}
|
||||
background-color: lighten(yellow, 35%);
|
||||
}
|
||||
|
||||
.topic-meta-data {
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
|
||||
h3 {
|
||||
h3 {
|
||||
font-size: 13px;
|
||||
margin-top: 5px;
|
||||
word-wrap: break-word;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.user-title {
|
||||
|
|
@ -634,19 +593,23 @@ h3 {
|
|||
font-size: 80%;
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.info-line {
|
||||
margin: 10px 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.quote .title {margin-right: 0;}
|
||||
.quote {margin-top: 20px;}
|
||||
|
||||
blockquote { /* solo quotes */
|
||||
margin: 14px 0;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.quote { /* quotes with attribution */
|
||||
margin-top: 14px;
|
||||
.title {margin-right: 0;}
|
||||
blockquote {margin: 0;}
|
||||
}
|
||||
|
||||
.quote-controls {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
|
|
@ -670,23 +633,14 @@ blockquote {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.quote .title {
|
||||
border-left: 5px solid #bebebe;
|
||||
background-color: #f1f1f1;
|
||||
padding: 10px 10px 0 12px;
|
||||
.avatar { margin-right: 7px; }
|
||||
img {margin-top: -4px;}
|
||||
|
||||
|
||||
.controls {}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.gutter {
|
||||
float: left;
|
||||
max-width: 250px;
|
||||
|
|
@ -707,15 +661,10 @@ blockquote {
|
|||
left: 0;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
a {color: #aaa;}
|
||||
|
||||
li {margin-bottom: 7px;}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.topic-body {
|
||||
|
|
@ -724,14 +673,12 @@ blockquote {
|
|||
position: relative;
|
||||
width: 720px;
|
||||
padding: 10px 0 15px 20px;
|
||||
|
||||
}
|
||||
|
||||
.posts-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
//columns
|
||||
|
||||
.span14 { width: 70%; max-width: 720px; } //main content
|
||||
|
|
@ -741,17 +688,13 @@ blockquote {
|
|||
|
||||
|
||||
@media screen and (max-width: 966px) {
|
||||
|
||||
.gutter {display: none;}
|
||||
|
||||
.span14 { width: 80%; max-width: 720px; } //main content
|
||||
|
||||
}
|
||||
|
||||
|
||||
.gutter {display: none;}
|
||||
.span14 { width: 80%; max-width: 720px; } //main content
|
||||
}
|
||||
|
||||
.row:before, .row:after {display: table; content: "";}
|
||||
.row:after {clear: both;}
|
||||
|
||||
.embedded-posts {
|
||||
h1, h2, h3 {margin: 10px 0;}
|
||||
&.bottom {
|
||||
|
|
@ -766,40 +709,26 @@ blockquote {
|
|||
.reply:first-of-type .row {border-top: none;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.contents.regular {
|
||||
|
||||
button.show-replies {
|
||||
|
||||
background: #eee;
|
||||
padding-bottom: 20px;
|
||||
|
||||
|
||||
&:hover {background: #ddd;
|
||||
.badge-posts {color: #888;}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&.bottom-round button.show-replies {
|
||||
|
||||
background: #eee;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 8px;
|
||||
|
||||
|
||||
&:hover {background: #ddd;
|
||||
.badge-posts {color: #888;}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.btn-group .dropdown-toggle:active,
|
||||
|
|
@ -881,14 +810,49 @@ clear: both;
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#selected-posts {
|
||||
|
||||
margin-left: 330px;
|
||||
width: 12%;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 50%;
|
||||
background-color: lighten($blue, 52%);
|
||||
border: 1px solid lighten($blue, 40%);
|
||||
padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.btn {
|
||||
|
||||
|
||||
button {
|
||||
width: 160px;
|
||||
margin: 4px auto;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
.controls {
|
||||
margin-top: 10px;
|
||||
}
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
p.cancel {
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
color: $black;
|
||||
margin-bottom: 5px;
|
||||
i {
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
border: none;
|
||||
color: $white;
|
||||
font-weight: normal;
|
||||
|
|
@ -914,49 +878,6 @@ clear: both;
|
|||
@include linear-gradient($btn-primary-background-color, $btn-primary-background-color-dark);
|
||||
@include box-shadow((inset 0 1px 0 rgba($white, 0.33), inset 0 -1px 2px rgba($black, 0.2)));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 50%;
|
||||
background-color: lighten($blue, 52%);
|
||||
border: 1px solid lighten($blue, 40%);
|
||||
padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
button {
|
||||
width: 160px;
|
||||
margin: 4px auto;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
.controls {
|
||||
margin-top: 10px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
p.cancel {
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
color: $black;
|
||||
margin-bottom: 5px;
|
||||
i {
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.topic-post {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "common/foundation/variables";
|
||||
@import "common/foundation/mixins";
|
||||
|
||||
.post-info a {color: #aaa;}
|
||||
|
||||
|
|
@ -8,18 +10,19 @@
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
.post-actions {
|
||||
clear: both;
|
||||
text-align: right;
|
||||
.post-action {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
}
|
||||
.post-menu-area {margin-bottom: 10px; margin-top: 20px;}
|
||||
.post-menu-area {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.post-info {
|
||||
display: inline-block;
|
||||
|
|
@ -30,18 +33,12 @@ margin-left: 10px;
|
|||
#topic-title {
|
||||
margin-bottom: 20px;
|
||||
.star {margin-right: 8px;}
|
||||
h1 {
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
|
||||
|
||||
a.badge-category {vertical-align: top;}
|
||||
|
||||
a.edit-topic {font-size: 15px; position: absolute; margin-left: 8px;}
|
||||
|
||||
}
|
||||
|
||||
|
||||
a.badge-category {vertical-align: top;}
|
||||
a.edit-topic {font-size: 15px; position: absolute; margin-left: 8px;}
|
||||
}
|
||||
}
|
||||
|
||||
#topic-closing-info {
|
||||
|
|
@ -59,13 +56,10 @@ a.edit-topic {font-size: 15px; position: absolute; margin-left: 8px;}
|
|||
bottom: 0px;
|
||||
z-index: 500;
|
||||
outline: 1px solid transparent;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.reply-new {
|
||||
i {
|
||||
i {
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
background: #fff;
|
||||
|
|
@ -74,26 +68,20 @@ i {
|
|||
border-radius: 20px;
|
||||
transition: linear 0.15s;
|
||||
-webkit-transition: linear 0.15s;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
a.reply-new {color: #aaa;}
|
||||
a:hover.reply-new {color: #56aed3;
|
||||
|
||||
i {background: #e4f2f8;
|
||||
a:hover.reply-new {
|
||||
color: #56aed3;
|
||||
i {background: #e4f2f8;
|
||||
border: 1px solid #56aed3;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
#topic-progress {
|
||||
|
||||
box-shadow: 0 0 3px #000;
|
||||
|
||||
position: relative;
|
||||
left: 302px;
|
||||
&.hidden {
|
||||
|
|
@ -128,10 +116,7 @@ i {background: #e4f2f8;
|
|||
right: 4px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
|
||||
&:disabled {
|
||||
|
||||
cursor: default;
|
||||
color: #666;
|
||||
}
|
||||
|
|
@ -165,14 +150,9 @@ i {background: #e4f2f8;
|
|||
padding: 0;
|
||||
i {
|
||||
font-size:20px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.heatmap-high {color: #f77 !important;}
|
||||
.heatmap-med {color: #a00 !important;}
|
||||
.heatmap-low {color: #700 !important;}
|
||||
|
|
@ -180,8 +160,6 @@ i {background: #e4f2f8;
|
|||
.onebox-result {margin-top: 15px;}
|
||||
.source .info {padding-right: 10px;}
|
||||
|
||||
|
||||
|
||||
#topic-filter {
|
||||
background-color: #ffe;
|
||||
padding: 8px;
|
||||
|
|
@ -192,10 +170,8 @@ i {background: #e4f2f8;
|
|||
z-index: 495
|
||||
}
|
||||
|
||||
|
||||
/* Code, KBD, Sub/sup formatting */
|
||||
|
||||
|
||||
code,kbd,pre,samp{
|
||||
font-family:monospace, serif; font-size:1em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue