From bd73214219b78bbb723d753a0290a6a93cdbd5eb Mon Sep 17 00:00:00 2001
From: Steffen van Bergerem <svbergerem@online.de>
Date: Sat, 19 Sep 2015 13:53:50 +0200
Subject: [PATCH] Use Bootstrap media objects for posts

---
 app/assets/stylesheets/_application.scss      |  1 -
 app/assets/stylesheets/comments.scss          |  5 +-
 app/assets/stylesheets/media-box.scss         | 17 ----
 app/assets/stylesheets/single-post-view.scss  |  3 -
 app/assets/stylesheets/stream_element.scss    | 57 ++++++------
 .../templates/comment-stream_tpl.jst.hbs      | 14 +--
 app/assets/templates/comment_tpl.jst.hbs      |  6 +-
 app/assets/templates/likes-info_tpl.jst.hbs   | 30 +++----
 app/assets/templates/photo_tpl.jst.hbs        | 48 +++++-----
 app/assets/templates/reshare_tpl.jst.hbs      | 10 ++-
 .../single-post-content_tpl.jst.hbs           | 90 ++++++++++---------
 .../templates/stream-element_tpl.jst.hbs      | 14 +--
 12 files changed, 135 insertions(+), 160 deletions(-)
 delete mode 100644 app/assets/stylesheets/media-box.scss

diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss
index 38302959e..de61d106f 100644
--- a/app/assets/stylesheets/_application.scss
+++ b/app/assets/stylesheets/_application.scss
@@ -6,7 +6,6 @@
 
 
 /* core */
-@import 'media-box';
 @import 'entypo';
 @import 'icons';
 @import 'mentions';
diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss
index 67a654a93..5de2c2f43 100644
--- a/app/assets/stylesheets/comments.scss
+++ b/app/assets/stylesheets/comments.scss
@@ -1,12 +1,11 @@
 .comment_stream {
   .show_comments {
-    margin-top: 5px;
     border-top: 1px solid $border-grey;
+    padding: 10px;
     a {
       color: $text-grey;
       font-size: 13px;
     }
-    .media { margin-top: 10px; }
   }
   .comments > .comment, .comment.new_comment_form_wrapper {
     .avatar {
@@ -34,11 +33,9 @@
       float: right;
     }
     padding-left: 12px;
-    width: 95%;
     display: none;
   }
   .comment_box {
-    width: 95%;
     height: 35px;
     resize: none;
   }
diff --git a/app/assets/stylesheets/media-box.scss b/app/assets/stylesheets/media-box.scss
deleted file mode 100644
index 2c11626d9..000000000
--- a/app/assets/stylesheets/media-box.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.media { margin: 10px; }
-
-.media,
-.bd {
-  overflow: hidden;
-  _overflow: visible;
-  zoom: 1;
-}
-
-.media .img {
-  float: left;
-  margin-right: 10px;
-}
-
-.media .img img { display: block }
-.media .imgEt { float: right; margin-left: 10px; }
-
diff --git a/app/assets/stylesheets/single-post-view.scss b/app/assets/stylesheets/single-post-view.scss
index 0166d1802..79e41ec73 100644
--- a/app/assets/stylesheets/single-post-view.scss
+++ b/app/assets/stylesheets/single-post-view.scss
@@ -19,9 +19,6 @@
           line-height: $font-size-base;
         }
       }
