moving more topic-list styles to base, aligning badges in poster expansion

app/assets/stylesheets/common/base/_topic-list.scss

@@ -1,3 +1,287 @@
+.list-controls {
+  #navigation-bar {
+    .has-icon span:before {
+      margin-right: 4px;
+      font: 15px/0.9 "FontAwesome";
+    }
+    .has-icon .starred:before {
+      content: "\f005";
+    }
+    .has-icon .unread:before {
+      content: "\f02e";
+    }
+  }
+}
+
+#topic-list {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border-top: 1px solid scale-color-diff();
+
+  > tbody > tr {
+    &:nth-child(even) {
+        background-color: darken($secondary, 3%);
+    }
+    &.archived a {
+      opacity: 0.6;
+    }
+    &.has-excerpt .star {
+      vertical-align: top;
+      margin-top: 2px;
+    }
+    &.category-description {
+      td {
+        color: $danger;
+      }
+    }
+    &.highlighted {
+      background-color: scale-color($tertiary, $lightness: 85%);
+    }
+  }
+
+  th,
+  td {
+    line-height: 1.25;
+    text-align: left;
+    vertical-align: middle;
+
+  }
+  th {
+    color: scale-color($primary, $lightness: 50%);
+    font-weight: normal;
+    font-size: 14px;
+    button i.fa {color: scale-color($primary, $lightness: 50%);}
+
+  }
+  td {
+    color: scale-color($primary, $lightness: 50%);
+    font-size: 14px;
+  }
+
+  .main-link {
+    font-size: 16px;
+
+    i.score {
+      color: $success;
+      cursor: pointer;
+    }
+  }
+
+  .topic-excerpt {
+    font-size: 13px;
+    margin-top: 8px;
+    color: scale-color($primary, $lightness: 50%);
+    word-break: break-word;
+    line-height: 1.4;
+  }
+  .topic-statuses:empty {
+    display: none;
+  }
+  .topic-status {
+    margin-right: 4px;
+    padding: 0;
+    font-size: 15px;
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  .num {
+    text-align: center;
+    a:not(.badge-posts) {
+      color: inherit;
+    }
+    a.badge-posts {
+      font-weight: bold;
+    }
+  }
+
+}
+
+
+#topic-list.categories {
+
+td.category {
+  vertical-align: top;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  border-left: 6px solid;
+}
+td.stats {
+  .unit {
+    font-size: 11px;
+  }
+}
+
+  table.categoryStats {
+    td {
+      padding: 2px;
+      vertical-align: bottom;
+      line-height: 24px;
+      &.value { text-align: right; font-size: 20px; }
+      &.unit  { text-align: left; }
+    }
+  }
+
+}
+
+.category-list-item {
+  margin-bottom: 10px;
+  #topic-list tbody tr:nth-child(even) {
+    background-color: darken($secondary, 3%);
+  }
+  th .badge-category {
+    float: left;
+    margin: 1px 4px 0 0;
+  }
+  .posters {
+    float: left;
+  }
+  > footer {
+    border: 1px solid scale-color-diff();
+    border-top: 0;
+    padding: 7px 10px;
+    background-color: scale-color-diff();
+    figure {
+      float: left;
+      margin: 3px 7px 0 0;
+      color: scale-color($primary, $lightness: 10%);
+      font-weight: bold;
+      font-size: 12px;
+    }
+    figcaption {
+      display: inline;
+      font-weight: normal;
+    }
+    .btn {
+      float: right;
+      margin-left: 7px;
+    }
+  }
+}
+
+.loading #topic-list {
+  border: 0;
+  @include box-shadow(none);
+  tr {
+    background-color: transparent;
+  }
+}
+
+
+.topics-loading {
+  width: 200px;
+  margin: 0 auto;
+  padding: 10px 0 10px 43px;
+  color: $secondary;
+  font-size: 18px;
+  line-height: 25px;
+  background: {
+    color: #000;
+    image: image-url("spinner_96_w.gif");
+    repeat: no-repeat;
+    position: 10px 50%;
+    size: 25px;
+  };
+  @include border-radius-all(12px);
+}
+
+.list-controls {
+  .home {
+    background-color: scale-color-diff();
+    color: $primary;
+  }
+  .badge-category {
+    padding: 4px 10px;
+    display: inline-block;
+    line-height: 24px;
+    float: left;
+  }
+  .category-dropdown-button {
+    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 {
+    padding: 10px;
+  }
+  .unseen {
+    background-color: transparent;
+    padding: 0;
+    border: 0;
+    color: scale-color($danger, $lightness: 20%);
+    font-size: 13px;
+    cursor: default;
+  }
+}
+
+#topic-list {
+  .alert {
+    margin-bottom: 0;
+    font-size: 14px;
+  }
+  .spinner {
+    margin-top: 40px;
+  }
+}
+
+span.posted {
+  display: inline-block;
+  text-indent: -9999em;
+  width: 15px;
+  height: 15px;
+  background: {
+    image: image-url("posted.png");
+  }
+}
+
+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: auto;
+  position: absolute;
+  border: 1px solid scale-color-diff();
+  background-color: $secondary;
+  z-index: 100;
+
+  a.badge-category {
+    font-size: 13px;
+    font-weight: bold;
+    padding: 4px 0;
+    float: none;
+    line-height: 19px;
+    text-transform: none;
+    width: 100%;
+    min-width: 102px;
+    text-align: center;
+    margin-right: 20px;
+    margin-bottom: 7px;
+  }
+}
+
 .fa-thumb-tack.unpinned {
   @include fa-icon-rotate(315deg, 1);
   color: $primary;

app/assets/stylesheets/desktop/poster_expansion.scss

@@ -99,7 +99,7 @@
     }
 
     .badge-section {
-      margin-top: 20px;
+      margin-top: 10px;
       h3 {
         line-height: 43px;
         color: $primary;
@@ -110,7 +110,9 @@
 
     .more-user-badges {
       @extend .user-badge;
-      padding: 4px 8px;
+      padding: 3px 8px;
+      line-height: 19px;
+      font-size: 13px;
     }
   }
 }

