Commit 43a70d89 by Tom Giannattasio

a few main discussion page tweaks

parent 0ec7e3d3
...@@ -5,6 +5,12 @@ $comment_body_size: 0.9em; ...@@ -5,6 +5,12 @@ $comment_body_size: 0.9em;
$comment_info_size: 0.75em; $comment_info_size: 0.75em;
$discussion_input_width: 100%; $discussion_input_width: 100%;
$tag_background_color: #e7ecdd;
$tag_border_color: #babdb3;
$tag_text_color: #5b614f;
@mixin discussion-font { @mixin discussion-font {
font-family: inherit; font-family: inherit;
} }
...@@ -20,6 +26,7 @@ $discussion_input_width: 100%; ...@@ -20,6 +26,7 @@ $discussion_input_width: 100%;
.discussion-non-content { .discussion-non-content {
margin-left: flex-gutter(); margin-left: flex-gutter();
} }
//TITLE //TITLE
.discussion-title { .discussion-title {
@include discussion-font; @include discussion-font;
...@@ -29,6 +36,7 @@ $discussion_input_width: 100%; ...@@ -29,6 +36,7 @@ $discussion_input_width: 100%;
font-weight: bold; font-weight: bold;
margin-bottom: flex-gutter(6); margin-bottom: flex-gutter(6);
} }
.discussion-title-wrapper { .discussion-title-wrapper {
.discussion-watch-discussion, .discussion-unwatch-discussion { .discussion-watch-discussion, .discussion-unwatch-discussion {
@include discussion-font; @include discussion-font;
...@@ -37,6 +45,7 @@ $discussion_input_width: 100%; ...@@ -37,6 +45,7 @@ $discussion_input_width: 100%;
margin-left: 5px; margin-left: 5px;
} }
} }
//SORTING //SORTING
.discussion-sort { .discussion-sort {
float: right; float: right;
...@@ -48,11 +57,13 @@ $discussion_input_width: 100%; ...@@ -48,11 +57,13 @@ $discussion_input_width: 100%;
text-decoration: none; text-decoration: none;
} }
} }
.discussion-sort-link.sorted { .discussion-sort-link.sorted {
color: #1C71DD; color: #1C71DD;
font-weight: bold; font-weight: bold;
} }
} }
//SEARCH //SEARCH
.search-wrapper-inline { .search-wrapper-inline {
display: inline-block; display: inline-block;
...@@ -60,10 +71,16 @@ $discussion_input_width: 100%; ...@@ -60,10 +71,16 @@ $discussion_input_width: 100%;
margin-top: 3%; margin-top: 3%;
width: 80%; width: 80%;
} }
.search-wrapper {
height: 100px;
}
.discussion-search-form { .discussion-search-form {
display: inline-block; display: inline-block;
margin-bottom: 1%; margin-bottom: 1%;
width: flex-grid(12); width: flex-grid(12);
.discussion-link { .discussion-link {
@include button; @include button;
color: white; color: white;
...@@ -74,25 +91,32 @@ $discussion_input_width: 100%; ...@@ -74,25 +91,32 @@ $discussion_input_width: 100%;
padding-top: 9px; padding-top: 9px;
text-decoration: none; text-decoration: none;
} }
.discussion-search-text { .discussion-search-text {
@include discussion-font; @include discussion-font;
} }
.search-input { .search-input {
float: left; float: left;
font: inherit; font: inherit;
font-style: normal; font-style: normal;
width: 72%; // width: 72%;
width: flex-grid(8);
margin-left: flex-grid(1);
} }
} }
.search-within { .search-within {
display: block; display: block;
margin-bottom: 3%; margin-bottom: 3%;
} }
.discussion-search-within-board { .discussion-search-within-board {
font: inherit; font: inherit;
font-size: $comment_body_size; font-size: $comment_body_size;
font-style: normal; font-style: normal;
} }
//BASIC BUTTON STYLES //BASIC BUTTON STYLES
.control-button { .control-button {
@include button; @include button;
...@@ -117,6 +141,7 @@ $discussion_input_width: 100%; ...@@ -117,6 +141,7 @@ $discussion_input_width: 100%;
width: inherit; width: inherit;
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
&:hover { &:hover {
background-color: #A2A2A2; background-color: #A2A2A2;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #A2A2A2),color-stop(100%, #7B7B7B)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #A2A2A2),color-stop(100%, #7B7B7B));
...@@ -134,6 +159,7 @@ $discussion_input_width: 100%; ...@@ -134,6 +159,7 @@ $discussion_input_width: 100%;
//FOLLOW BUTTON //FOLLOW BUTTON
.follow-wrapper { .follow-wrapper {
float: right; float: right;
.discussion-link { .discussion-link {
@include button; @include button;
background-color: #BEBEBE; background-color: #BEBEBE;
...@@ -147,6 +173,7 @@ $discussion_input_width: 100%; ...@@ -147,6 +173,7 @@ $discussion_input_width: 100%;
padding: 5px 8px; padding: 5px 8px;
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
&:hover { &:hover {
background-color: #AAA; background-color: #AAA;
background-image: none; background-image: none;
...@@ -163,25 +190,31 @@ $discussion_input_width: 100%; ...@@ -163,25 +190,31 @@ $discussion_input_width: 100%;
height: flex-grid(3); height: flex-grid(3);
margin: 1% 2%; margin: 1% 2%;
text-align: center; text-align: center;
.discussion-vote-count { .discussion-vote-count {
@include discussion-font; @include discussion-font;
font-size: $comment_body_size; font-size: $comment_body_size;
} }
a.discussion-vote { a.discussion-vote {
color: black; color: black;
display: block; display: block;
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
&:hover { &:hover {
color: #1C71DD; color: #1C71DD;
text-decoration: none; text-decoration: none;
} }
&.discussion-vote-up { &.discussion-vote-up {
margin-bottom: 3px; margin-bottom: 3px;
} }
&.discussion-vote-down { &.discussion-vote-down {
margin-top: 5px; margin-top: 5px;
} }
&.voted { &.voted {
color: #1C71DD; color: #1C71DD;
} }
...@@ -193,6 +226,7 @@ $discussion_input_width: 100%; ...@@ -193,6 +226,7 @@ $discussion_input_width: 100%;
min-height: 40px; min-height: 40px;
width: 90%; width: 90%;
} }
.new-post-form, .discussion-thread-edit { .new-post-form, .discussion-thread-edit {
.title-input, .body-input { .title-input, .body-input {
display: block !important; display: block !important;
...@@ -200,14 +234,17 @@ $discussion_input_width: 100%; ...@@ -200,14 +234,17 @@ $discussion_input_width: 100%;
font-style: normal; font-style: normal;
width: $discussion_input_width !important; width: $discussion_input_width !important;
} }
.discussion-errors { .discussion-errors {
color: #8F0E0E; color: #8F0E0E;
display: block; display: block;
margin-left: -5%; margin-left: -5%;
} }
.new-post-body { .new-post-body {
margin-top: flex-gutter(); margin-top: flex-gutter();
} }
.tagsinput { .tagsinput {
background: #FAFAFA; background: #FAFAFA;
border: 1px solid #C8C8C8; border: 1px solid #C8C8C8;
...@@ -227,19 +264,24 @@ $discussion_input_width: 100%; ...@@ -227,19 +264,24 @@ $discussion_input_width: 100%;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
} }
.discussion-content-edit, .discussion-reply-new, .new-post-form { .discussion-content-edit, .discussion-reply-new, .new-post-form {
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
.new-post-control { .new-post-control {
margin-left: 80%; margin-left: 80%;
margin-top: 1%; margin-top: 1%;
} }
.reply-post-control { .reply-post-control {
margin-left: 73%; margin-left: 73%;
} }
.edit-post-control { .edit-post-control {
margin-left: 79%; margin-left: 79%;
margin-top: 1%; margin-top: 1%;
} }
.control-button { .control-button {
@include button; @include button;
@include discussion-font; @include discussion-font;
...@@ -253,71 +295,85 @@ $discussion_input_width: 100%; ...@@ -253,71 +295,85 @@ $discussion_input_width: 100%;
width: inherit; width: inherit;
} }
} }
.new-post-form { .new-post-form {
margin: 10px 0 40px 0; margin: 10px 0 40px 0;
} }
.discussion-reply-new { .discussion-reply-new {
.discussion-auto-watch { .discussion-auto-watch {
margin-left: 2%; margin-left: 2%;
} }
} }
//THREAD STYLES //THREAD STYLES
.thread { .thread {
//display: none; //display: none;
.thread-title { .thread-title {
@include discussion-font; @include discussion-font;
@include discussion-clickable; @include discussion-clickable;
display: block; display: block;
margin-bottom: $body-line-height;
font-size: $comment_title_size; font-size: $comment_title_size;
font-weight: bold; font-weight: bold;
} }
.thread-body, .content-body { .thread-body, .content-body {
@include discussion-font; @include discussion-font;
font-size: $comment_body_size; font-size: $comment_body_size;
margin-bottom: 4px; margin-bottom: 4px;
margin-top: 3px; margin-top: 3px;
p { p {
@include discussion-font; @include discussion-font;
margin: 0;
} }
} }
.thread-tags { .thread-tags {
display: inline-block; display: inline-block;
.thread-tag { .thread-tag {
@include discussion-font; @include discussion-font;
background: #CDE69C; background: $tag_background_color;
border: 1px solid #A5D24A; border: 1px solid $tag_border_color;
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
color: #638421; color: $tag_text_color;
float: left; float: left;
font-size: 13px; font-size: 13px;
margin: 5px 7px 5px 0; margin: 5px 7px 5px 0;
padding: 5px 7px; padding: 5px 7px;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
border-color: #1E4612; border-color: #7b8761;
color: #1E4612; color: #2f381c;
} }
} }
} }
.info { .info {
@include discussion-font; @include discussion-font;
color: gray; color: gray;
font-size: $comment_info_size; font-size: $comment_info_size;
font-style: italic; font-style: italic;
margin-top: 2%; margin-top: 2%;
.comment-time { .comment-time {
display: inline; display: inline;
float: right; float: right;
margin-right: -4%; margin-right: -4%;
} }
.comment-count { .comment-count {
display: inline; display: inline;
} }
.discussion-reply { .discussion-reply {
margin-left: 4px; margin-left: 4px;
} }
.discussion-link { .discussion-link {
@include discussion-font; @include discussion-font;
color: #1d9dd9; color: #1d9dd9;
...@@ -325,13 +381,16 @@ $discussion_input_width: 100%; ...@@ -325,13 +381,16 @@ $discussion_input_width: 100%;
margin-left: 2px; margin-left: 2px;
} }
} }
.discussion-content { .discussion-content {
border-top: lightgray 1px solid; border-top: lightgray 1px solid;
overflow: hidden; overflow: hidden;
padding: 1.5% 0; padding: 1.5% 0;
.discussion-reply-new { .discussion-reply-new {
@include discussion-font; @include discussion-font;
margin-left: 5%; margin-left: 5%;
.reply-body { .reply-body {
@include discussion-font; @include discussion-font;
display: block; display: block;
...@@ -341,11 +400,13 @@ $discussion_input_width: 100%; ...@@ -341,11 +400,13 @@ $discussion_input_width: 100%;
} }
} }
} }
//COMMENT STYLES //COMMENT STYLES
.comments { .comments {
//display: none; //display: none;
margin-left: $comment_margin_left; margin-left: $comment_margin_left;
overflow: hidden; overflow: hidden;
.comment { .comment {
.comment-body, .content-body { .comment-body, .content-body {
@include discussion-font; @include discussion-font;
...@@ -354,6 +415,7 @@ $discussion_input_width: 100%; ...@@ -354,6 +415,7 @@ $discussion_input_width: 100%;
font-size: $comment_body_size; font-size: $comment_body_size;
margin-top: 3px; margin-top: 3px;
} }
&.endorsed { &.endorsed {
> .discussion-content { > .discussion-content {
background-color: lightyellow; background-color: lightyellow;
...@@ -362,16 +424,19 @@ $discussion_input_width: 100%; ...@@ -362,16 +424,19 @@ $discussion_input_width: 100%;
} }
} }
} }
//PAGES //PAGES
.discussion-paginator { .discussion-paginator {
font-size: $comment_body_size; font-size: $comment_body_size;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
div { div {
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
margin: 0 5px; margin: 0 5px;
a { a {
background: #EEE; background: #EEE;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
...@@ -383,6 +448,7 @@ $discussion_input_width: 100%; ...@@ -383,6 +448,7 @@ $discussion_input_width: 100%;
font-weight: normal; font-weight: normal;
padding: 4px 10px; padding: 4px 10px;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background: #DDD; background: #DDD;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment