From a3a2c5fa2416c40a2f175ed13e48bb142bd0d16b Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Fri, 25 Oct 2013 15:44:28 -0400
Subject: [PATCH] FIX: Mobile breadcrumb formatting

---
 .../stylesheets/desktop/topic-list.scss       | 14 ++++
 app/assets/stylesheets/desktop/topic.scss     | 11 ---
 app/assets/stylesheets/mobile/topic-list.scss | 67 ++++++++++++++-----
 3 files changed, 65 insertions(+), 27 deletions(-)

diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 052d6cc8ba1..7c61af26220 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -411,6 +411,19 @@ span.posted {
   };
 }
 
+ol.category-breadcrumb {
+  display: block;
+  float: left;
+  list-style: none;
+  margin: 0 10px 0 0;
+  padding: 0;
+
+  li {
+    float: left;
+    margin-right: 5px;
+  }
+}
+
 .category-dropdown-menu {
   overflow-x: hidden;
   overflow-y: scroll;
@@ -434,3 +447,4 @@ span.posted {
     margin-bottom: 10px;
   }
 }
+
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index f6d84c3ba52..72579c75f85 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -198,15 +198,4 @@ i {background: #e4f2f8;
   z-index: 495
 }
 
-ol.category-breadcrumb {
-  display: block;
-  float: left;
-  list-style: none;
-  margin: 0 10px 0 0;
-  padding: 0;
 
-  li {
-    float: left;
-    margin-right: 5px;
-  }
-}
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 56553a04031..591499c24bc 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -240,17 +240,32 @@
 // --------------------------------------------------
 
 .list-controls {
-  .badge-category {
-    display: inline-block;
-    margin: 8px 0 0 8px;
-    float: left;
-  }
-  .category-dropdown {
-    margin: 8px 0;
+  .home {
+    font-size: 20px;
+    font-weight: normal;
   }
 
+  .badge-category {
+    margin-top: 6px;
+    padding: 4px 10px;
+    display: inline-block;
+    line-height: 24px;
+    float: left;
+  }
+  .category-dropdown-button {
+    padding: 4px 10px 3px 8px;
+    border-left: 1px solid rgba(0, 0, 0, 0.15);
+    font-size: 16px;
+    width: 10px;
+    text-align: center;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
   clear: both;
 }
+
 #list-area {
   margin-bottom: 300px;
   .empty-topic-list {
@@ -365,20 +380,40 @@ clear: both;
   opacity: 1;
 }
 
-
 ol.category-breadcrumb {
   display: block;
-  margin-top: 5px;
   float: left;
   list-style: none;
-  .icon-home {
-    font-size: 20px;
-  }
-  button {
-    padding: 5px 10px;
-    font-size: 16px;
-  }
+  margin: 0 10px 0 0;
+  padding: 0;
+
   li {
     float: left;
+    margin-right: 5px;
   }
 }
+
+.category-dropdown-menu {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  position: absolute;
+  border: 1px solid #ccc;
+  background-color: white;
+  width: 200px;
+  height: 200px;
+  padding: 8px 5px 0 7px;
+  z-index: 100;
+  margin-top: 31px;
+
+  .badge-category {
+    font-size: 13px;
+    line-height: 26px;
+    padding: 0px 8px;
+    float: none;
+  }
+
+  div {
+    margin-bottom: 10px;
+  }
+}
+