app/assets/stylesheets/desktop/topic-list.scss

@@ -38,60 +38,19 @@
 
 }
 
-#navigation-bar {
-  .has-icon span:before {
-    margin-right: 4px;
-    font: 15px/0.9 "FontAwesome";
-  }
-  .has-icon .starred:before {
-    content: "\f005";
-  }
-  .has-icon .unread:before {
-    content: "\f02e";
-  }
-}
 
 // Base list
 // --------------------------------------------------
 
 #topic-list {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
   margin: 0 0 10px;
-  border-top: 1px solid scale-color-diff();
   .fa-thumb-tack {color: $primary;}
   .fa-thumb-tack.unpinned {color: $primary;}
-
   a.title {color: $primary;}
   a.title:visited:not(.badge-notification) {color: scale-color($primary, $lightness: 35%);}
-
-  > tbody > tr {
-    &:nth-child(even) {
-        background-color: darken($secondary, 3%);
-    }
-    &.archived a {
-      opacity: 0.6;
-    }
-    &.has-excerpt .star {
-      vertical-align: top;
-      margin-top: 2px;
-    }
-    &.category-description {
-      td {
-        color: $danger;
-      }
-    }
-    &.highlighted {
-      background-color: scale-color($tertiary, $lightness: 85%);
-    }
-  }
   th,
   td {
     padding: 12px 5px;
-    line-height: 1.25;
-    text-align: left;
-    vertical-align: middle;
     &:first-of-type {
       padding-left: 10px;
     }
@@ -100,16 +59,9 @@
     }
   }
   th {
-    color: scale-color($primary, $lightness: 50%);
-    font-weight: normal;
-    font-size: 14px;
     button i.fa {color: scale-color($primary, $lightness: 50%);}
+  }
 
-  }
-  td {
-    color: scale-color($primary, $lightness: 50%);
-    font-size: 14px;
-  }
 
   button.bulk-select {
     padding: 0;
@@ -131,33 +83,8 @@
   }
   .main-link {
     width: 495px;
-    font-size: 16px;
-
-    i.score {
-      color: $success;
-      cursor: pointer;
-    }
   }
 
