From 0569d4c889544339540ee76f1d0f7b1711e59d4f Mon Sep 17 00:00:00 2001
From: Sam Lanning <sam@samlanning.com>
Date: Thu, 21 Jan 2016 23:45:13 +0000
Subject: [PATCH] Replace conversation panel js resizing with flex styling.

// FREEBIE
---
 js/views/conversation_view.js  | 11 +----------
 stylesheets/_conversation.scss | 20 +++++++++++++++++---
 stylesheets/_index.scss        |  5 ++++-
 stylesheets/_variables.scss    |  2 ++
 stylesheets/manifest.css       | 24 +++++++++++++++++++-----
 5 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 5485fc1e..876faf5c 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -266,21 +266,12 @@
             this.view.measureScrollPosition();
             window.autosize(this.$messageField);
 
-            var $discussionContainer = this.$('.discussion-container'),
-                $conversationHeader = this.$('.conversation-header'),
-                $attachmentPreviews = this.$('.attachment-previews'),
+            var $attachmentPreviews = this.$('.attachment-previews'),
                 $bottomBar = this.$('.bottom-bar');
 
             $bottomBar.outerHeight(
                     this.$messageField.outerHeight() +
                     $attachmentPreviews.outerHeight() + 1);
-            var $bottomBarNewHeight = $bottomBar.outerHeight();
-
-            //TODO: revisit this logic for new layout.
-            $discussionContainer.outerHeight(
-                    this.$el.outerHeight() -
-                    $bottomBarNewHeight -
-                    $conversationHeader.outerHeight() - 40);
 
             this.view.scrollToBottomIfNeeded();
         },
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 656ee359..5459a543 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -28,16 +28,30 @@
 
   .panel {
     height: 100%;
+    display: flex;
+    flex-direction: column;
 
     .discussion-container {
-      height: calc(100% - 2 * #{$header-height} - 60px);
+      flex-grow: 1;
+      position: relative;
+
+      .message-list {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: 100%;
+
+        @media(min-width: $big-avatar-min-width) {
+          padding-left: 70px;
+        }
+      }
     }
   }
 }
 
 .group-member-list,
 .new-group-update,
-.message-list, .message-detail, .key-verification {
+.message-detail, .key-verification {
   height: 100%;
 }
 
@@ -282,7 +296,7 @@
     margin-left: 8px;
     max-width: 30em;
 
-    @media(max-width:900px) {
+    @media(max-width: $big-avatar-min-width - 1px) {
       max-width: calc(100% - 45px); // avatar size + padding
     }
 
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index e5498229..85f5e1f3 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -70,11 +70,14 @@
     height: 36px;
     line-height: 36px;
   }
-  @media(min-width:900px) {
+  @media(min-width: $big-avatar-min-width) {
     .avatar {
       width: 70px;
       height: 70px;
       line-height: 70px;
+      margin-bottom: -60px;
+      position: relative;
+      z-index: 10;
     }
   }
 }
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index df6952ff..329f02de 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -35,3 +35,5 @@ $bubble-border-radius: 20px;
 
 $unread-badge-size: 21px;
 $loading-height: 16px;
+
+$big-avatar-min-width: 900px;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 1731a682..e39b11ba 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -434,7 +434,10 @@ img.emoji {
     .conversation-header .avatar {
       width: 70px;
       height: 70px;
-      line-height: 70px; } }
+      line-height: 70px;
+      margin-bottom: -60px;
+      position: relative;
+      z-index: 10; } }
 
 .menu.conversation-menu button.drop-down {
   background: url("/images/arrow_drop_down.png") no-repeat center; }
@@ -601,13 +604,24 @@ input.search {
   .conversation ::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.15); }
   .conversation .panel {
-    height: 100%; }
+    height: 100%;
+    display: flex;
+    flex-direction: column; }
     .conversation .panel .discussion-container {
-      height: calc(100% - 2 * 36px - 60px); }
+      flex-grow: 1;
+      position: relative; }
+      .conversation .panel .discussion-container .message-list {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: 100%; }
+        @media (min-width: 900px) {
+          .conversation .panel .discussion-container .message-list {
+            padding-left: 70px; } }
 
 .group-member-list,
 .new-group-update,
-.message-list, .message-detail, .key-verification {
+.message-detail, .key-verification {
   height: 100%; }
 
 .key-verification {
@@ -784,7 +798,7 @@ input.search {
     word-wrap: break-word;
     margin-left: 8px;
     max-width: 30em; }
-    @media (max-width: 900px) {
+    @media (max-width: 899px) {
       .message-detail .bubble,
       .message-list .bubble {
         max-width: calc(100% - 45px); } }