Merge pull request diaspora#5786 from svbergerem/refactor-sidebar-css

Refactor and improve sidebar css
kamalpandey · Mar 16, 2015 · e4a79fb · e4a79fb
2 parents 256d786 + e7ec3d4
commit e4a79fb
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 113 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -103,7 +103,7 @@ diaspora.yml file**. The existing settings from 0.4.x and before will not work a
 * Move registration form to a partial [#5764](https://github.com/diaspora/diaspora/pull/5764)
 * Add tests for liking and unliking posts [#5741](https://github.com/diaspora/diaspora/pull/5741)
 * Rewrite slide effect in conversations as css transition for better performance [#5776](https://github.com/diaspora/diaspora/pull/5776)
-* Various cleanups and improvements in the frontend code [#5781](https://github.com/diaspora/diaspora/pull/5781) [#5769](https://github.com/diaspora/diaspora/pull/5769) [#5763](https://github.com/diaspora/diaspora/pull/5763) [#5762](https://github.com/diaspora/diaspora/pull/5762) [#5758](https://github.com/diaspora/diaspora/pull/5758) [#5755](https://github.com/diaspora/diaspora/pull/5755) [#5747](https://github.com/diaspora/diaspora/pull/5747) [#5734](https://github.com/diaspora/diaspora/pull/5734)
+* Various cleanups and improvements in the frontend code [#5781](https://github.com/diaspora/diaspora/pull/5781) [#5769](https://github.com/diaspora/diaspora/pull/5769) [#5763](https://github.com/diaspora/diaspora/pull/5763) [#5762](https://github.com/diaspora/diaspora/pull/5762) [#5758](https://github.com/diaspora/diaspora/pull/5758) [#5755](https://github.com/diaspora/diaspora/pull/5755) [#5747](https://github.com/diaspora/diaspora/pull/5747) [#5734](https://github.com/diaspora/diaspora/pull/5734) [#5786](https://github.com/diaspora/diaspora/pull/5786)
 
 ## Bug fixes
 * orca cannot see 'Add Contact' button [#5158](https://github.com/diaspora/diaspora/pull/5158)

diff --git a/app/assets/stylesheets/getting-started.scss b/app/assets/stylesheets/getting-started.scss
@@ -38,6 +38,10 @@
       }
     }
   }
+
+  .as-results .as-list {
+    box-shadow: 0px 1px 1px #666;
+  }
 }
 
 .popover h3 {

diff --git a/app/assets/stylesheets/leftnavbar.scss b/app/assets/stylesheets/leftnavbar.scss
@@ -1,24 +1,16 @@
 #leftNavBar {
-
-  .avatar {
-    width: 50px;
-    height: 50px;
+  a {
+    color: $link-grey;
+    font-weight: bold;
+    text-decoration: none;
   }
 
-  color: #222222;
-
   ul {
     margin: 0px;
     padding: 0px;
     list-style: none;
   }
 
-  a {
-    color: $link-grey;
-    font-weight: bold;
-    text-decoration: none;
-  }
-
   .selected { color: $black; }
   .selected a { color: $black; }
 
@@ -27,11 +19,6 @@
     margin-right: 6px;
     padding: 4px;
     &:hover { background-color: $background-blue; }
-
-    .label {
-      background-color: $background-grey;
-      color: $text-grey;
-    }
   }
 
   .selectable {
@@ -41,13 +28,40 @@
     text-overflow: ellipsis;
   }
 
+  #home_user_badge {
+    border-bottom: 1px dashed $border-grey;
+    margin-bottom: 10px;
+    min-height: 50px;
+    padding-bottom: 10px;
+    padding-left: 4px;
+
+    .avatar {
+      float: left;
+      height: 50px;
+      width: 50px;
+    }
+
+    h4 {
+      margin-left: 60px;
+      padding-top: 15px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      a { color: $black; }
+    }
+  }
+
+  #stream_selection {
+    & > li {
+      margin-bottom: 5px;
+    }
+  }
+
   #aspects_list, #tags_list {
     .hoverable > .action {
       visibility: hidden;
-      float: right;
       margin: 0 3px;
     }
-
     .hoverable:hover  > .action {
       visibility: visible;
     }
@@ -59,7 +73,6 @@
       visibility: hidden;
       &.selected { visibility: visible; }
     }
-
     .selected + a {
       color: #333333;
     }
@@ -70,5 +83,45 @@
       font-size: 20px;
       line-height: 15px;
     }
