From c2865e3e2cb56eedb24480daa97b7c435232ac62 Mon Sep 17 00:00:00 2001
From: Kris Aubuchon <kaubuchon@madpow.net>
Date: Tue, 22 Oct 2013 15:37:44 -0400
Subject: [PATCH 1/4] fixing alignment on replies, buttons - also making topic
 new gutter link visible on touch

---
 .../stylesheets/desktop/topic-list.scss       |   2 +-
 .../stylesheets/desktop/topic-post.scss       | 103 ++++++++++++------
 app/assets/stylesheets/desktop/topic.scss     |  24 +++-
 3 files changed, 91 insertions(+), 38 deletions(-)

diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 902f0c9f883..291499d5e63 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -43,7 +43,7 @@
   @include border-radius-all(4px 4px 0 0);
   @include box-shadow(0 1px 3px rgba($black, 0.22));
 
-  a:visited {color: #888;}
+  a:visited:not(.badge-notification) {color: #888;}
 
   tbody tr {
     background-color: $white;
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index f1a74708877..b981cd06a4b 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -8,7 +8,7 @@ html {background-color: #fff;}
   margin-right: auto;
   margin-left: auto;
 }
-
+h1 .topic-statuses .topic-status i {margin-right: 5px;}
 
 .full-width {
   margin-left: 0px;
@@ -47,7 +47,7 @@ html {background-color: #fff;}
     }
 
 
-section.post-menu-area {
+section.post-menu-area, .post-actions {
     .discourse-no-touch & {
       opacity: 0.2;
        transition: linear 0.15s;
@@ -55,7 +55,7 @@ section.post-menu-area {
     }
   }
 
-  &:hover section.post-menu-area {
+  &:hover section.post-menu-area, &:hover .post-actions {
     opacity: 1;
 
   }
@@ -75,9 +75,7 @@ section.post-menu-area {
 
 
 nav.post-controls {
-    background-color: #fff;
     padding: 0;
-    margin-top: 20px;
     button {color: #aaa;
     margin-right: 2px;
 
@@ -96,7 +94,7 @@ nav.post-controls {
 
 
   button.show-replies {
-    padding: 8px 20px;
+    padding: 8px;
     margin-left: 0px;
   }
 
@@ -105,8 +103,8 @@ nav.post-controls {
     margin-right: 0;
     color: darken(#e4f2f8, 35%);
     background: #e4f2f8;
-    padding: 7px 20px;
-    border: 1px solid #e4f2f8;
+    padding: 8px 20px;
+    border: 1px solid darken(#e4f2f8, 35%);
     margin-left: 10px;
 
     &:hover {  color: darken(#e4f2f8, 45%);
@@ -127,8 +125,8 @@ nav.post-controls {
     padding: 8px 10px;
     vertical-align: top;
     background: transparent;
-    border: none;
-    margin-left: 1px;
+    border: 1px solid #ddd;
+    margin-left: 3px;
     transition: all linear 0.15s;
     outline: none; //removes the pesky square button highlight from some browsers
          &:hover {
@@ -189,22 +187,54 @@ nav.post-controls {
 
   .quote .title {background: #ddd;}
   blockquote {background: #ddd;}
+&.bottom { margin-top: -11px;
+  .reply {
+    border-left: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+
+  &:first-of-type {
+    border-top: 1px solid #ddd;
+  }
+  &:last-of-type {
+    border-bottom: 1px solid #ddd;
+  }
+
+  }
+}
+
+&.top {
+  .reply {
+    border-left: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+
+  &:first-of-type {
+    border-top: 1px solid #ddd;
+  }
+  &:last-of-type {
+  }
+
+  }
+}
+
+
 
-  .reply {padding-bottom: 10px;}
 
   .topic-body {
-    padding-top: 7px;
-    padding-bottom: 10px;
   }
 
   .topic-meta-data h5 {margin: 5px;}
 
   .topic-meta-data-inside {
-  margin: -3px 15px 0 0;
+  margin: -3px 0 0 0;
   color: #aaa;
   }
 
   .topic-meta-data {padding-top: 20px;}
+
+
+
+
+
 }
 
 
@@ -212,8 +242,6 @@ nav.post-controls {
 
 
 .post-action {
-  margin-top: 3px;
-  margin-bottom: 3px;
   .relative-date {
     margin-left: 5px;
   }
@@ -236,11 +264,9 @@ a.star {
   display: none;
 }
 
-.topic-link {margin-left: -8px;}
 
 
 .topic-summary {
-
   button {border-radius: 0;}
 
   .btn {
@@ -252,7 +278,7 @@ a.star {
 
 
 
-  margin: 15px 0 20px 0;
+  margin: 20px 0 0 0;
   border: 1px solid #ddd;
 
   h3 {
@@ -456,7 +482,9 @@ iframe {
 }
 
 
-.extra-info-wrapper {float: left; width: 78%;}
+.extra-info-wrapper {float: left; width: 78%;
+.topic-statuses {margin-right: 5px;}
+}
 
 #main .inner a.star {margin-top: 6px;}
 
@@ -467,11 +495,9 @@ iframe {
   a:not(.badge-category) {margin-left: -10px;}
 
   }
-
-
-
+ 
   a.star {
-    margin-right: 8px;
+    margin-right: 5px;
     margin-top: 6px;
   }
 
@@ -692,10 +718,12 @@ blockquote {
       ul {margin: 0;}
       padding-left: 10px;
 
+  i {font-size: 12px;}
+
   .post-links {
-    margin-top: 6px;
+    margin-top: 3px;
     list-style-type: none;
-    padding-left: 20px;
+    padding-left: 19px;
     position: relative;
     margin-left: 5px;
     a i {
@@ -703,6 +731,7 @@ blockquote {
       left: 0;
       margin-right: 15px;
       margin-bottom: 20px;
+
     }
     a {color: #aaa;}
 
@@ -718,12 +747,13 @@ blockquote {
   float: left;
   position: relative;
   width: 720px;
-  padding: 10px 10px 10px 20px;
+  padding: 10px 10px 15px 20px;
 
 }
 
 .posts-wrapper {
   position: relative;
+  border-bottom: 1px solid #ddd;
 }
 
 
@@ -749,21 +779,29 @@ blockquote {
 .row:after {clear: both;}
 .embedded-posts {
   h1, h2, h3 {margin: 10px 0;}
+  &.bottom { 
+    &.hidden {display: block; opacity: 0; }
 
-  &.bottom .arrow {float: right; margin: 0 15px 0 0;}
+  }
+  &.bottom .arrow {float: right; margin: 0 0 0 0;}
   &.top {margin-left: 112px;}
   .topic-body img {max-width: 100%; height: auto;}
   .topic-body, .topic-meta-data {border: none;}
   .row {border-top: 1px solid #ddd; padding-top: 7px;}
   .reply:first-of-type .row {border-top: none;}
 }
+
+
+
+
+
 .contents.regular  {
 
 button.show-replies {
 
   background: #eee;
-  border-bottom: 10px solid #eee;
-
+  padding-bottom: 20px;
+  border-bottom: none;
   }
 
 
@@ -771,10 +809,11 @@ button.show-replies {
 
   background: #fff;
   margin-bottom: 0;
-  border-bottom: none;
+  padding-bottom: 10px;
+  border: 1px solid #ddd;
 
   &:hover {background: #eee;
-    .badge-posts {color: #888;}
+  .badge-posts {color: #888;}
 
   }
 
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index d80aa066c8a..8a84c5e21ef 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -2,12 +2,27 @@
 .post-info a {color: #aaa;}
 
 .topic-meta-data-inside {
+  float: right; 
+  margin-top: -22px;
   float: right;
   margin-top: -19px;
   font-size: 12px;
 }
 
 
+.post-actions { 
+  color: #bbb;
+  text-align: right;
+  a {color: #bbb;}
+  .post-action {
+display: inline-block;
+margin-left: 10px;
+  margin-top: 10px;
+
+  }
+}
+.post-menu-area {margin-bottom: 10px;}
+
 .post-info  {
   display: inline-block;
 }
@@ -17,7 +32,7 @@
 #topic-title {
   margin-bottom: 20px;
 margin: -20px 0 0 0;
-
+.topic-statuses {margin-left: 5px;}
 h1 {
 
   font-size: 2em;
@@ -56,7 +71,7 @@ a.edit-topic {font-size: 15px;}
 
 .reply-new {
 i {
-
+  font-size: 12px;
   margin-right: 5px;
   background: #fff;
   border: 1px solid #ddd;
@@ -73,7 +88,7 @@ a.reply-new {color: #aaa;}
 a:hover.reply-new {color: #56aed3;
 
 i {background: #e4f2f8;
-  border: 1px solid #e4f2f8;
+  border: 1px solid #56aed3;
   padding: 2px 4px;
 }
 
@@ -154,7 +169,6 @@ i {background: #e4f2f8;
 .topic-statuses .topic-status {
   padding: 0;
   i {
-    margin-left: 5px !important;
     font-size:20px;
 
   }
@@ -181,4 +195,4 @@ i {background: #e4f2f8;
   width: 100%;
   font-size: 15px;
   z-index: 495
-}
\ No newline at end of file
+}

From 649b3d44a6236c65b67eea8da6e44ff6b641150b Mon Sep 17 00:00:00 2001
From: Kris Aubuchon <kaubuchon@madpow.net>
Date: Tue, 22 Oct 2013 16:36:32 -0400
Subject: [PATCH 2/4] topic page: alignment fixes for replies, minor alignment
 changes

---
 .../stylesheets/desktop/topic-post.scss       | 55 +++++++------------
 1 file changed, 20 insertions(+), 35 deletions(-)

diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index b981cd06a4b..91a082b132f 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -94,7 +94,7 @@ nav.post-controls {
 
 
   button.show-replies {
-    padding: 8px;
+    padding: 8px 15px;
     margin-left: 0px;
   }
 
@@ -104,12 +104,10 @@ nav.post-controls {
     color: darken(#e4f2f8, 35%);
     background: #e4f2f8;
     padding: 8px 20px;
-    border: 1px solid darken(#e4f2f8, 35%);
     margin-left: 10px;
 
     &:hover {  color: darken(#e4f2f8, 45%);
       background: darken(#e4f2f8, 10%);
-        border: 1px solid darken(#e4f2f8, 10%);
     }
 
   }
@@ -125,7 +123,7 @@ nav.post-controls {
     padding: 8px 10px;
     vertical-align: top;
     background: transparent;
-    border: 1px solid #ddd;
+    border: none;
     margin-left: 3px;
     transition: all linear 0.15s;
     outline: none; //removes the pesky square button highlight from some browsers
@@ -189,32 +187,14 @@ nav.post-controls {
   blockquote {background: #ddd;}
 &.bottom { margin-top: -11px;
   .reply {
-    border-left: 1px solid #ddd;
-    border-right: 1px solid #ddd;
 
-  &:first-of-type {
-    border-top: 1px solid #ddd;
-  }
-  &:last-of-type {
-    border-bottom: 1px solid #ddd;
-  }
+
+
 
   }
 }
 
-&.top {
-  .reply {
-    border-left: 1px solid #ddd;
-    border-right: 1px solid #ddd;
 
-  &:first-of-type {
-    border-top: 1px solid #ddd;
-  }
-  &:last-of-type {
-  }
-
-  }
-}
 
 
 
@@ -721,7 +701,7 @@ blockquote {
   i {font-size: 12px;}
 
   .post-links {
-    margin-top: 3px;
+    margin-top: 5px;
     list-style-type: none;
     padding-left: 19px;
     position: relative;
@@ -801,22 +781,27 @@ button.show-replies {
 
   background: #eee;
   padding-bottom: 20px;
-  border-bottom: none;
-  }
 
 
-  &.bottom-round button.show-replies {
-
-  background: #fff;
-  margin-bottom: 0;
-  padding-bottom: 10px;
-  border: 1px solid #ddd;
-
-  &:hover {background: #eee;
+     &: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;}
+
+  }
   }
 
 

From 0ef064fd937cb5185647f97f925577780604cb1b Mon Sep 17 00:00:00 2001
From: Kris Aubuchon <kaubuchon@madpow.net>
Date: Tue, 22 Oct 2013 18:31:40 -0400
Subject: [PATCH 3/4] removed white line in quotes, cleaned up some markup

---
 .../stylesheets/common/foundation/base.scss   |  2 +-
 .../stylesheets/desktop/topic-post.scss       | 54 +++----------------
 2 files changed, 8 insertions(+), 48 deletions(-)

diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index 39da9f97995..530cc3cfb3a 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -8,7 +8,7 @@
 html {
   color: $black;
   font: #{$base-font-size}/#{$base-line-height} $base-font-family;
-  background-color: $base-background-color;
+  background-color: #fff;
   overflow-y: scroll;
   -webkit-font-smoothing: subpixel-antialiased;
 }
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 91a082b132f..3470f728dde 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -1,6 +1,5 @@
 @import "common/foundation/variables";
 
-html {background-color: #fff;}
 
 .container {
   @extend .clearfix;
@@ -66,13 +65,7 @@ section.post-menu-area, .post-actions {
         opacity:1;
       }
     }
-
-
-  }
-
-
-
-
+}
 
 nav.post-controls {
     padding: 0;
@@ -185,22 +178,7 @@ nav.post-controls {
 
   .quote .title {background: #ddd;}
   blockquote {background: #ddd;}
-&.bottom { margin-top: -11px;
-  .reply {
-
-
-
-
-  }
-}
-
-
-
-
-
-
-  .topic-body {
-  }
+  &.bottom { margin-top: -11px;}
 
   .topic-meta-data h5 {margin: 5px;}
 
@@ -211,25 +189,15 @@ nav.post-controls {
 
   .topic-meta-data {padding-top: 20px;}
 
-
-
-
-
 }
 
-
-
-
-
 .post-action {
   .relative-date {
     margin-left: 5px;
   }
-  .avatar {margin-right: 2px;}
+  .avatar { margin-right: 2px; }
 }
 
-
-
 a.star {
   display: inline-block;
   float: left;
@@ -244,13 +212,9 @@ a.star {
   display: none;
 }
 
-
-
 .topic-summary {
   button {border-radius: 0;}
 
-  .btn {
-  }
 
   .topic-links li {
     word-wrap: break-word;
@@ -396,7 +360,6 @@ a.star {
 
 #suggested-topics {
   clear: left;
-
   table {
     box-shadow: none;
     border-radius: 0;
@@ -492,6 +455,7 @@ iframe {
   width: 92px;
   border-top: 1px solid #ddd;
   padding-top: 25px;
+
   img { text-align: center; }
 .contents {
 
@@ -542,16 +506,13 @@ h1, h2, h3 {margin: 10px 0;}
 .deleted {
   .topic-body {
   background-color: lighten(red, 45%);
+  }
 }
-}
-
 
 .moderator {
-
   .topic-body {
   background-color: lighten(yellow, 45%);
-}
-
+  }
 }
 
 #share-link {
@@ -639,7 +600,6 @@ h3 {
 
 
 blockquote {
-  clear:both;
   margin: 0;
   padding: 12px;
 }
@@ -729,11 +689,11 @@ blockquote {
   width: 720px;
   padding: 10px 10px 15px 20px;
 
+
 }
 
 .posts-wrapper {
   position: relative;
-  border-bottom: 1px solid #ddd;
 }
 
 

From ca82d07f6d7b7dde02cbb95b0192c252af707c47 Mon Sep 17 00:00:00 2001
From: Kris Aubuchon <kaubuchon@madpow.net>
Date: Wed, 23 Oct 2013 00:22:24 -0400
Subject: [PATCH 4/4] simplfying the header, some more alignment adjustments on
 the topic page

---
 .../stylesheets/common/foundation/base.scss   |  2 +-
 app/assets/stylesheets/desktop/header.scss    |  8 +----
 .../stylesheets/desktop/topic-post.scss       | 34 ++++++++++++++-----
 app/assets/stylesheets/desktop/topic.scss     |  7 ++--
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index 530cc3cfb3a..bcc9871fd02 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -42,7 +42,7 @@ hr {
   height: 1px;
   margin: 1em 0;
   border: 0;
-  border-top: 1px solid $hr-border-color;
+  border-top: 1px solid #eee;
   padding: 0;
 }
 
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index eb89d41c83a..d6e4303639f 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -11,9 +11,8 @@
   top: 0;
   left: 0;
   z-index: 1000;
-  border-bottom: 1px solid #9baab2;
+  box-shadow: 0 1px 5px rgba(70, 70, 70, .4);
   background-color: $white;
-  @include box-shadow((0 1px 3px rgba($black, 0.12), inset 0 -4px 4px -4px rgba($black, 0.3)));
   .docked & {
     position: fixed;
   }
@@ -60,14 +59,11 @@
     > li {
       float: left;
       &:first-child .icon {
-        @include border-radius-all(4px 0 0 4px);
       }
       &:first-child.active .icon {
-        @include border-radius-all(4px 0 0 0);
       }
       &:last-child .icon {
         border-right: 1px solid #ccc;
-        @include border-radius-all(0 4px 4px 0);
       }
     }
     .icon {
@@ -79,7 +75,6 @@
       color: $nav-button-color;
       text-decoration: none;
       cursor: pointer;
-      @include box-shadow(inset 0 -4px 4px -4px rgba($black, 0.14));
       &:hover {
         color: $nav-button-color-hover;
         background-color: $nav-button-background-color-hover;
@@ -159,7 +154,6 @@
   margin-top: -1px;
   border: 1px solid #ccc;
   background-color: $white;
-  @include border-radius-all(4px);
   @include box-shadow(0 3px 3px rgba($black, 0.2));
 
   // Common
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 3470f728dde..14d954e4dd1 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -7,6 +7,9 @@
   margin-right: auto;
   margin-left: auto;
 }
+
+
+
 h1 .topic-statuses .topic-status i {margin-right: 5px;}
 
 .full-width {
@@ -17,10 +20,17 @@ h1 .topic-statuses .topic-status i {margin-right: 5px;}
 
 .topic-post {
   padding: 0;
+
   &:first-of-type {
     border-top: none;
   }
 
+  &:last-of-type {
+    border-bottom: 1px solid #ddd;
+
+  }
+
+
 .reply-to-tab {
   display: block;
   position: absolute;
@@ -215,7 +225,6 @@ a.star {
 .topic-summary {
   button {border-radius: 0;}
 
-
   .topic-links li {
     word-wrap: break-word;
   }
@@ -360,13 +369,21 @@ a.star {
 
 #suggested-topics {
   clear: left;
+
+
+.topics table tbody tr {background: #fff;}
+
   table {
     box-shadow: none;
     border-radius: 0;
     border-color: #ddd;
     margin-top: 10px;
+
+
+
   }
-  padding: 20px 10px 15px 10px;
+padding: 20px 10px 15px 10px;
+
    .title {
     font-size: 14px; line-height: 8px;
 
@@ -392,7 +409,7 @@ span.post-count {
 
 #topic-title {
   z-index: 1000;
-  padding: 20px 10px 15px 10px;
+  padding: 25px 10px 15px 10px;
 .chzn-container {vertical-align: middle;}
 }
 
@@ -454,7 +471,7 @@ iframe {
   margin-bottom: 10px;
   width: 92px;
   border-top: 1px solid #ddd;
-  padding-top: 25px;
+  padding-top: 30px;
 
   img { text-align: center; }
 .contents {
@@ -489,6 +506,8 @@ h3 {display: block;}
 
 .contents .cooked {
 
+  padding-right: 30px;
+
 h1, h2, h3 {margin: 10px 0;}
 
 }
@@ -610,7 +629,7 @@ blockquote {
 }
 
 .quote .title {margin-right: 0;}
-
+.quote {margin-top: 20px;}
 .quote-controls {
   float: right;
   color: #aaa;
@@ -661,7 +680,7 @@ blockquote {
   i {font-size: 12px;}
 
   .post-links {
-    margin-top: 5px;
+    margin-top: 3px;
     list-style-type: none;
     padding-left: 19px;
     position: relative;
@@ -687,8 +706,7 @@ blockquote {
   float: left;
   position: relative;
   width: 720px;
-  padding: 10px 10px 15px 20px;
-
+  padding: 10px 0 15px 20px;
 
 }
 
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 8a84c5e21ef..487604e3b2f 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -5,7 +5,6 @@
   float: right; 
   margin-top: -22px;
   float: right;
-  margin-top: -19px;
   font-size: 12px;
 }
 
@@ -21,7 +20,7 @@ margin-left: 10px;
 
   }
 }
-.post-menu-area {margin-bottom: 10px;}
+.post-menu-area {margin-bottom: 10px; margin-top: 20px;}
 
 .post-info  {
   display: inline-block;
@@ -35,8 +34,8 @@ margin: -20px 0 0 0;
 .topic-statuses {margin-left: 5px;}
 h1 {
 
-  font-size: 2em;
-  line-height: 1.0;
+  font-size: 2.2em;
+  line-height: 1em;
   margin: 0;