Port tags page to Bootstrap

20 files changed, 526 insertions, 595 deletions

diff --git a/app/assets/javascripts/app/views/tag_following_action_view.js b/app/assets/javascripts/app/views/tag_following_action_view.js
index fbfe2bae2..ce8dc8e30 100644
--- a/app/assets/javascripts/app/views/tag_following_action_view.js
+++ b/app/assets/javascripts/app/views/tag_following_action_view.js
@@ -3,9 +3,9 @@ app.views.TagFollowingAction = app.views.Base.extend({
   templateName: "tag_following_action",
 
   events : {
-    "mouseenter .button.red_on_hover": "mouseIn",
-    "mouseleave .button.red_on_hover": "mouseOut",
-    "click .button": "tagAction"
+    "mouseenter .btn.followed": "mouseIn",
+    "mouseleave .btn.followed": "mouseOut",
+    "click .btn": "tagAction"
   },
 
   initialize : function(options){
@@ -41,12 +41,12 @@ app.views.TagFollowingAction = app.views.Base.extend({
   },
 
   mouseIn : function(){
-    this.$("input").removeClass("in_aspects");
+    this.$("input").removeClass("green").addClass("btn-danger");
     this.$("input").val( Diaspora.I18n.t('stream.tags.stop_following', {tag: this.model.attributes.name} ) );
   },
 
   mouseOut : function() {
-    this.$("input").addClass("in_aspects");
+    this.$("input").removeClass("btn-danger").addClass("green");
     this.$("input").val( Diaspora.I18n.t('stream.tags.following', {"tag" : this.model.attributes.name} ) );
   },
 
@@ -59,4 +59,4 @@ app.views.TagFollowingAction = app.views.Base.extend({
       app.tagFollowings.create(this.model);
     }
   }
-});
\ No newline at end of file
+});
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index cbe7ee39f..376babb34 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -19,7 +19,7 @@
 @import 'aspects'
 @import 'stream-faces'
 @import 'popover'
-@import 'stream_element'
+@import 'stream_element_blueprint'
 @import 'report'
 @import 'new_styles/_forms'
 @import 'tag'
@@ -769,12 +769,10 @@ ul#press_logos
     :color $text-grey
 
 .likes
-  .icons-heart
-    :height 12px
-    :width 13px
-    :display inline-block
+  .entypo.heart
+    :font-size 16px
+    :line-height 16px
     :vertical-align top
-    :margin-top 3px
     :margin-right 5px
 
   .bd
diff --git a/app/assets/stylesheets/comments.css.scss b/app/assets/stylesheets/comments.css.scss
new file mode 100644
index 000000000..681bca066
--- /dev/null
+++ b/app/assets/stylesheets/comments.css.scss
@@ -0,0 +1,41 @@
+.comment_stream {
+  .show_comments {
+    margin-top: 5px;
+    border-top: 1px solid $border-grey;
+    a {
+      color: $text-grey;
+      font-size: 13px;
+    }
+    .media { margin-top: 10px; }
+  }
+  .comments > .comment {
+    .avatar {
+      height: 30px;
+      width: 30px;
+    }
+    margin: 0;
+    border-top: 1px dotted $border-grey;
+    &.no-border { border: none; }
+    padding: 10px 0;
+    .comment-content p:last-of-type { margin-bottom: 0; }
+
+    .info {
+      margin-top: 5px;
+      font-size: 11px;
+      line-height: 11px;
+    }
+
+    >.highlighted {
+      border-left: 3px solid $blue;
+      padding-left: 3px;
+    }
+  }
+  .submit_button {
+    input {
+      float: right;
+    }
+    padding-left: 12px;
+    width: 95%;
+  }
+  .comment_box { width: 95%; }
+}
diff --git a/app/assets/stylesheets/default.css.scss b/app/assets/stylesheets/default.css.scss
index d981555da..5dd0f979a 100644
--- a/app/assets/stylesheets/default.css.scss
+++ b/app/assets/stylesheets/default.css.scss
@@ -3,7 +3,6 @@
 *= require lightbox
 *= require autocomplete
 *= require mentions
-*= require tags
 *= require hovercard
 
 *= require vendor/interim-bootstrap
diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss
index e98b7bc6b..98b38fdc3 100644
--- a/app/assets/stylesheets/new-templates.css.scss
+++ b/app/assets/stylesheets/new-templates.css.scss
@@ -10,6 +10,7 @@
 
 @import 'new_styles/base';
 @import 'new_styles/buttons';
+@import 'new_styles/interactions';
 
 /* font overrides */
 @import 'new_styles/typography';
@@ -62,6 +63,9 @@
 /* stream */
 @import 'tag';
 @import 'stream-faces';
+@import 'stream';
+@import 'stream_element';
+@import 'comments';
 
 /* contacts */
 @import 'contacts';
diff --git a/app/assets/stylesheets/new_styles/_buttons.css.scss b/app/assets/stylesheets/new_styles/_buttons.css.scss
index 2b0817086..b8257ca8f 100644
--- a/app/assets/stylesheets/new_styles/_buttons.css.scss
+++ b/app/assets/stylesheets/new_styles/_buttons.css.scss
@@ -29,3 +29,29 @@
 }
 
 .btn.delete { color: desaturate($red,10%); }
+
+// TODO remove this when everything has been ported to Bootstrap
+.button.creation {
+    $button-border-color: #aaa;
+    @include border-radius(3px);
+    @include box-shadow(0,1px,1px,#cfcfcf);
+    @include transition(border);
+    @include button-gradient($creation-blue);
+    font: {
+      size: 12px;
+    }
+    color: #fff;
+    padding: 4px 9px;
+    min-width: 90px;
+    min-height: 10px;
+    border: 1px solid darken($button-border-color,20%);
+
+    cursor: pointer;
+    white-space: nowrap;
+
+    &:hover {
+      @include button-gradient-hover($creation-blue);
+      border: 1px solid darken($button-border-color,35%);
+      text-decoration: none;
+    }
+  }
diff --git a/app/assets/stylesheets/new_styles/_interactions.scss b/app/assets/stylesheets/new_styles/_interactions.scss
index a0e12d638..63858cb6b 100644
--- a/app/assets/stylesheets/new_styles/_interactions.scss
+++ b/app/assets/stylesheets/new_styles/_interactions.scss
@@ -1,224 +1,32 @@
-@import '../mixins';
-
-#post-info {
-  text-align: center;
-  z-index: 10;
-
-  margin-top: -33px;
-
-  #post-info-container {
-    @include info-container();
-  }
-
-  .well {
-    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
-    -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
-    box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
-
-    margin: 5px;
-    padding: 5px;
-    text-align: left;
-
-    max-height: 20px;
-    overflow: hidden;
-
-    background: {
-      color: #222;
-      color: rgba(0,0,0,0.2);
-    }
-
-    border: {
-      left: 1px solid #444;
-      right: 1px solid #444;
-      bottom: 1px solid #555;
-      top: 1px solid #111;
-    }
-
-    .img {
-      margin-right: 5px;
-    }
-
-    i {
-      margin-top: 1px;
-    }
-
-    .avatar {
-      @include border-radius();
-      margin-right: 0;
-    }
-  }
-
-  #post-comments {
-    text-align: left;
-    padding-top: 0;
-  }
-
-  #new-post-comment-container {
-    position: relative;
-
-    padding: 10px;
-
-    textarea{
-      height: 18px;
-      width: 318px;
-      padding: 4px;
-    }
-
-    form {
-      margin-bottom: 0;
-    }
-
-    .btn {
-      position: absolute;
-      right: 10px;
-      bottom: 10px;
-      font-size: 11px; 
-      line-height: 16px; 
-      padding: 5px 9px;
-    }
-  }
-}
-
-.comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 {
-  color: white;
-  text-shadow: 1px 1px black;
-  text-rendering: optimizelegibility;
-}
-
-.post-comment {
-  -moz-box-shadow: 0 1px 2px -2px #999;
-  -webkit-box-shadow: 0 1px 2px -2px #999;
-  box-shadow: 0 1px 2px -2px #999;
-
-  border-bottom: 1px solid #333;
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  &:last-child {
-    box-shadow: none;
-    border-bottom: none;
-  }
-
-  padding: 10px;
-  padding-right: 40px;
-  margin: 0px;
-
-  .avatar {
-    @include border-radius();
-
-    border: {
-      top: 1px solid #222;
-      right: 1px solid #444;
-      left: 1px solid #444;
-      bottom: 1px solid $text-dark-grey;
-    }
-  }
-
-  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
-
-  a:hover {
-    color: #99CCFF
-  }
-
-  time {
-    color: $text-dark-grey;
-    font-size: smaller;
-  }
-
+.stream_container, #single-post-interactions {
   .controls {
-    @include transition(opacity);
-    @include opacity(0);
-
+    z-index: 6;
     float: right;
-    margin-right: -40px;
-
-    a {
-      padding: 3px 5px;
-      &:hover {
-        text-decoration: none;
+    .comment_report {
+      display: inline-block;
+      .icons-report {
+        height: 14px;
+        width: 14px;
       }
     }
-  }
-
-  &:hover {
-    .controls {
-      @include opacity(0.4);
-
-      &:hover {
-        @include opacity(1);
+    .delete {
+      display: inline-block;
+      .icons-deletelabel {
+        height: 14px;
+        width: 14px;
       }
     }
-  }
-}
-
-.permalink-wrapper,
-#user-controls {
-  height: 30px;
-
-  .avatar {
-    vertical-align: top;
-    height: 27px;
-    width: 27px;
-  }
-
-  a {
-    @include opacity(0.6);
-    @include transition(opacity, 0.3s);
-
-    position: relative;
-
-    z-index: 20;
-
-    padding: 1px 4px 0;
-    margin-right: 5px;
-    line-height: 24px;
-
-    i {
-      padding: 0;
-      margin: 0;
-    }
-
-    color: #fff;
-
-    &.label {
-      @include box-shadow(0, 0, 2px, rgba(255,255,255,0.9));
-      background-color: #000;
-    }
-
-    &.comment {
-      padding-right: 5px;
-      margin-right: 0;
-    }
-
-    &:hover {
-      @include opacity(1);
+    & > a:hover {
       text-decoration: none;
     }
   }
-}
 
-/* stream specific wrapper */
-#stream-interactions {
-  position : fixed;
-  top : 0;
-  bottom : 0;
-  overflow-y : auto;
+  .stream_element, .comment, .stream_element:hover .comment {
+    .controls > a { @include opacity(0); }
 
-  #post-info {
-    text-align : left;
-    margin-top : 10px;
-  }
-
-  #user-controls {
-    padding : 7px;
+    &:hover .controls {
+      & > a { @include opacity(0.3); }
+      & > a:hover { @include opacity(1); }
+    }
   }
 }
-
-.permalink-wrapper {
-  float : right;
-  margin-top : 9px;
-  margin-right : -5px;
-  margin-left : 4px;
-}
diff --git a/app/assets/stylesheets/single-post-view.css.scss b/app/assets/stylesheets/single-post-view.css.scss
index cf6ffa3d6..2fbb51001 100644
--- a/app/assets/stylesheets/single-post-view.css.scss
+++ b/app/assets/stylesheets/single-post-view.css.scss
@@ -135,9 +135,11 @@
   padding-left: 15px;
   
   .comments .comment {
+    border-top: none;
     border-bottom: solid 1px #cccccc;
     padding-top: 10px;
     padding-bottom: 10px;
+    margin: 10px;
     p {
       margin: 0 0 1em 0;
       word-wrap: break-word;
@@ -145,6 +147,10 @@
         margin-bottom: 0;
       }
     }
+    .avatar {
+      height: 35px;
+      width: 35px;
+    }
   }
   .no_comments {
     padding-top: 10px;
@@ -155,18 +161,12 @@
     margin-bottom: 30px;
   }
 
-  textarea {
-    width: 95%;
-  }
   .new_comment_form_wrapper {
     border-bottom: none;
   }
   a {
     color: #3f8fba;
   }
-  .timeago {
-    font-size: smaller;
-  }
   .count {
     i {
       display: inline-block;
@@ -186,76 +186,3 @@
     margin-bottom: 8px;
   }
 }
-
-.comment {
-  &:hover {
-    .controls {
-      @include opacity(0.3);
-    }
-  }
-
-  >.highlighted {
-    border-left: 3px solid $blue;
-    padding-left: 3px;
-  }
-
-  .controls {
-    @include transition(opacity);
-    @include opacity(0);
-    z-index: 6;
-    float: right;
-    &:hover {
-      @include opacity(1);
-    }
-    .comment_report {
-      display: inline-block;
-      .icons-report {
-        height: 14px;
-        width: 14px;
-      }
-    }
-    .delete {
-      display: inline-block;
-      .icons-deletelabel {
-        height: 14px;
-        width: 14px;
-      }
-    }
-    a:hover {
-      text-decoration: none;
-    }
-  }
-  .submit_button {
-    input {
-      float: right;
-    }
-    padding-left: 12px;
-    width: 95%;
-  }
-
-  .button.creation {
-    $button-border-color: #aaa;
-    @include border-radius(3px);
-    @include box-shadow(0,1px,1px,#cfcfcf);
-    @include transition(border);
-    @include button-gradient($creation-blue);
-    font: {
-      size: 12px;
-    }
-    color: #fff;
-    padding: 4px 9px;
-    min-width: 90px;
-    min-height: 10px;
-    border: 1px solid darken($button-border-color,20%);
-
-    cursor: pointer;
-    white-space: nowrap;
-
-    &:hover {
-      @include button-gradient-hover($creation-blue);
-      border: 1px solid darken($button-border-color,35%);
-      text-decoration: none;
-    }
-  }
-}
-
diff --git a/app/assets/stylesheets/stream.css.scss b/app/assets/stylesheets/stream.css.scss
new file mode 100644
index 000000000..ca012bfe3
--- /dev/null
+++ b/app/assets/stylesheets/stream.css.scss
@@ -0,0 +1,6 @@
+.stream_container {
+  #publisher {
+    margin-bottom: 30px;
+  }
+  .well#ignore-info { text-align: center; }
+}
diff --git a/app/assets/stylesheets/stream_element.css.scss b/app/assets/stylesheets/stream_element.css.scss
index 249bab9db..f40c606bf 100644
--- a/app/assets/stylesheets/stream_element.css.scss
+++ b/app/assets/stylesheets/stream_element.css.scss
@@ -1,251 +1,91 @@
-.stream {
-  audio {
-    display: block;
-    margin: 5px 0;
-  }
-
-  .stream_element {
-    border-bottom: 1px solid $border-grey;
-
-    h1, h2, h3, h4, h5, h6 {
-      word-wrap: break-word;
-      word-break: break-word;
-    }
-
-    p {
-      &:last-child {
-        padding-bottom: 0;
-        margin-bottom: 0;
-      }
-    }
-
-    &:first-child {
-      border-top: none;
-    }
-
-    ul {
-      li {
-        list-style: disc;
+#main_stream .stream_element {
+  padding: 10px;
+  border-bottom: 1px solid $border-grey;
+
+  & > .media {
+    margin: 0;
+    & > .img > .avatar.small {
+      height: 50px;
+      width: 50px;
+    }
+    .author {
+      font-weight: bold;
+      margin-bottom: 4px;
+      unicode-bidi: bidi-override;
+    }
+    .feedback {
+      margin-top: 5px;
+      font-size: 11px;
+      line-height: 11px;
+    }
+    .likes {
+      margin-top: 10px;
+      font-size: 12px;
+      line-height: 16px;
+      .bd { display: inline-block; }
+      .entypo.heart {
+        display: inline-block;
+        font-size: 16px;
+        vertical-align: top;
+        margin-top: -2px;
+        margin-right: 5px;
       }
     }
-
     .youtube-player, .vimeo-player {
       border: none;
       height: 304px;
       width: 410px;
     }
-  }
-}
-
-.stream_element {
-  &.highlighted { border-left: 3px solid $blue; }
-
-  a.author {
-    font-weight: bold;
-    unicode-bidi: bidi-override;
-  }
-
-  .photo_attachments {
-    margin-top: 7px;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  .bd {
-    > img {
-      height: 30px;
-      width: 30px;
-      float: left;
-      margin-right: 10px;
-    }
-  }
-
-  .info {
-    font-size: 11px;
-  }
-
-  .stream_photo {
-    float: left;
-    margin-top: 6px;
-  }
-
-  .controls:first-child {
-    .control_icon {
-      @include transition(opacity);
-      @include opacity(0);
-    }
-  }
-
-  &:hover {
-    .controls:first-child {
-      .control_icon {
-        @include opacity(0.3);
-      }
-      .control_icon:hover {
-        @include opacity(1);
-      }
-    }
-  }
-}
-
-.status_message_show {
-  .comment_box {
-    width: 653px;
-    margin-bottom: 5px;
-  }
-}
-
-.post_scope {
-  cursor: default;
-}
-
-.stream_element .reshare,
-.comment {
-  .avatar {
-    width: 30px;
-    height: 30px;
-  }
-}
-
-.likes,
-.stream_element div.reshare {
-  font-size: 12px;
-}
-
-.comment, .stream_element {
-  >.highlighted {
-    border-left: 3px solid $blue;
-    padding-left: 3px;
-  }
-}
-
-.comment.no-border {
-  &.media {
-    border: none;
-    padding: 0;
-  }
-}
-
-.comment {
-  &.media {
-    margin-left: 0;
-    margin-right: 0;
-
-    border-top: 1px dotted #aaa;
-
-    padding-top: 10px;
-
-    .controls {
-      .comment_delete, .comment_report {
-        @include transition(opacity);
-        @include opacity(0);
-      }
-    }
-    &:hover {
-      .controls {
-        .comment_delete, .comment_report {
-          @include opacity(0.3);
+    .photo_attachments {
+      margin-top: 7px;
+      padding-bottom: 10px;
+      text-align: center;
+      img {
+        &.big_stream_photo {
+          display: block;
+          max-width: 90%;
         }
-        .comment_delete:hover, .comment_report:hover {
-          @include opacity(1);
+        &.thumb_small {
+          display: inline;
+          max-width: 50px;
+          max-height: 50px;
         }
+        margin-left: auto;
+        margin-right: auto;
+        padding-bottom: 5px;
       }
     }
-  }
-
-  .youtube-player, .vimeo-player {
-    border: none;
-    height: 250px;
-    width: 400px;
-  }
-
-  .ltr {
-    ol, ul {
-      padding-left: 2em;
-      li {
-        padding: 0px;
-        border: none;
-        list-style: inherit;
-      }
+    .stream_photo {
+      float: left;
+      margin-top: 6px;
     }
-  }
-
-  .right {
-    right: 4px;
-  }
-}
-
-.stream_element {
-  .new_comment_form_wrapper {
-    width: 415px;
-  }
-}
-
-.stream_element .bd {
-  & > .likes, & > .comments {
-    margin-right: 15px;
-  }
-}
-
-.status-message-location {
-  .near-from {
-    font-size: smaller;
-    color: #aaa;
-    width: 100%;
-    float: left;
-  }
-  .address {
-    font-size: 11px;
-    color: #bbb;
-  }
-}
-
-.stream_element .post-content .reshare {
-  border-left: 2px solid $border-grey;
-}
-
-.stream_element.loaded .media .bd .feedback {
-  clear: both;
-}
-
-form.new_comment {
-  input {
-    display: none;
-  }
-
-  textarea {
-    height: 21px;
-    font-size: 12px;
-    width: 364px;
-  }
-
-  &.open {
-    input {
-      display: block;
+    .status-message-location .near-from {
+      font-size: 11px;
+      color: $text-grey;
+    }
+    .grey { color: $text-grey; }
+    .post-content p:last-of-type { margin-bottom: 0; }
+    .nsfw-shield {
+      color: $text-grey;
+      padding: 5px 10px;
+      background-color: $background-grey;
+      border: 1px solid $border-grey;
+      border-radius: 3px;
     }
-  }
-}
-
-.stream_element {
-  .subject {
-    font-size: 13px;
-    font-weight: bold;
-    color: #444;
-    overflow: hidden;
-    white-space: nowrap;
   }
 
-  .last_author {
-    font-size: 12px;
-    color: $text-dark-grey;
+  .reshare > .media {
+    border-left: 2px solid $border-grey;
+    .avatar {
+      height: 30px;
+      width: 30px;
+    }
   }
 
   .collapsible {
     overflow: hidden;
     position: relative;
-    
+
     p {
       margin: 0 0 0.8em;
     }
@@ -285,4 +125,14 @@ form.new_comment {
       }
     }
   }
+
+  &.highlighted {
+    padding-left: 8px;
+    border-left: 3px solid $creation-blue;
+  }
+
+  &.post_preview {
+    background-color: lighten($creation-blue,45%);
+    border: 1px solid $creation-blue;
+  }
 }
diff --git a/app/assets/stylesheets/stream_element_blueprint.css.scss b/app/assets/stylesheets/stream_element_blueprint.css.scss
new file mode 100644
index 000000000..0867dc5c4
--- /dev/null
+++ b/app/assets/stylesheets/stream_element_blueprint.css.scss
@@ -0,0 +1,288 @@
+.stream {
+  audio {
+    display: block;
+    margin: 5px 0;
+  }
+
+  .stream_element {
+    border-bottom: 1px solid $border-grey;
+
+    h1, h2, h3, h4, h5, h6 {
+      word-wrap: break-word;
+      word-break: break-word;
+    }
+
+    p {
+      &:last-child {
+        padding-bottom: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    &:first-child {
+      border-top: none;
+    }
+
+    ul {
+      li {
+        list-style: disc;
+      }
+    }
+
+    .youtube-player, .vimeo-player {
+      border: none;
+      height: 304px;
+      width: 410px;
+    }
+  }
+}
+
+.stream_element {
+  &.highlighted { border-left: 3px solid $blue; }
+
+  a.author {
+    font-weight: bold;
+    unicode-bidi: bidi-override;
+  }
+
+  .photo_attachments {
+    margin-top: 7px;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  .bd {
+    > img {
+      height: 30px;
+      width: 30px;
+      float: left;
+      margin-right: 10px;
+    }
+  }
+
+  .info {
+    font-size: 11px;
+  }
+
+  .stream_photo {
+    float: left;
+    margin-top: 6px;
+  }
+
+  .controls:first-child {
+    .control_icon {
+      @include transition(opacity);
+      @include opacity(0);
+    }
+  }
+
+  &:hover {
+    .controls:first-child {
+      .control_icon {
+        @include opacity(0.3);
+      }
+      .control_icon:hover {
+        @include opacity(1);
+      }
+    }
+  }
+}
+
+.status_message_show {
+  .comment_box {
+    width: 653px;
+    margin-bottom: 5px;
+  }
+}
+
+.post_scope {
+  cursor: default;
+}
+
+.stream_element .reshare,
+.comment {
+  .avatar {
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.likes,
+.stream_element div.reshare {
+  font-size: 12px;
+}
+
+.comment, .stream_element {
+  >.highlighted {
+    border-left: 3px solid $blue;
+    padding-left: 3px;
+  }
+}
+
+.comment.no-border {
+  &.media {
+    border: none;
+    padding: 0;
+  }
+}
+
+.comment {
+  &.media {
+    margin-left: 0;
+    margin-right: 0;
+
+    border-top: 1px dotted #aaa;
+
+    padding-top: 10px;
+
+    .controls {
+      .comment_delete, .comment_report {
+        @include transition(opacity);
+        @include opacity(0);
+      }
+    }
+    &:hover {
+      .controls {
+        .comment_delete, .comment_report {
+          @include opacity(0.3);
+        }
+        .comment_delete:hover, .comment_report:hover {
+          @include opacity(1);
+        }
+      }
+    }
+  }
+
+  .youtube-player, .vimeo-player {
+    border: none;
+    height: 250px;
+    width: 400px;
+  }
+
+  .ltr {
+    ol, ul {
+      padding-left: 2em;
+      li {
+        padding: 0px;
+        border: none;
+        list-style: inherit;
+      }
+    }
+  }
+
+  .right {
+    right: 4px;
+  }
+}
+
+.stream_element {
+  .new_comment_form_wrapper {
+    width: 415px;
+  }
+}
+
+.stream_element .bd {
+  & > .likes, & > .comments {
+    margin-right: 15px;
+  }
+}
+
+.status-message-location {
+  .near-from {
+    font-size: smaller;
+    color: #aaa;
+    width: 100%;
+    float: left;
+  }
+  .address {
+    font-size: 11px;
+    color: #bbb;
+  }
+}
+
+.stream_element .post-content .reshare {
+  border-left: 2px solid $border-grey;
+}
+
+.stream_element.loaded .media .bd .feedback {
+  clear: both;
+}
+
+form.new_comment {
+  input {
+    display: none;
+  }
+
+  textarea {
+    height: 21px;
+    font-size: 12px;
+    width: 364px;
+  }
+
+  &.open {
+    input {
+      display: block;
+    }
+  }
+}
+
+.stream_element {
+  .subject {
+    font-size: 13px;
+    font-weight: bold;
+    color: #444;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .last_author {
+    font-size: 12px;
+    color: $text-dark-grey;
+  }
+
+  .collapsible {
+    overflow: hidden;
+    position: relative;
+
+    p {
+      margin: 0 0 0.8em;
+    }
+    p:last-of-type {
+      margin: 0;
+    }
+
+    .expander {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 30px;
+      text-align: center;
+      line-height: 48px;
+      font-size: .8em;
+      color: $grey;
+      text-shadow: 0 0 7px #FFF;
+      cursor: pointer;
+      border-bottom: 2px solid $border-grey;
+      @include border-radius(0, 0, 3px, 3px);
+      @include linear-gradient(rgba(255,255,255,0) , #EEE, 0%, 95%);
+      background-color: transparent;
+    }
+
+    .oembed {
+      background: image-url('ajax-loader2.gif') no-repeat center center;
+      float: left;
+      width: 100%;
+
+      .thumb {
+        @include video-overlay();
+      }
+
+      iframe, .thumb img {
+        width: 100%;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/tag.css.scss b/app/assets/stylesheets/tag.css.scss
index 3c5b54cc5..1ee8427bb 100644
--- a/app/assets/stylesheets/tag.css.scss
+++ b/app/assets/stylesheets/tag.css.scss
@@ -20,3 +20,7 @@ h1.tag {
     &:hover { border-bottom: 1px solid $border-dark-grey; }
   }
 }
+
+#tags_show {
+  .span3 { border-right: 1px solid $border-grey; }
+}
diff --git a/app/assets/stylesheets/tags.css.scss b/app/assets/stylesheets/tags.css.scss
deleted file mode 100644
index 189531472..000000000
--- a/app/assets/stylesheets/tags.css.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-//   Copyright (c) 2010-2011, Diaspora Inc.  This file is
-//   licensed under the Affero General Public License version 3 or later.  See
-//   the COPYRIGHT file.
-
-.tags_show {
-  .side_stream {
-    .stream_element {
-      .add_contact {
-        display: inline;
-        float: right;
-        font-size: 10px;
-        .button {
-          padding: 5px 1px 4px 1px;
-          margin-right: 3px;
-          font-size: 10px;
-        }
-      }
-    }
-  }
-}
diff --git a/app/assets/templates/likes-info_tpl.jst.hbs b/app/assets/templates/likes-info_tpl.jst.hbs
index 0af32bb90..c9cfceee1 100644
--- a/app/assets/templates/likes-info_tpl.jst.hbs
+++ b/app/assets/templates/likes-info_tpl.jst.hbs
@@ -1,7 +1,7 @@
 {{#if likesCount}}
   <div class="comment">
     <div class="media">
-      <div alt="Heart" class="icons-heart"></div>
+      <i class="entypo heart"></i>
 
       <div class="bd">
         {{#unless likes_fetched}}
diff --git a/app/assets/templates/tag_following_action_tpl.jst.hbs b/app/assets/templates/tag_following_action_tpl.jst.hbs
index 606f6778f..134996113 100644
--- a/app/assets/templates/tag_following_action_tpl.jst.hbs
+++ b/app/assets/templates/tag_following_action_tpl.jst.hbs
@@ -1,10 +1,12 @@
-<div class="right">
+<div class="pull-right">
   <form accept-charset="UTF-8" action="/tag_followings" method="post">
-      <input type="submit" class="button take_action 
-      {{#if tag_is_followed }} 
-        red_on_hover in_aspects
+      <input type="submit" class="btn 
+      {{#if tag_is_followed }}
+        green followed
+      {{else}}
+        btn-default
       {{/if}}
       " type="submit" value="{{followString}}"
         />
   </form>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/controllers/tags_controller.rb b/app/controllers/tags_controller.rb
index 9cea03112..0ac704c32 100644
--- a/app/controllers/tags_controller.rb
+++ b/app/controllers/tags_controller.rb
@@ -6,6 +6,9 @@ class TagsController < ApplicationController
   skip_before_action :set_grammatical_gender
   before_action :ensure_page, :only => :show
 
+  layout ->(c) { request.format == :mobile ? "application" : "with_header_with_footer" }, :only => [:show]
+  use_bootstrap_for :show
+
   helper_method :tag_followed?
 
   respond_to :html, :only => [:show]
diff --git a/app/views/people/_index.html.haml b/app/views/people/_index.html.haml
index 0c90823e6..82c069364 100644
--- a/app/views/people/_index.html.haml
+++ b/app/views/people/_index.html.haml
@@ -1,11 +1,13 @@
-.people_stream
+#people_stream
   - people.each do |person|
-    .stream_element{:id => person.id}
-      .media
-        .img
-          = person_image_tag(person)
-        .bg
-          %span.from
-            = person_link(person, :class => "hovercardable")
+    .media.stream_element{:id => person.id}
+      .media-object.pull-left
+        = person_image_link(person, :size => :thumb_small)
+      .media-body
+        = person_link(person, :class => 'name')
+        .info.diaspora_handle
+          = person.diaspora_handle
+        .info.tags
+          = Diaspora::Taggable.format_tags(person.profile.tag_string)
 
-  = will_paginate people, :inner_window => 3
+  = will_paginate people, :renderer => WillPaginate::ActionView::BootstrapLinkRenderer
diff --git a/app/views/people/tag_index.js.erb b/app/views/people/tag_index.js.erb
index a683b2227..c30450e3e 100644
--- a/app/views/people/tag_index.js.erb
+++ b/app/views/people/tag_index.js.erb
@@ -1 +1 @@
-$(".people_stream").html("<%= escape_javascript(render("index", :people => @people)) %>");
+$("#people_stream").html("<%= escape_javascript(render("index", :people => @people)) %>");
diff --git a/app/views/publisher/_publisher_bootstrap.html.haml b/app/views/publisher/_publisher_bootstrap.html.haml
index 3c2478cb9..627f7258e 100644
--- a/app/views/publisher/_publisher_bootstrap.html.haml
+++ b/app/views/publisher/_publisher_bootstrap.html.haml
@@ -57,7 +57,7 @@
         = image_tag 'ajax-loader.gif'
       .row-fluid.options_and_submit
         .public_toggle
-          %button.btn.btn-default.pull-left#hide_publisher{:title => t('shared.publisher.discard_post')}
+          .btn.btn-default.pull-left#hide_publisher{:title => t('shared.publisher.discard_post')}
             %span.text
               =t('cancel')
 
diff --git a/app/views/tags/show.haml b/app/views/tags/show.haml
index 4f0cc3469..d403efba8 100644
--- a/app/views/tags/show.haml
+++ b/app/views/tags/show.haml
@@ -8,37 +8,30 @@
   - else
     = t('.whatup', :pod => @pod_url)
 
+.container-fluid#tags_show
+  .row-fluid
+    .span3.offset1
+      %h3
+        = t('people', :count => @stream.tagged_people_count)
 
-- content_for :body_class do
-  = "tags_show"
+      .side_stream.stream
+        = render :partial => 'people/index', :locals => {:people => @stream.tagged_people}
 
-#leftNavBar
-  %h3
-    = t('people', :count => @stream.tagged_people_count)
+    .span7
+      .stream_container
+        #author_info
+          %h2
+            = @stream.display_tag_name
 
-  .side_stream.stream
-    = render :partial => 'people/index', :locals => {:people => @stream.tagged_people}
+        - if current_user
+          = render 'publisher/publisher', :selected_aspects => @stream.aspect_ids, :aspect_ids => @stream.aspect_ids, :aspect => @stream.aspect
 
-  %br
+        %hr
 
-  - if user_signed_in?
-    = render "tags/followed_tags_listings"
+        #main_stream.stream
 
-.span-15.last
-  .stream_container
-    #author_info
-      %h2
-        = @stream.display_tag_name
+        #paginate
+          %span.loader.hidden
 
-    - if current_user
-      = render 'publisher/publisher', :selected_aspects => @stream.aspect_ids, :aspect_ids => @stream.aspect_ids, :aspect => @stream.aspect
-
-    %hr
-
-    #main_stream.stream
-
-    #paginate
-      %span.loader.hidden
-
-  %a{:id=>"back-to-top", :title=>"#{t('layouts.application.back_to_top')}", :href=>"#"}
-    &#8679;
+      %a{:id=>"back-to-top", :title=>"#{t('layouts.application.back_to_top')}", :href=>"#"}
+        &#8679;