From e1b11c62ea732605e5b44eb070821f18f7282ddc Mon Sep 17 00:00:00 2001
From: Kris Aubuchon <kaubuchon@madpow.net>
Date: Fri, 13 Sep 2013 23:03:29 -0400
Subject: [PATCH] reintroducing the post progress indicator, fixing gutter
 links, reducing white space between posts

---
 .../stylesheets/mobile/topic-post.css.scss    | 34 +++++---
 app/assets/stylesheets/mobile/topic.css.scss  | 81 ++++++++++++++++++-
 2 files changed, 103 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/mobile/topic-post.css.scss b/app/assets/stylesheets/mobile/topic-post.css.scss
index cc7f195fd04..56df9c449e5 100644
--- a/app/assets/stylesheets/mobile/topic-post.css.scss
+++ b/app/assets/stylesheets/mobile/topic-post.css.scss
@@ -1,7 +1,7 @@
 
 .topic-post { 
   border-top: 1px solid #ddd; 
-  padding: 20px 0 10px 0;
+  padding: 10px 0 10px 0;
   &:first-of-type {
     border-top: none; 
   }
@@ -230,7 +230,8 @@ a.star {
       background: #ddd;
       &:hover {
         background: #ccc;
-        color: #444;      border-bottom: 1px solid #ccc;
+        color: #444;      
+        border-bottom: 1px solid #ccc;
 
       }
       &.collapsed {
@@ -254,7 +255,6 @@ a.star {
   clear: left;
   margin-top: 10px;
   padding: 0 10px 0 10px;
-
     th.views, td.views, td.activity, th.activity, th.likes, td.likes {
     display: none;
     }
@@ -266,6 +266,7 @@ a.star {
    .title {
     font-size: 14px; line-height: 8px;
   }
+
 }
 
 
@@ -406,9 +407,17 @@ iframe {
   font-size: 36px;
 }
 
-.staff a {border-radius: 4px; padding: 4px; margin: -4px 0 0 -4px; background-color: lighten(yellow, 35%);}
+.staff a {
+  border-radius: 4px; 
+  padding: 4px; 
+  margin: -4px 0 0 -4px; 
+  background-color: lighten(yellow, 35%);}
 
-.user-title {margin-left: 8px; display: inline-block; color: #aaa;}
+.user-title {
+  margin-left: 8px; 
+  display: inline-block; 
+  color: #aaa;
+}
 
 span.btn-text {display: none;}
 
@@ -444,7 +453,6 @@ blockquote {
   a {
   margin: 0;
   }
-
     .back:before,
     .quote-other-topic:before {
     display: inline-block;
@@ -462,8 +470,12 @@ blockquote {
 
 
 .quote .title {
-border-left: 5px solid #bebebe;
-background-color: #f1f1f1;
-padding: 10px 10px 0 12px;
-  .avatar {margin-right: 7px;}
-}
\ No newline at end of file
+  border-left: 5px solid #bebebe;
+  background-color: #f1f1f1;
+  padding: 10px 10px 0 12px;
+  .avatar { margin-right: 7px; }
+}
+
+.gutter { display: none; }
+
+
diff --git a/app/assets/stylesheets/mobile/topic.css.scss b/app/assets/stylesheets/mobile/topic.css.scss
index d9cde948a73..268d42e73e0 100644
--- a/app/assets/stylesheets/mobile/topic.css.scss
+++ b/app/assets/stylesheets/mobile/topic.css.scss
@@ -21,7 +21,6 @@ h3 a {margin-left: 10px;}
 .edits {margin-right: 60px;}
 
 
-#topic-progress-wrapper {display: none;}
 
 #topic-title {margin-bottom: 20px; 
 margin: 0 60px 10px 20px;
@@ -37,4 +36,84 @@ a.edit-topic {font-size: 15px;}
 
 
 }
+.docked #topic-progress {
 
+	  box-shadow: 0 0 3px #aaa;
+}
+
+#topic-progress-wrapper {
+  position: fixed;
+  width: 0;
+  right: 0;
+  bottom: 0px;
+  z-index: 500;
+  margin-right: 140px;
+  outline: 1px solid transparent;
+
+
+}
+
+
+
+
+#topic-progress {
+
+	  box-shadow: 0 0 3px #000;
+
+  position: relative;
+  &.hidden {
+    display: none;
+  }
+  border: none;
+  background-color: #ddd;
+  color: #666;
+  width: 130px;
+  height: 34px;
+  .nums {
+    position: relative;
+    top: 9px;
+    width: 100%;
+    text-align: center;
+    z-index: 1;
+  }
+  button {
+    padding: 0 1px;
+    cursor: pointer;
+    z-index: 1000;
+    position: absolute;
+    top: 8px;
+    left: 4px;
+    border: 0;
+    background: none;
+  color: #666;
+    i {
+      font-size: 18px;
+    }
+    &:nth-of-type(2) {
+      right: 4px;
+      left: auto;
+    }
+
+
+    &:disabled {
+
+      cursor: default;
+  color: #666;
+    }
+  }
+  h4 {
+    display: inline;
+    font-size: 18px;
+    line-height: 15px;
+  }
+  .bg {
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    width: 0px;
+    border-right: 1px solid #ccc;
+    // background-color: #d4eaf4;
+    // background-color: #C5E8F7;
+    background-color: #C6F3B6;
+  }
+}