-  .topic-excerpt {
-    font-size: 13px;
-    margin-top: 8px;
-    color: scale-color($primary, $lightness: 50%);
-    word-break: break-word;
-    line-height: 1.4;
-  }
-
-  .topic-statuses:empty {
-    display: none;
-  }
-  .topic-status {
-    margin-right: 4px;
-    padding: 0;
-    font-size: 15px;
-    &:last-of-type {
-      margin-right: 0;
-    }
-  }
   .badge-notification {
     position: relative;
     top: -2px;
@@ -186,15 +113,7 @@
       @include box-shadow(0 0 6px 1px desaturate(scale-color($tertiary, $lightness: 30%), 35%));
     }
   }
-  .num {
+
-    text-align: center;
-    a:not(.badge-posts) {
-      color: inherit;
-    }
-    a.badge-posts {
-      font-weight: bold;
-    }
-  }
   .sortable {
     cursor: pointer;
     &:hover {
@@ -262,36 +181,14 @@
     vertical-align: top;
     padding: 8px;
   }
-  td.category {
-    vertical-align: top;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    border-left: 6px solid;
-  }
-  td.stats {
-    .unit {
-      font-size: 11px;
-    }
-  }
-  table.categoryStats {
-    td {
-      padding: 2px;
-      vertical-align: bottom;
-      line-height: 24px;
-      &.value { text-align: right; font-size: 20px; }
-      &.unit  { text-align: left; }
-    }
-  }
   .last-user-info {
     font-size: 12px;
   }
-
   .has-description {
     td.category {
       padding-top: 15px;
     }
   }
-
   .category{
     position: relative;
     width: 45%;
@@ -335,193 +232,36 @@
   }
 }
 
-
-
-
 // Category list
 // --------------------------------------------------
 
-
 .category-list-item {
-  margin-bottom: 10px;
-  #topic-list tbody tr:nth-child(even) {
-    background-color: darken($secondary, 3%);
-  }
   th .badge-category {
     float: left;
-    margin: 1px 4px 0 0;
   }
   .posters {
-    float: left;
     display: block;
     width: 165px;
   }
-  > footer {
-    border: 1px solid scale-color-diff();
-    border-top: 0;
-    padding: 7px 10px;
-    background-color: scale-color-diff();
-    figure {
-      float: left;
-      margin: 3px 7px 0 0;
-      color: scale-color($primary, $lightness: 10%);
-      font-weight: bold;
-      font-size: 12px;
-    }
-    figcaption {
-      display: inline;
-      font-weight: normal;
-    }
-    .btn {
-      float: right;
-      margin-left: 7px;
-    }
-  }
 }
 
-// Loading
-// --------------------------------------------------
-
-// List
-
-.loading #topic-list {
-  border: 0;
-  @include box-shadow(none);
-  tr {
-    background-color: transparent;
-  }
-}
-
-// Topics
-
 #topic-list-bottom {
   margin: 20px 0;
 }
 
-.topics-loading {
-  width: 200px;
-  margin: 0 auto;
-  padding: 10px 0 10px 43px;
-  color: $secondary;
-  font-size: 18px;
-  line-height: 25px;
-  background: {
-    color: #000;
-    image: image-url("spinner_96_w.gif");
-    repeat: no-repeat;
-    position: 10px 50%;
-    size: 25px;
-  };
-  @include border-radius-all(12px);
-}
-
 // Misc. stuff
 // --------------------------------------------------
 
