more css fixes, and make back button work for compact layout

src/domain/session/SessionViewModel.js

@@ -31,12 +31,24 @@ export default class SessionViewModel extends EventEmitter {
         return this._currentRoomViewModel;
     }
 
-    _openRoom(room) {
+    _closeCurrentRoom() {
         if (this._currentRoomViewModel) {
-            this._currentRoomViewModel.disable();
-        }
-        this._currentRoomViewModel = new RoomViewModel(room, this._session.userId);
-        this._currentRoomViewModel.enable();
+            this._currentRoomViewModel.dispose();
+            this._currentRoomViewModel = null;
+            this.emit("change", "currentRoom");
+        }
+    }
+
+    _openRoom(room) {
+        if (this._currentRoomViewModel) {
+            this._currentRoomViewModel.dispose();
+        }
+        this._currentRoomViewModel = new RoomViewModel({
+            room,
+            ownUserId: this._session.userId,
+            closeCallback: () => this._closeCurrentRoom(),
+        });
+        this._currentRoomViewModel.load();
         this.emit("change", "currentRoom");
     }
 }

src/domain/session/room/RoomViewModel.js

@@ -3,7 +3,7 @@ import TimelineViewModel from "./timeline/TimelineViewModel.js";
 import {avatarInitials} from "../avatar.js";
 
 export default class RoomViewModel extends EventEmitter {
-    constructor(room, ownUserId) {
+    constructor({room, ownUserId, closeCallback}) {
         super();
         this._room = room;
         this._ownUserId = ownUserId;
@@ -11,9 +11,10 @@ export default class RoomViewModel extends EventEmitter {
         this._timelineVM = null;
         this._onRoomChange = this._onRoomChange.bind(this);
         this._timelineError = null;
+        this._closeCallback = closeCallback;
     }
 
-    async enable() {
+    async load() {
         this._room.on("change", this._onRoomChange);
         try {
             this._timeline = await this._room.openTimeline();
@@ -26,13 +27,18 @@ export default class RoomViewModel extends EventEmitter {
         }
     }
 
-    disable() {
+    dispose() {
+        // this races with enable, on the await openTimeline()
         if (this._timeline) {
             // will stop the timeline from delivering updates on entries
             this._timeline.close();
         }
     }
 
+    close() {
+        this._closeCallback();
+    }
+
     // room doesn't tell us yet which fields changed,
     // so emit all fields originating from summary
     _onRoomChange() {

src/ui/web/css/layout.css

@@ -21,7 +21,7 @@ body {
 
 /* mobile layout */
 @media screen and (max-width: 800px) {
-    div.back { display: block !important; }
+    .RoomHeader button.back { display: block; }
     div.RoomView, div.RoomPlaceholderView { display: none; }
     div.LeftPanel {flex-grow: 1;}
     div.room-shown div.RoomView { display: unset; }

src/ui/web/css/room.css

@@ -4,12 +4,13 @@
     background-color: #333;
 }
 
-.RoomHeader *:last-child {
-    margin-right: 0 !important;
+.RoomHeader > *:last-child {
+    margin-right: 0;
 }
 
 .RoomHeader > * {
-    margin-right: 10px !important;
+    margin-right: 10px;
+    flex: 0 0 auto;
 }
 
 .RoomHeader button {
@@ -25,10 +26,15 @@
     line-height: 40px;
 }
 
-.RoomHeader button.back {
+.RoomHeader .back {
     display: none;
 }
 
+.RoomHeader .room-description {
+    flex: 1 1 0;
+    min-width: 0;
+}
+
 .RoomHeader .topic {
     font-size: 0.8em;
     overflow: hidden;

src/ui/web/session/SessionView.js

@@ -52,8 +52,13 @@ export default class SessionView {
 
     _onViewModelChange(prop) {
         if (prop === "currentRoom") {
+            if (this._viewModel.currentRoom) {
                 this._root.classList.add("room-shown");
                 this._middleSwitcher.switch(new RoomView(this._viewModel.currentRoom));
+            } else {
+                this._root.classList.remove("room-shown");
+                this._middleSwitcher.switch(new RoomPlaceholderView());
+            }
         }
     }
 

src/ui/web/session/room/RoomView.js

@@ -7,11 +7,11 @@ export default class RoomView extends TemplateView {
         this._timelineList = null;
     }
 
-    render(t) {
+    render(t, vm) {
         return t.div({className: "RoomView"}, [
             t.div({className: "TimelinePanel"}, [
                 t.div({className: "RoomHeader"}, [
-                    t.button({className: "back"}),
+                    t.button({className: "back", onClick: () => vm.close()}),
                     t.div({className: "avatar large"}, vm => vm.avatarInitials),
                     t.div({className: "room-description"}, [
                         t.h2(vm => vm.name),