sticky avatars

components/chat.js

@@ -3,9 +3,11 @@ const React = require('react')
 const ReactDOM = require('react-dom')
 const create = require('create-react-class')
 const Promise = require('bluebird')
+const debounce = require('debounce')
 
 let chat = create({
   displayName: "Chat",
+
   render: function() {
     let tmpEvents = [
       {sender: "Foks", content: "Hello"},
@@ -13,7 +15,9 @@ let chat = create({
       {sender: "Foks", content: "Here is one test event\nWith\n Multiple\nLines\n:)"},
       {sender: "Different Foks", content: "Look at these nice colors"},
       {sender: "Different Foks", content: "And the font"},
-      {sender: "Lain", content: "A single message"},
+      {sender: "Lain", content: "image"},
+      {sender: "Lain", content: "image"},
+      {sender: "Lain", content: "image"},
       {sender: "Different Foks", content: "And the avatars"},
       {sender: "Foks", content: "Every line has it's own message"},
       {sender: "Foks", content: "But if the sender is the same, we don't repeat the name+image"},
@@ -83,6 +87,9 @@ let Event = create({
   render: function() {
     //TODO: HTML Sanitize
     let parsedBody = this.props.event.content.split("\n").map((line, id) => {
+      if (line.startsWith("image")) {
+        return <img src="/public/neo.png"/>
+      }
       return <span key={id}>{line}<br/></span>
     })
     return <div className="event">

public/scss/style.scss

@@ -155,6 +155,7 @@ body {
 .chat {
   padding: $spacing;
   background: $bg0;
+  position: relative;
 
   .events {
     display: flex;
@@ -182,7 +183,11 @@ body {
 
         box-sizing: border-box;
         object-fit: cover;
-        border: 3px solid lighten($bg0, 10);
+        border: 0.2rem solid lighten($bg0, 10);
+        align-self: flex-end;
+
+        position: sticky;
+        bottom: $spacing/4 - 0.2rem;
       }
 
       .col {
@@ -193,6 +198,12 @@ body {
           /* debug */
           //border: 1px solid $red;
           padding: $spacing/4;
+
+          img {
+            max-height: 40vh;
+            max-width: 90%;
+            object-fit: contain;
+          }
         }
 
         .body:hover {