+
+    #new_tag_following {
+      margin-left: 20px;
+      margin-top: 5px;
+    }
+
+    /* ---- override app/stylesheets/vendor/autoSuggest.css ---- */
+    ul.as-selections { padding: 1px 5px 4px 5px; }
+    .tag_input {
+      line-height: $font-size-text;
+      vertical-align: top;
+      width: 100%;
+    }
+
+    .as-result {
+      margin-top: -1px;
+      margin-left: 1px;
+    }
+
+    .as-list {
+      em {
+        background-color: #aabbcc;
+        color: black;
+        padding: 0px;
+      }
+
+      color: black;
+      position: static; /* override absolute */
+      margin: 0px;
+      border-radius: 0px 0px 3px 3px;
+      box-shadow: 0px 1px 1px #666;
+    }
+
+    .as-result-item.active {
+      color: black;
+      text-shadow: none;
+      background-color: $background-blue;
+      border-color: $background-blue;
+    }
+    /* ---- end override app/stylesheets/vendor/autoSuggest.css ---- */
   }
 }
diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss
@@ -1,121 +1,44 @@
-#home_user_badge {
-	min-height: 50px;
-	margin-bottom: 20px;
-	margin-left: 4px;
-
-	img {
-		float: left;
-	}
-
-	h4 {
-		margin-left: 60px;
-		padding-top: 15px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-
-		a {
-			color: inherit;
-			font-weight: bold;
-		}
-	}
-}
-
-#stream_selection {
-	& > li {
-		margin-bottom: 10px;
-	}
-}
-
-#tags_list {
-	/* ---- override app/stylesheets/vendor/autoSuggest.css ---- */
-	.tag_input {
-		width: 100%;
-	}
-
-	.as-result {
-		margin-top: -1px;
-		margin-left: 1px;
-	}
-
-	.as-list {
-		em {
-			background-color: #aabbcc;
-			color: black;
-			padding: 0px;
-		}
-
-		color: black;
-		position: static; /* override absolute */
-		margin: 0px;
-		border-radius: 0px 0px 3px 3px;
-		box-shadow: 0px 1px 1px #666;
-	}
-
-	.as-result-item.active {
-		color: black;
-		text-shadow: none;
-		background-color: $background-blue;
-		border-color: $background-blue;
-	}
-	/* ---- end override app/stylesheets/vendor/autoSuggest.css ---- */
-}
-
 .rightBar {
-
   padding-top: 20px;
 
   .section {
     margin-bottom: 20px;
 
-    .title {
-      position: relative;
+    > .title {
       border-bottom: 1px solid $border-grey;
       padding-bottom: 2px;
 
       &.no_icon { padding-left: 8px; }
 
-      .right {
-        right: 4px;
-        top: 3px;
-        font-size: smaller;
-        font-weight: bold;
-        color: $text-dark-grey;
-      }
-
-      h5.title-header {
-        margin-left: 5px;
-      }
-
       h5 {
-        font-size: 12px;
-        margin: 0;
         color: $text-dark-grey;
         font-weight: bold;
+        font-size: 13px;
+        margin: 0;
+        &.title-header { margin-left: 5px; }
       }
     }
 
     .content {
-      padding: 8px;
       color: $text-grey;
       font-size: 11px;
+      line-height: 18px;
+      padding: 5px;
 
-      p, ul {
-        margin: 5px 0px;
-      }
+      p, ul { margin: 0; }
 
       ul {
+        margin-bottom: 5px;
         padding-left: 0;
-
-        li {
-          list-style: none;
-        }
+        li { list-style: none; }
       }
 
       & > #invite_code {
-        width: 100%;
+        background-color: $white;
         box-sizing: border-box;
         font-size: 11px;
         height: 30px;
+        width: 100%;
       }
     }
   }

diff --git a/app/assets/templates/aspect_tpl.jst.hbs b/app/assets/templates/aspect_tpl.jst.hbs
@@ -1,4 +1,4 @@
-<a href="/contacts?a_id={{id}}" class="action modify_aspect">
+<a href="/contacts?a_id={{id}}" class="action modify_aspect pull-right">
   <i class="entypo pencil"></i>
 </a>
 {{#if selected}}

diff --git a/app/assets/templates/tag_following_tpl.jst.hbs b/app/assets/templates/tag_following_tpl.jst.hbs
@@ -1,4 +1,4 @@
-<a href="#" id="unfollow_{{name}}" rel="nofollow" class="action delete_tag_following" title="{{t "delete"}}">&times;<a/>
+<a href="#" id="unfollow_{{name}}" rel="nofollow" class="action delete_tag_following pull-right" title="{{t "delete"}}">&times;<a/>
 <a href="/tags/{{name}}" class="selectable">
   #{{ name }}
 </a>
diff --git a/app/views/shared/_right_sections.html.haml b/app/views/shared/_right_sections.html.haml
@@ -93,6 +93,7 @@
 
 .section
   .title
-  %ul.content
-    = render "shared/links"
+  .content
+    %ul
+      = render "shared/links"
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,10 @@ @@
           }
         }
       }
+      .as-results .as-list {
+        box-shadow: 0px 1px 1px #666;
+      }
     }
     .popover h3 {
@@ Expand Down @@