From 18c3f298c67995d4cd94390b528cda9669439425 Mon Sep 17 00:00:00 2001
From: Steffen van Bergerem <svbergerem@online.de>
Date: Thu, 24 Sep 2015 19:36:38 +0200
Subject: [PATCH] Revert "Use Bootstrap media objects for posts"

This reverts commit bd73214219b78bbb723d753a0290a6a93cdbd5eb.
---
 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, 160 insertions(+), 135 deletions(-)
 create mode 100644 app/assets/stylesheets/media-box.scss

diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss
index de61d106f..38302959e 100644
--- a/app/assets/stylesheets/_application.scss
+++ b/app/assets/stylesheets/_application.scss
@@ -6,6 +6,7 @@
 
 
 /* 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 5de2c2f43..67a654a93 100644
--- a/app/assets/stylesheets/comments.scss
+++ b/app/assets/stylesheets/comments.scss
@@ -1,11 +1,12 @@
 .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 {
@@ -33,9 +34,11 @@
       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
new file mode 100644
index 000000000..2c11626d9
--- /dev/null
+++ b/app/assets/stylesheets/media-box.scss
@@ -0,0 +1,17 @@
+.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 79e41ec73..0166d1802 100644
--- a/app/assets/stylesheets/single-post-view.scss
+++ b/app/assets/stylesheets/single-post-view.scss
@@ -19,6 +19,9 @@
           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 eb2eb9a7b..2449a3c47 100644
--- a/app/assets/stylesheets/stream_element.scss
+++ b/app/assets/stylesheets/stream_element.scss
@@ -1,5 +1,8 @@
 #main_stream .stream_element,
 #main_stream > div > .photo {
+  & > .media {
+    margin: 0px;
+  }
   &.deleting {
     > .media { opacity: 0.3; }
     .control-icons { display: none !important; }
@@ -8,43 +11,48 @@
 
 #main_stream > div > .photo {
   & > .media {
-    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;
+    overflow: visible;
+    > .bd {
+      position: relative;
+      overflow: inherit;
+      > .control-icons {
+        border-radius: 4px;
+        padding-left: 5px;
+        position: absolute;
+        right: 6px;
+        text-align: center;
+        top: 1px;
+      }
     }
-    &:hover > .control-icons { background: $white; }
+    &:hover > .bd > .control-icons { background: $white; }
   }
   .thumbnail {
-    border: none;
+    padding: 10px;
+    margin: 0 0 15px;
+    background: $white;
     border-radius: 0;
-    margin: 0;
-    padding: 0;
+    box-shadow: $card-shadow;
     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; }
-    > .media-object .avatar.small {
-      height: 50px;
-      width: 50px;
+    & > .img > .avatar {
+      margin-top: 5px;
+      &.small {
+        height: 50px;
+        width: 50px;
+      }
     }
     .author-name {
       font-weight: bold;
@@ -58,10 +66,10 @@
       line-height: $font-size-small;
     }
     .likes {
-      margin: 10px;
+      margin-top: 10px;
       font-size: 12px;
       line-height: 16px;
-      .author-name { display: inline-block; }
+      .author-name, .bd { display: inline-block; }
       .author-name { margin-right: 3px; }
       .entypo-heart {
         display: inline-block;
@@ -70,7 +78,6 @@
         margin-top: -2px;
         margin-right: 5px;
       }
-      .media-left { padding-right: 0; }
     }
     .stream_photo {
       float: left;
@@ -96,10 +103,10 @@
 
   div.reshare {
     border-left: 2px solid $border-grey;
-    padding-left: 10px;
+    margin-top: 3px;
 
     & > .media .avatar {
-      margin-top: 3px;
+      margin-top: 5px;
       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 2a05ae017..ac8f118e4 100644
--- a/app/assets/templates/comment-stream_tpl.jst.hbs
+++ b/app/assets/templates/comment-stream_tpl.jst.hbs
@@ -12,15 +12,13 @@
 
 {{#if loggedIn}}
   <div class="comment media new_comment_form_wrapper {{#unless commentsCount}} hidden {{/unless}}">
-    <div class="media-object media-left">
-      {{#with current_user}}
-        <a href="/people/{{guid}}">
-          {{{personImage this}}}
-        </a>
-      {{/with}}
-    </div>
+    {{#with current_user}}
+      <a href="/people/{{guid}}" class="img">
+        {{{personImage this}}}
+      </a>
+    {{/with}}
 
-    <div class="media-body">
+    <div class="bd">
       <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 5bd44d6d7..5dc240b49 100644
--- a/app/assets/templates/comment_tpl.jst.hbs
+++ b/app/assets/templates/comment_tpl.jst.hbs
@@ -1,11 +1,11 @@
-<div id="{{guid}}" class="media">
-  <div class="media-object media-left">
+<div id="{{guid}}">
+  <div class="img">
     {{#linkToAuthor author}}
       {{{personImage this "small" "small"}}}
     {{/linkToAuthor}}
   </div>
 
-  <div class="media-body">
+  <div class="bd">
     <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 cd07ef9c1..e58e484ee 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="media">
-    <div class="media-object media-left">
+  <div class="comment">
+    <div class="media">
       <i class="entypo-heart"></i>
-    </div>
 
-    <div class="media-body">
-      {{#unless likes_fetched}}
-        <a href="#" class="expand_likes grey">
-          {{t "stream.likes" count=likesCount}}
-        </a>
+      <div class="bd">
+        {{#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}}
+          {{#each likes}}
+            {{#linkToAuthor author}}
+              {{{personImage this 'small' 'micro'}}}
+            {{/linkToAuthor}}
+          {{/each}}
+        {{/unless}}
+      </div>
     </div>
   </div>
 {{/if}}
diff --git a/app/assets/templates/photo_tpl.jst.hbs b/app/assets/templates/photo_tpl.jst.hbs
index 6788b90a7..a36e05879 100644
--- a/app/assets/templates/photo_tpl.jst.hbs
+++ b/app/assets/templates/photo_tpl.jst.hbs
@@ -1,27 +1,29 @@
 <div class="media">
-  {{#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="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>
+    <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>
 </div>
diff --git a/app/assets/templates/reshare_tpl.jst.hbs b/app/assets/templates/reshare_tpl.jst.hbs
index cdb988060..b1334fa0a 100644
--- a/app/assets/templates/reshare_tpl.jst.hbs
+++ b/app/assets/templates/reshare_tpl.jst.hbs
@@ -2,13 +2,11 @@
   <div class="media">
     {{#if root}}
       {{#with root}}
-        <div class="media-object media-left">
-          <a href="/people/{{author.guid}}" class="{{{hovercardable this}}}">
-            {{{personImage author 'small'}}}
-          </a>
-        </div>
+        <a href="/people/{{author.guid}}" class="img {{{hovercardable this}}}">
+          {{{personImage author 'small'}}}
+        </a>
 
-        <div class="media-body">
+        <div class="bd">
           <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 72caef79e..9295117eb 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,67 +2,65 @@
   <div class="col-md-12">
     <div class="row">
       <div id="post-info" class="col-md-8">
-        <div class="media">
-          <div class="media-object media-left">
+        <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">
             {{#if root}}
               {{#linkToAuthor root.author}}
-                {{{personImage this "medium"}}}
+                {{name}}
               {{/linkToAuthor}}
             {{else}}
               {{#linkToAuthor author}}
-                {{{personImage this "medium"}}}
+                {{name}}
               {{/linkToAuthor}}
             {{/if}}
-          </div>
+          </span>
 
-          <div class="media-body">
-            <span class="author">
+          <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">
               {{#if root}}
-                {{#linkToAuthor root.author}}
-                  {{name}}
-                {{/linkToAuthor}}
+                <a href="/posts/{{root.id}}">
+                  <time datetime="{{root.created_at}}" title="{{localTime root.created_at}}" />
+                </a>
               {{else}}
-                {{#linkToAuthor author}}
-                  {{name}}
-                {{/linkToAuthor}}
+                <a href="/posts/{{id}}">
+                  <time datetime="{{created_at}}" title="{{localTime created_at}}" />
+                </a>
               {{/if}}
             </span>
-
-            <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 root}}
+              {{#if root.provider_display_name}}
+                {{t "stream.via" provider=root.provider_display_name}}
               {{/if}}
-              <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}}
+            {{else}}
+              {{#if provider_display_name}}
+                {{t "stream.via" provider=provider_display_name}}
               {{/if}}
-            </div>
-            {{#unless root}}
-              <div id="single-post-moderation" />
-            {{/unless}}
+            {{/if}}
           </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 74c7f5e78..92ea4e5ee 100644
--- a/app/assets/templates/stream-element_tpl.jst.hbs
+++ b/app/assets/templates/stream-element_tpl.jst.hbs
@@ -1,13 +1,11 @@
 <div class="media {{#if showPost}} {{#if nsfw}} shield-off {{/if}} {{else}} shield-active {{/if}}">
-  <div class="media-object media-left">
-    {{#with author}}
-      <a href="/people/{{guid}}" class="{{{hovercardable this}}}">
-        {{{personImage this}}}
-      </a>
-    {{/with}}
-  </div>
+  {{#with author}}
+    <a href="/people/{{guid}}" class="img {{{hovercardable this}}}">
+      {{{personImage this}}}
+    </a>
+  {{/with}}
 
-  <div class="media-body">
+  <div class="bd">
     {{#if loggedIn}}
       <div class="control-icons">
         {{#if authorIsCurrentUser}}