-.list-controls {
-
-  .home {
-    background-color: scale-color-diff();
-    color: $primary;
-  }
-
-  .badge-category {
-    padding: 4px 10px;
-    display: inline-block;
-    line-height: 24px;
-    float: left;
-  }
-  .category-dropdown-button {
-    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;
-
   h2 {
     margin: 20px 0 10px;
   }
-
-
-  .empty-topic-list {
-    padding: 10px;
-  }
-  .unseen {
-    background-color: transparent;
-    padding: 0;
-    border: 0;
-    color: scale-color($danger, $lightness: 20%);
-    font-size: 13px;
-    cursor: default;
-  }
-}
-#topic-list {
-  .alert {
-    margin-bottom: 0;
-    font-size: 14px;
-  }
-  .spinner {
-    margin-top: 40px;
-  }
-}
-span.posted {
-  display: inline-block;
-  text-indent: -9999em;
-  width: 15px;
-  height: 15px;
-  background: {
-    image: image-url("posted.png");
-  };
-}
-
-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: auto;
-  position: absolute;
-  border: 1px solid scale-color-diff();
-  background-color: $secondary;
   max-height: 350px;
-  padding: 8px 7px 0 7px;
-  z-index: 100;
   margin-top: 30px;
   min-width: 138px;
-
-
-  a.badge-category {
-    font-size: 13px;
-    font-weight: bold;
-    padding: 4px 0;
-    float: none;
-    line-height: 19px;
-    text-transform: none;
-    width: 100%;
-    min-width: 102px;
-    text-align: center;
-    margin-right: 20px;
-    margin-bottom: 7px;
-  }
-
 }
 
 #bulk-select {

app/assets/stylesheets/mobile/topic-list.scss

@@ -20,19 +20,6 @@
   }
 }
 
-#navigation-bar {
-  .has-icon span:before {
-    margin-right: 4px;
-    font: 15px/0.9 "FontAwesome";
-  }
-  .has-icon .starred:before {
-    content: "\f005";
-  }
-  .has-icon .unread:before {
-    content: "\f02e";
-  }
-}
-
 .list-container .full-width {
   margin-left: 0;
 }
@@ -41,34 +28,9 @@
 // --------------------------------------------------
 
 #topic-list {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  border-top: 1px solid scale-color-diff();
-
-  > tbody > tr {
-    background-color: $secondary;
-    &:nth-child(even) {
-      background-color: darken($secondary, 4%);
-    }
-    &.archived a {
-      opacity: 0.6;
-    }
-    &.category-description {
-      td {
-        color: #000;
-      }
-    }
-    &.highlighted {
-      background-color: scale-color($tertiary, $lightness: 75%);
-    }
-  }
   th,
   td {
     padding: 7px 5px;
-    line-height: 1.25;
-    text-align: left;
-    vertical-align: middle;
     color: scale-color($primary, $lightness: 50%);
     &:first-of-type {
       padding-left: 5px;
@@ -78,9 +40,6 @@
     }
   }
   th {
-    color: scale-color($primary, $lightness: 50%);
-    font-weight: bold;
-    font-size: 13px;
     &:first-of-type {
       @include border-radius-all(4px 0 0 0);
     }
@@ -88,38 +47,10 @@
       @include border-radius-all(0 4px 0 0);
     }
   }
-  td {
-    font-size: 14px;
-  }
 
   a.title {color: $primary;}
   a.title:visited:not(.badge-notification) {color: scale-color($primary, $lightness: 35%);}
 
-  .main-link {
-    font-size: 16px;
-    i.score {
-      color: $success;
-      cursor: pointer;
-    }
-  }
-
-  .topic-excerpt {
-    font-size: 14px;
-    margin-top: 8px;
-    color: scale-color($primary, $lightness: 50%);
-    word-break: break-word;
-  }
-
-  .topic-statuses:empty {
-    display: none;
-  }
-  .topic-status {
-    margin-right: 4px;
-    padding: 0;
-    &:last-of-type {
-      margin-right: 0;
-    }
-  }
   .badge-notification {
     position: relative;
     padding: 4px 4px 4px 3px;
@@ -154,13 +85,6 @@
     font-weight: bold;
   }
 
-  .num {
-    text-align: center;
-    a:not(.badge-posts) {
-      color: inherit;
-    }
-  }
-
   .age {
     white-space: nowrap;
   }
@@ -174,11 +98,7 @@
     vertical-align: top;
     padding: 5px;
   }
