239 Auto-expand message area when typing

stylesheets/_conversation.scss

@@ -1,6 +1,4 @@
 .conversation {
-  padding: $header-height 0;
-
   .file-input .close {
     top: -10px;
   }
@@ -8,10 +6,18 @@
   .conversation-title {
     line-height: $header-height;
   }
+
+  #header {
+    position: inherit;
+  }
+
+  .discussion-container {
+    height: calc(100% - 2 * #{$header-height});
+  }
 }
 
 .conversation + .new-group-update-form,
-.conversation, .discussion-container, .message-list, .message-detail, .key-verification {
+.conversation, .message-list, .message-detail, .key-verification {
   height: 100%;
 }
 
@@ -29,6 +35,7 @@
     padding: 0 1em;
   }
 }
+
 .message-detail {
   padding: $header-height 0 0;
   background: $grey_l;
@@ -100,6 +107,7 @@
 .outgoing .sender {
   display: none;
 }
+
 .sender {
   font-size: smaller;
   opacity: 0.8;
@@ -110,10 +118,9 @@
 }
 
 .entry.delivered .checkmark {
-    display: inline;
+  display: inline;
 }
 
-
 .message-list {
   margin: 0;
   padding: 1em 0;
@@ -237,7 +244,9 @@
         font-style: italic;
       }
 
-      &::before, &::after { display: none; }
+      &::before, &::after {
+        display: none;
+      }
     }
   }
 
@@ -308,6 +317,8 @@
 }
 
 .bottom-bar {
+  $button-width: 36px;
+
   position: fixed;
   bottom: 1; // offset 1 for window frame.
   height: 36px;
@@ -315,7 +326,7 @@
   border-top: 1px solid $grey_l;
   background: white;
 
-  button, input {
+  button, input, textarea {
     color: $grey_d;
   }
 
@@ -323,7 +334,7 @@
     position: absolute;
     top: 0;
     height: 100%;
-    width: 36px;
+    width: $button-width;
     padding: 0;
     border: 0;
     outline: 0;
@@ -352,16 +363,19 @@
     }
   }
 
-  form, input {
+  form, input, textarea {
     height: 100%;
   }
 
-  input[type=textarea] {
-      display: block;
-      height: 100%;
-      border: 0;
-      outline: 0;
-      z-index: 5;
+  .send-message {
+    display: block;
+    width: calc(100% - 2 * #{$button-width} - 20px);
+    min-height: $header-height - 1px;
+    max-height: 100px;
+    padding: 10px;
+    border: 0;
+    outline: 0;
+    z-index: 5;
   }
 }
 
@@ -376,17 +390,20 @@
   border-radius: 20px;
   font-size: small;
 }
+
 .confirmation-dialog {
-    position: absolute;
-    top: $header-height;
-    padding: 1em;
-    background: white;
-    border: solid 2px $blue;
+  position: absolute;
+  top: $header-height;
+  padding: 1em;
+  background: white;
+  border: solid 2px $blue;
 
-    .message { text-align: center; }
+  .message {
+    text-align: center;
+  }
 
-    button {
-      float: right;
-      margin-left: 10px;
-    }
+  button {
+    float: right;
+    margin-left: 10px;
+  }
 }

stylesheets/_global.scss

@@ -130,16 +130,12 @@ button.back {
   margin-right: 10px;
   cursor: pointer;
 
-  .thumbnail {
-    width: 36px;
-    height: 36px;
-  }
   .paperclip {
     width: 36px;
-    height: 36px;
-    background: url('/images/paperclip.png') no-repeat;
+    height: 100%;
+    background: url('/images/paperclip.png') no-repeat center center;
     background-size: 90%;
-    background-position: center 6px;
+    margin-top: 4px;
   }
 
   input[type=file] {

stylesheets/manifest.css

@@ -116,15 +116,12 @@ button.back {
   position: relative;
   margin-right: 10px;
   cursor: pointer; }
-  .file-input .thumbnail {
-    width: 36px;
-    height: 36px; }
   .file-input .paperclip {
     width: 36px;
-    height: 36px;
-    background: url("/images/paperclip.png") no-repeat;
+    height: 100%;
+    background: url("/images/paperclip.png") no-repeat center center;
     background-size: 90%;
-    background-position: center 6px; }
+    margin-top: 4px; }
   .file-input input[type=file] {
     display: none;
     position: absolute;
@@ -427,15 +424,17 @@ input.search {
 .conversations .unread .contact-details .last-timestamp {
   font-weight: bold; }
 
-.conversation {
-  padding: 36px 0; }
-  .conversation .file-input .close {
-    top: -10px; }
-  .conversation .conversation-title {
-    line-height: 36px; }
+.conversation .file-input .close {
+  top: -10px; }
+.conversation .conversation-title {
+  line-height: 36px; }
+.conversation #header {
+  position: inherit; }
+.conversation .discussion-container {
+  height: calc(100% - 2 * 36px); }
 
 .conversation + .new-group-update-form,
-.conversation, .discussion-container, .message-list, .message-detail, .key-verification {
+.conversation, .message-list, .message-detail, .key-verification {
   height: 100%; }
 
 .key-verification {
@@ -666,7 +665,7 @@ input.search {
   width: calc(100% - 2px);
   border-top: 1px solid #f3f3f3;
   background: white; }
-  .bottom-bar button, .bottom-bar input {
+  .bottom-bar button, .bottom-bar input, .bottom-bar textarea {
     color: #454545; }
   .bottom-bar button {
     position: absolute;
@@ -693,11 +692,14 @@ input.search {
     cursor: pointer; }
     .bottom-bar .send-btn::before {
       content: '+'; }
-  .bottom-bar form, .bottom-bar input {
+  .bottom-bar form, .bottom-bar input, .bottom-bar textarea {
     height: 100%; }
-  .bottom-bar input[type=textarea] {
+  .bottom-bar .send-message {
     display: block;
-    height: 100%;
+    width: calc(100% - 2 * 36px - 20px);
+    min-height: 35px;
+    max-height: 100px;
+    padding: 10px;
     border: 0;
     outline: 0;
     z-index: 5; }