From dd4a01896b4f5f7bbaf66b5cc6e619b44a474f7d Mon Sep 17 00:00:00 2001
From: Kris Aubuchon <shout@k-ris.com>
Date: Mon, 3 Mar 2014 01:16:30 -0500
Subject: [PATCH] changed some topic page widths so the gutter fills the
availible space, also right-aligning user-dropdown
---
.../stylesheets/common/admin/admin_base.scss | 9 ++-
app/assets/stylesheets/desktop/discourse.scss | 11 +--
app/assets/stylesheets/desktop/header.scss | 6 +-
.../stylesheets/desktop/topic-post.scss | 67 ++++++++++++++-----
app/assets/stylesheets/desktop/topic.scss | 9 ++-
5 files changed, 70 insertions(+), 32 deletions(-)
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index e4909eed8dc..d8ead6c2d04 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -10,7 +10,6 @@
td, th {padding: 8px;}
th {border-top: 1px solid $primary_border_color;}
td {border-bottom: 1px solid $primary_border_color; border-top: 1px solid $primary_border_color;}
- td:last-of-type {border-bottom: none;}
tr:hover { background-color: darken($primary_background_color, 2.5%); }
tr.selected { background-color: lighten($tertiary_background_color, 58%); }
.filters input { margin-bottom: 0px; }
@@ -112,7 +111,7 @@
}
button {
margin-right: 5px;
-
+
}
input[type=text] {
display: inline-block;
@@ -887,7 +886,7 @@ table.api-keys {
background-color: lighten($secondary_background_color, 60%);
padding: 3px 10px;
border-radius: 3px;
-
+
color: $primary_text_color;
&:hover {
color: $primary_text_color;
@@ -920,7 +919,7 @@ table.api-keys {
}
.staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses {
-
+
border-bottom: dotted 1px $primary_border_color;
.heading-container {
@@ -939,7 +938,7 @@ table.api-keys {
overflow-x: hidden;
}
.col.first {
-
+
}
.ember-list-item-view {
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index dc6b77da0a0..1925931f2db 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -35,9 +35,7 @@ body {
.full-width {
width: $medium-width;
}
- .extra-info-wrapper {
- max-width: 720px !important;
-}
+
}
@@ -52,9 +50,7 @@ body {
.full-width {
width: $small-width;
}
- .extra-info-wrapper {
- max-width: 680px !important;
-}
+
}
a.no-href {
@@ -441,7 +437,7 @@ body {
&:focus {
}
}
-
+
.radio, .checkbox {
min-height: 18px;
padding-left: 18px;
@@ -793,4 +789,3 @@ body {
.offset1 {
margin-left: 64px;
}
-
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index 945b6ee7219..b372196e4cb 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -237,7 +237,11 @@
}
&#user-dropdown {
- width: 155px;
+ width: 116px;
+ .user-dropdown-links {
+ text-align: right;
+
+ }
}
.btn {
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 819e1b7250c..55df6a7dc8c 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -58,6 +58,12 @@ h1 .topic-statuses .topic-status i {margin-right: 5px;}
font-size: 12px;
margin-left: -8px;
background: $primary_background_color;
+ @include medium-width {
+ left: 107px;
+ }
+ @include small-width {
+ left: 103px;
+ }
}
.avoid-tab {
@@ -69,8 +75,8 @@ h1 .topic-statuses .topic-status i {margin-right: 5px;}
.reply-new {
.discourse-no-touch & {
opacity:0;
- transition: linear 0.4s;
- -webkit-transition: linear 0.4s;
+ transition: opacity linear 0.4s;
+ -webkit-transition: opacity linear 0.4s;
}
.discourse-touch & {opacity: 1;}
}
@@ -79,8 +85,8 @@ h1 .topic-statuses .topic-status i {margin-right: 5px;}
section.post-menu-area, .post-actions {
.discourse-no-touch & {
opacity: 0.2;
- transition: linear 0.4s;
- -webkit-transition: linear 0.4s;
+ transition: opacity linear 0.4s;
+ -webkit-transition: opacity linear 0.4s;
}
.discourse-touch & {opacity: 1;}
}
@@ -206,9 +212,9 @@ nav.post-controls {
.quote .title {background: lighten($secondary_background_color, 60%);}
blockquote {background: lighten($secondary_background_color, 60%);}
.onebox {
- background: lighten($secondary_background_color, 60%);
+ background: lighten($secondary_background_color, 60%);
border-left: 5px solid lighten($secondary_background_color, 35%);
- .quote-controls, .quote-controls a {color: $link-color;}
+ .quote-controls, .quote-controls a {color: $link-color;}
}
&.bottom { margin-top: -11px;}
.topic-meta-data h5 {margin: 5px;}
@@ -438,6 +444,23 @@ iframe {
.topic-statuses {margin-right: 5px;}
}
+
+@include medium-width {
+ .extra-info-wrapper {
+ max-width: 720px;
+}
+}
+
+/**/
+
+
+@include small-width {
+ .extra-info-wrapper {
+ max-width: 680px;
+}
+}
+
+
.extra-info {
h1 {
margin: 5px 0 0 0;
@@ -708,8 +731,7 @@ blockquote { /* solo quotes */
.gutter {
float: left;
- max-width: 250px;
- width: 15%;
+
margin-top: 6px;
ul {margin: 0;}
padding-left: 10px;
@@ -738,8 +760,7 @@ blockquote { /* solo quotes */
border-top: 1px solid lighten($primary_border_color, 10%);
float: left;
position: relative;
- width: 720px;
- padding: 10px 10px 15px 20px;
+ padding: 10px 0 15px 0;
.highlighted {
background-color: $highlight_background_color !important;
}
@@ -762,10 +783,10 @@ blockquote { /* solo quotes */
//columns
-.span14 { width: 70%; max-width: 720px; } //main content
-.span2 {max-width: 92px;}
-.span11 {width: 80%; max-width: 580px;}
-.span5 {max-width: 250px;}
+.span14 { width: 70%; padding-left: 1%; } //main content
+.span2 {width: 9%; }
+.span11 {width: 83%; padding-left: 2%; padding-right: 1%;}
+.span5 {width: 19%; padding-left: 1%; }
@media screen and (max-width: 966px) {
@@ -780,11 +801,27 @@ blockquote { /* solo quotes */
h1, h2, h3 {margin: 10px 0;}
a.mention {background: lighten($secondary_background_color, 60%);}
&.bottom {
+ .topic-meta-data {padding-left: 13px;}
&.hidden {display: block; opacity: 0; }
}
&.bottom .arrow {float: right; margin: 0 0 0 0;}
- &.top {margin-left: 112px;}
+ &.top {
+
+ margin-left: 112px;
+ max-width: 775px;
+ .topic-meta-data {padding-left: 13px;}
+
+ @include medium-width {
+ margin-left: 99px;
+ }
+
+ @include small-width {
+ margin-left: 95px;
+ max-width: 720px;
+ }
+ }
+ &.top.span14 {padding-left: 0;}
.topic-body, .topic-meta-data {border: none;}
.row {border-top: 1px solid $primary_border_color; padding-top: 7px;}
.reply:first-of-type .row {border-top: none;}
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 387ac73b7a5..ede8e474723 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -1,7 +1,10 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
-.post-info a {color: lighten($primary_text_color, 50%);}
+.post-info a {
+ color: lighten($primary_text_color, 50%);
+ padding-right: 5px;
+}
.topic-meta-data-inside {
float: right;
@@ -100,7 +103,7 @@
a.reply-new {
position: absolute;
- color: lighten($primary_text_color, 35%);
+ color: lighten($primary_text_color, 35%);
margin-top: -2px;}
a:hover.reply-new {
color: $link-color;
@@ -112,7 +115,7 @@ a:hover.reply-new {
#topic-progress {
position: relative;
- left: 302px;
+ left: 345px;
&.hidden {
display: none;
}