-  td.category {
+
-    vertical-align: top;
-    padding-top: 15px;
-    padding-bottom: 15px;
-  }
   .badge-category {
     display: inline-block;
     margin-top: 1px;
@@ -211,156 +131,30 @@
     @include not-tablet-landscape { display: none; }
     @include tablet-landscape { min-width: 80px; }
   }
-  td.stats {
-    .unit {
-      font-size: 11px;
-    }
-  }
-  table.categoryStats {
-    td {
-      padding: 2px;
-      vertical-align: bottom;
-      line-height: 17px;
-      &.value { text-align: right; }
-      &.unit  { text-align: left; }
-    }
-  }
 }
 
 .category-list-item {
-  margin-bottom: 10px;
-  #topic-list tbody tr:nth-child(even) {
-    background-color: $secondary;
-  }
-  .badge-category {
-    margin: 1px 4px 0 0;
-  }
   .posters {
-    float: left;
     display: none;
   }
-  > footer {
-    border-bottom: 1px solid scale-color-diff();
-    border-top: 0;
-    padding: 7px 10px;
-    background-color: scale-color($primary, $lightness: 95%);
-    figure {
-      float: left;
-      margin: 3px 7px 0 0;
-      color: scale-color($primary, $lightness: 10%);
-      font-weight: bold;
-      font-size: 12px;
-    }
-    figcaption {
-      display: inline;
-      font-weight: normal;
-    }
-    .btn {
-      float: right;
-      margin-left: 7px;
-    }
-  }
 }
 
-// Loading
-// --------------------------------------------------
-
-// List
-
-.loading #topic-list {
-  border: 0;
-  @include box-shadow(none);
-  tr {
-    background-color: transparent;
-  }
-}
-
-// Topics
-
 #topic-list-bottom {
   margin: 20px 12px 0 12px;
 }
 
-.topics-loading {
-  width: 200px;
-  margin: 0 auto;
-  padding: 10px 0 10px 43px;
-  color: $secondary;
-  font-size: 18px;
-  line-height: 25px;
-  background: {
-    color: #000;
-    image: image-url("spinner_96_w.gif");
-    repeat: no-repeat;
-    position: 10px 50%;
-    size: 25px;
-  }
-  @include border-radius-all(12px);
-}
 
 // Misc. stuff
 // --------------------------------------------------
 
 .list-controls {
-  .home {
-    color: $primary;
-    background-color: scale-color-diff();
-  }
-
   .badge-category {
     margin-top: 6px;
-    padding: 4px 10px;
-    display: inline-block;
-    line-height: 24px;
-    float: left;
   }
   .category-dropdown-button {
     padding: 4px 10px 4px 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 {
-    padding: 10px;
-  }
-  .unseen {
-    background-color: transparent;
-    padding: 0;
-    border: 0;
-    color: scale-color($danger, $lightness: 20%);
-    font-size: 13px;
-    cursor: default;
   }
 }
-#topic-list {
-  .alert {
-    margin-bottom: 0;
-    font-size: 14px;
-  }
-  .spinner {
-    margin-top: 40px;
-  }
-}
-span.posted {
-  display: inline-block;
-  text-indent: -9999em;
-  width: 15px;
-  height: 15px;
-  background: {
-    image: image-url("posted.png");
-  }
-}
-
 
 .btn-group .dropdown-toggle:active,
 .btn-group.open .dropdown-toggle {
@@ -435,34 +229,19 @@ span.posted {
 }
 
 ol.category-breadcrumb {
-  display: block;
-  float: left;
-  list-style: none;
-  margin: 5px 10px 0 0;
-  padding: 0;
 
-  li {
+  margin: 5px 10px 0 0;
-    float: left;
+
-    margin-right: 5px;
-  }
 }
 
 .category-dropdown-menu {
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: absolute;
-  border: 1px solid scale-color-diff();
-  background-color: $secondary;
   height: 200px;
   padding: 8px 5px 0 7px;
-  z-index: 100;
   margin-top: 31px;
 
-  .badge-category {
+  a.badge-category {
-    font-size: 13px;
     line-height: 26px;
     padding: 0 8px;
-    float: none;
   }
 
   div {