chat styling, roomlist

components/chat.js

@@ -7,9 +7,31 @@ const Promise = require('bluebird')
 let chat = create({
   displayName: "Chat",
   render: function() {
-    return <div className="chat">chat window</div>
+    let tmpEvents = [
+      {sender: "Foks", content: "Hello"},
+      {sender: "Foks", content: "This is Neo v4"}
+    ]
+    let events = tmpEvents.map((event, id) => {
+      return <Event event={event} key={id}/>
+    })
+    //TODO: replace with something that only renders events in view
+    return <div className="chat">
+      <div className="events">
+        Chat content
+      </div>
+    </div>
   }
 })
 
+let Event = create({
+  displayName: "Event",
+  render: function() {
+    return <div className="event">
+      <img id="avatar" src="https://placekitten.com/200/200"/>
+      <span id="content">{this.props.event.sender}</span>
+      <div id="content">{this.props.event.content}</div>
+    </div>
+  }
+})
 
 module.exports = chat

components/sidebar.js

@@ -43,7 +43,7 @@ let List = create({
   },
 
   render: function() {
-    let rooms = ["Neo", "version 4", "Codename", "Iris", "Let's All Love Lain"]
+    let rooms = ["Neo", "version 4", "Codename", "Iris", "Let's All Love Lain", "Very long room name abcdefghijklmnopqrstuvwxyz"]
     let roomList = rooms.map((room, i) => {
       return <RoomListItem
         active={this.state.roomId == i}

public/scss/style.scss

@@ -42,11 +42,6 @@ body {
   display: flex;
 }
 
-.sidebar {
-  flex: 0 0 15vw;
-  font-size: 1.4rem;
-}
-
 .main {
   flex: 1 1 auto;
 }
@@ -64,6 +59,8 @@ body {
 
 .sidebar {
   margin-right: 0;
+  flex: 0 0 15vw;
+  max-width: 15vw;
 
   .filter {
     margin-bottom: $spacing;
@@ -85,8 +82,6 @@ body {
 
   div {
     cursor: pointer;
-    border-bottom: 1px solid lighten($bg1, 3);
-    padding: $spacing;
   }
 
   div.active {
@@ -95,23 +90,29 @@ body {
 }
 
 .roomListItem {
-  $height: 1.5rem;
+  height: 1.5rem + 2* $spacing;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 1px solid lighten($bg1, 3);
+
   #avatar {
-    line-height: $height;
-    height: $height;
-    width: $height;
-    vertical-align: middle;
+    box-sizing: border-box;
+    height: 100%;
     object-fit: cover;
+    padding: 0.2rem;
   }
 
   #name {
-    height: $height;
-    line-height: $height;
-    vertical-align: middle;
-    padding-left: $spacing;
     font-size: 1rem;
     font-weight: bold;
     font-family: "Roboto Mono Bold", monospace;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding: $spacing;
+    padding-right: $spacing/4;
   }
 }
 
@@ -123,6 +124,22 @@ body {
 .chat {
   padding: $spacing;
   background: $bg0;
+
+  .events {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  .event {
+    flex: 0 0 auto;
+    display: flex;
+
+    #avatar {
+      height: 3rem;
+      width: 3rem;
+      object-fit: cover;
+    }
+  }
 }
 
 .input {