-      .bd {
-        padding-left: 10px;
-      }
     }
     .near-from {
       color: $text-grey;
diff --git a/app/assets/stylesheets/stream_element.scss b/app/assets/stylesheets/stream_element.scss
index 2449a3c47..eb2eb9a7b 100644
--- a/app/assets/stylesheets/stream_element.scss
+++ b/app/assets/stylesheets/stream_element.scss
@@ -1,8 +1,5 @@
 #main_stream .stream_element,
 #main_stream > div > .photo {
-  & > .media {
-    margin: 0px;
-  }
   &.deleting {
     > .media { opacity: 0.3; }
     .control-icons { display: none !important; }
@@ -11,48 +8,43 @@
 
 #main_stream > div > .photo {
   & > .media {
-    overflow: visible;
-    > .bd {
-      position: relative;
-      overflow: inherit;
-      > .control-icons {
-        border-radius: 4px;
-        padding-left: 5px;
-        position: absolute;
-        right: 6px;
-        text-align: center;
-        top: 1px;
-      }
+    background: $white;
+    box-shadow: $card-shadow;
+    margin: 0 0 15px;
+    padding: 10px;
+    > .control-icons {
+      border-radius: 4px;
+      padding-left: 5px;
+      position: absolute;
+      right: 20px;
+      text-align: center;
+      top: 1px;
     }
-    &:hover > .bd > .control-icons { background: $white; }
+    &:hover > .control-icons { background: $white; }
   }
   .thumbnail {
-    padding: 10px;
-    margin: 0 0 15px;
-    background: $white;
+    border: none;
     border-radius: 0;
-    box-shadow: $card-shadow;
+    margin: 0;
+    padding: 0;
     img.big_photo { max-height: 200px; }
   }
 }
 
 #main_stream .stream_element {
-  padding: 10px;
-  margin-bottom: 20px;
   background-color: $white;
   border: 1px solid $light-grey;
   box-shadow: $card-shadow;
+  margin-bottom: 20px;
+  padding: 10px;
 
   & > .media {
     &.shield-active .nsfw-hidden { display: none; }
     &:not(.shield-active) .nsfw-shield { display: none; }
     &:not(.shield-off) .nsfw-off { display: none; }
-    & > .img > .avatar {
-      margin-top: 5px;
-      &.small {
-        height: 50px;
-        width: 50px;
-      }
+    > .media-object .avatar.small {
+      height: 50px;
+      width: 50px;
     }
     .author-name {
       font-weight: bold;
@@ -66,10 +58,10 @@
       line-height: $font-size-small;
     }
     .likes {
-      margin-top: 10px;
+      margin: 10px;
       font-size: 12px;
       line-height: 16px;
-      .author-name, .bd { display: inline-block; }
+      .author-name { display: inline-block; }
       .author-name { margin-right: 3px; }
       .entypo-heart {
         display: inline-block;
@@ -78,6 +70,7 @@
         margin-top: -2px;
         margin-right: 5px;
       }
+      .media-left { padding-right: 0; }
     }
     .stream_photo {
       float: left;
@@ -103,10 +96,10 @@
 
   div.reshare {
     border-left: 2px solid $border-grey;
-    margin-top: 3px;
+    padding-left: 10px;
 
     & > .media .avatar {
-      margin-top: 5px;
+      margin-top: 3px;
       height: 30px;
       width: 30px;
     }
diff --git a/app/assets/templates/comment-stream_tpl.jst.hbs b/app/assets/templates/comment-stream_tpl.jst.hbs
index ac8f118e4..2a05ae017 100644
--- a/app/assets/templates/comment-stream_tpl.jst.hbs
+++ b/app/assets/templates/comment-stream_tpl.jst.hbs
@@ -12,13 +12,15 @@
 
 {{#if loggedIn}}
   <div class="comment media new_comment_form_wrapper {{#unless commentsCount}} hidden {{/unless}}">
-    {{#with current_user}}
-      <a href="/people/{{guid}}" class="img">
-        {{{personImage this}}}
-      </a>
-    {{/with}}
+    <div class="media-object media-left">
+      {{#with current_user}}
+        <a href="/people/{{guid}}">
+          {{{personImage this}}}
+        </a>
+      {{/with}}
+    </div>
 
-    <div class="bd">
+    <div class="media-body">
       <form accept-charset="UTF-8" action="/posts/{{id}}/comments" class="new_comment" id="new_comment_on_{{id}}" method="post">
         <textarea class="comment_box form-control" id="comment_text_on_{{id}}" name="text" rows="1" required placeholder="{{t "stream.comment"}}" />
         <div class="submit_button">
diff --git a/app/assets/templates/comment_tpl.jst.hbs b/app/assets/templates/comment_tpl.jst.hbs
index 5dc240b49..5bd44d6d7 100644
--- a/app/assets/templates/comment_tpl.jst.hbs
+++ b/app/assets/templates/comment_tpl.jst.hbs
@@ -1,11 +1,11 @@
-<div id="{{guid}}">
-  <div class="img">
+<div id="{{guid}}" class="media">
+  <div class="media-object media-left">
     {{#linkToAuthor author}}
       {{{personImage this "small" "small"}}}
     {{/linkToAuthor}}
   </div>
 
-  <div class="bd">
+  <div class="media-body">
     <div class="control-icons">
     {{#if loggedIn}}
       {{#if canRemove}}
diff --git a/app/assets/templates/likes-info_tpl.jst.hbs b/app/assets/templates/likes-info_tpl.jst.hbs
index e58e484ee..cd07ef9c1 100644
--- a/app/assets/templates/likes-info_tpl.jst.hbs
+++ b/app/assets/templates/likes-info_tpl.jst.hbs
@@ -1,23 +1,23 @@
 {{#if likesCount}}
-  <div class="comment">
-    <div class="media">
+  <div class="media">
+    <div class="media-object media-left">
       <i class="entypo-heart"></i>
+    </div>
 
-      <div class="bd">
-        {{#unless likes_fetched}}
-          <a href="#" class="expand_likes grey">
-            {{t "stream.likes" count=likesCount}}
-          </a>
+    <div class="media-body">
+      {{#unless likes_fetched}}
+        <a href="#" class="expand_likes grey">
+          {{t "stream.likes" count=likesCount}}
+        </a>
 
-        {{else}}
+      {{else}}
 
-          {{#each likes}}
-            {{#linkToAuthor author}}
-              {{{personImage this 'small' 'micro'}}}
-            {{/linkToAuthor}}
-          {{/each}}
-        {{/unless}}
-      </div>
+        {{#each likes}}
+          {{#linkToAuthor author}}
+            {{{personImage this 'small' 'micro'}}}
+          {{/linkToAuthor}}
+        {{/each}}
+      {{/unless}}
     </div>
   </div>
 {{/if}}
diff --git a/app/assets/templates/photo_tpl.jst.hbs b/app/assets/templates/photo_tpl.jst.hbs
index a36e05879..6788b90a7 100644
--- a/app/assets/templates/photo_tpl.jst.hbs
+++ b/app/assets/templates/photo_tpl.jst.hbs
@@ -1,29 +1,27 @@
 <div class="media">
-  <div class="bd">
-    {{#if loggedIn}}
-      <div class="control-icons">
-        {{#if authorIsCurrentUser}}
-          <a href="#" rel="nofollow" class="delete remove_post" title="{{t "delete"}}">
-            <i class="entypo-trash"></i>
-          </a>
-        {{else}}
-          <a href="#" rel="nofollow" data-type="post" class="post_report" title="{{t "report.name"}}">
-            <i class="entypo-warning"></i>
-          </a>
-          <a href="#" rel="nofollow" class="block_user" title="{{t "ignore"}}">
-            <i class="entypo-block"></i>
-          </a>
-          <a href="#" rel="nofollow" class="delete hide_post" title="{{t "stream.hide"}}">
-            <i class="entypo-cross"></i>
-          </a>
-        {{/if}}
-      </div>
-    {{/if}}
-
-    <div class="thumbnail img-thumbnail">
-      <a href="{{sizes.large}}" class="photo-link gallery-picture">
-        <img src="{{sizes.large}}" class="photo big_photo">
-      </a>
+  {{#if loggedIn}}
+    <div class="control-icons">
+      {{#if authorIsCurrentUser}}
+        <a href="#" rel="nofollow" class="delete remove_post" title="{{t "delete"}}">
+          <i class="entypo-trash"></i>
+        </a>
+      {{else}}
+        <a href="#" rel="nofollow" data-type="post" class="post_report" title="{{t "report.name"}}">
+          <i class="entypo-warning"></i>
+        </a>
+        <a href="#" rel="nofollow" class="block_user" title="{{t "ignore"}}">
+          <i class="entypo-block"></i>
+        </a>
+        <a href="#" rel="nofollow" class="delete hide_post" title="{{t "stream.hide"}}">
+          <i class="entypo-cross"></i>
+        </a>
+      {{/if}}
     </div>
+  {{/if}}
+
+  <div class="thumbnail img-thumbnail">
+    <a href="{{sizes.large}}" class="photo-link gallery-picture">
+      <img src="{{sizes.large}}" class="photo big_photo">
+    </a>
   </div>
 </div>
diff --git a/app/assets/templates/reshare_tpl.jst.hbs b/app/assets/templates/reshare_tpl.jst.hbs
index b1334fa0a..cdb988060 100644
--- a/app/assets/templates/reshare_tpl.jst.hbs
+++ b/app/assets/templates/reshare_tpl.jst.hbs
@@ -2,11 +2,13 @@
   <div class="media">
     {{#if root}}
       {{#with root}}
-        <a href="/people/{{author.guid}}" class="img {{{hovercardable this}}}">
-          {{{personImage author 'small'}}}
-        </a>
+        <div class="media-object media-left">
+          <a href="/people/{{author.guid}}" class="{{{hovercardable this}}}">
+            {{{personImage author 'small'}}}
+          </a>
+        </div>
 
-        <div class="bd">
+        <div class="media-body">
           <div>
             {{#linkToAuthor author}}
               {{name}}
diff --git a/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs b/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs
index 9295117eb..72caef79e 100644
--- a/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs
+++ b/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs
@@ -2,65 +2,67 @@
   <div class="col-md-12">
     <div class="row">
       <div id="post-info" class="col-md-8">
-        <div class="img pull-left">
-          {{#if root}}
-            {{#linkToAuthor root.author}}
-              {{{personImage this "medium"}}}
-            {{/linkToAuthor}}
-          {{else}}
-            {{#linkToAuthor author}}
-              {{{personImage this "medium"}}}
-            {{/linkToAuthor}}
-          {{/if}}
-        </div>
-
-        <div class="bd">
-          <span class="author">
+        <div class="media">
+          <div class="media-object media-left">
             {{#if root}}
               {{#linkToAuthor root.author}}
-                {{name}}
+                {{{personImage this "medium"}}}
               {{/linkToAuthor}}
             {{else}}
               {{#linkToAuthor author}}
-                {{name}}
+                {{{personImage this "medium"}}}
               {{/linkToAuthor}}
             {{/if}}
-          </span>
+          </div>
 
-          <div class="info">
-            {{#if public}}
-              <span class="post_scope" title="{{t "stream.public"}}">
-                <i class="entypo-globe small"></i>
-              </span>
-            {{else}}
-              <span class="post_scope" title="{{t "stream.limited"}}">
-                <i class="entypo-lock small"></i>
-              </span>
-            {{/if}}
-            <span class="post-time">
+          <div class="media-body">
+            <span class="author">
               {{#if root}}
-                <a href="/posts/{{root.id}}">
-                  <time datetime="{{root.created_at}}" title="{{localTime root.created_at}}" />
-                </a>
+                {{#linkToAuthor root.author}}
+                  {{name}}
+                {{/linkToAuthor}}
               {{else}}
-                <a href="/posts/{{id}}">
-                  <time datetime="{{created_at}}" title="{{localTime created_at}}" />
-                </a>
+                {{#linkToAuthor author}}
+                  {{name}}
+                {{/linkToAuthor}}
               {{/if}}
             </span>
-            {{#if root}}
-              {{#if root.provider_display_name}}
-                {{t "stream.via" provider=root.provider_display_name}}
+
+            <div class="info">
+              {{#if public}}
+                <span class="post_scope" title="{{t "stream.public"}}">
+                  <i class="entypo-globe small"></i>
+                </span>
+              {{else}}
+                <span class="post_scope" title="{{t "stream.limited"}}">
+                  <i class="entypo-lock small"></i>
+                </span>
               {{/if}}
-            {{else}}
-              {{#if provider_display_name}}
-                {{t "stream.via" provider=provider_display_name}}
+              <span class="post-time">
+                {{#if root}}
+                  <a href="/posts/{{root.id}}">
+                    <time datetime="{{root.created_at}}" title="{{localTime root.created_at}}" />
+                  </a>
+                {{else}}
+                  <a href="/posts/{{id}}">
+                    <time datetime="{{created_at}}" title="{{localTime created_at}}" />
+                  </a>
+                {{/if}}
+              </span>
+              {{#if root}}
+                {{#if root.provider_display_name}}
+                  {{t "stream.via" provider=root.provider_display_name}}
+                {{/if}}
+              {{else}}
+                {{#if provider_display_name}}
+                  {{t "stream.via" provider=provider_display_name}}
+                {{/if}}
               {{/if}}
-            {{/if}}
+            </div>
+            {{#unless root}}
+              <div id="single-post-moderation" />
+            {{/unless}}
           </div>
-          {{#unless root}}
-            <div id="single-post-moderation" />
-          {{/unless}}
         </div>
       </div>
       {{#unless root}}
diff --git a/app/assets/templates/stream-element_tpl.jst.hbs b/app/assets/templates/stream-element_tpl.jst.hbs
index 92ea4e5ee..74c7f5e78 100644
--- a/app/assets/templates/stream-element_tpl.jst.hbs
+++ b/app/assets/templates/stream-element_tpl.jst.hbs
@@ -1,11 +1,13 @@
 <div class="media {{#if showPost}} {{#if nsfw}} shield-off {{/if}} {{else}} shield-active {{/if}}">
-  {{#with author}}
-    <a href="/people/{{guid}}" class="img {{{hovercardable this}}}">
-      {{{personImage this}}}
-    </a>
-  {{/with}}
+  <div class="media-object media-left">
+    {{#with author}}
+      <a href="/people/{{guid}}" class="{{{hovercardable this}}}">
+        {{{personImage this}}}
+      </a>
+    {{/with}}
+  </div>
 
-  <div class="bd">
+  <div class="media-body">
     {{#if loggedIn}}
       <div class="control-icons">
         {{#if authorIsCurrentUser}}