make middle panel responsive styling + hide back b. + header css generic

src/ui/web/css/layout.css

@@ -51,17 +51,18 @@ html {
     width: 100vw;
 }
 
+/* hide back button in middle section by default */
+.middle .close-middle { display: none; }
 /* mobile layout */
 @media screen and (max-width: 800px) {
     /* show back button */
-    .RoomHeader .close-room { display: block !important; }
+    .middle .close-middle { display: block !important; }
     /* hide grid button */
     .LeftPanel .grid { display: none !important; }
-    div.RoomView, div.room-placeholder, div.RoomGridView { display: none; }
+    div.middle, div.room-placeholder { display: none; }
     div.LeftPanel {flex-grow: 1;}
-    div.room-shown div.RoomGridView { display: flex; }
+    div.middle-shown div.middle { display: flex; }
-    div.room-shown div.RoomView { display: flex; }
+    div.middle-shown div.LeftPanel { display: none; }
-    div.room-shown div.LeftPanel { display: none; }
     div.right-shown div.TimelinePanel { display: none; }
 }
 
@@ -70,7 +71,7 @@ html {
     min-width: 0;
 }
 
-.room-placeholder, .RoomView, .RoomGridView {
+.room-placeholder, .middle {
     flex: 1 0 0;
     min-width: 0;
 }
@@ -94,7 +95,7 @@ html {
     flex: 1 0 0;
 }
 
-.RoomHeader {
+.middle-header {
     display: flex;
 }
 

src/ui/web/css/room.css

@@ -15,23 +15,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.RoomHeader {
+.middle-header {
     align-items: center;
 }
 
-.RoomHeader h2 {
+.middle-header h2 {
     flex: 1;
 }
 
-.RoomHeader button {
+.middle-header button {
     display: block;
 }
 
-.RoomHeader .close-room {
+.middle-header .room-description {
-    display: none;
-}
-
-.RoomHeader .room-description {
     flex: 1;
     min-width: 0;
 }
@@ -47,7 +43,7 @@ limitations under the License.
     min-width: 0;
 }
 
-.RoomHeader h2 {
+.middle-header h2 {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

src/ui/web/css/themes/element/theme.css

@@ -316,7 +316,7 @@ a {
     z-index: 2;
 }
 
-.room-shown .SessionStatusView {
+.middle-shown .SessionStatusView {
     top: 72px;
 }
 
@@ -387,7 +387,7 @@ a {
     border-radius: 12px;
 }
 
-.RoomHeader {
+.middle-header {
     box-sizing: border-box;
     height: 58px; /* 12 + 36 + 12 to align with filter field + margin */
     background: white;
@@ -395,19 +395,19 @@ a {
     border-bottom: 1px solid rgba(245, 245, 245, 0.90);
 }
 
-.RoomHeader h2 {
+.middle-header h2 {
     font-size: 1.8rem;
     font-weight: 600;
 }
 
-.RoomHeader > :not(:last-child) {
+.middle-header > :not(:last-child) {
     /* use margin-right because the first item,
-    .close-room might be hidden and then we don't
+    .close-middle might be hidden and then we don't
     want a margin-left on the second item*/
     margin-right: 8px;
 }
 
-.close-room, .close-session {
+.close-middle, .close-session {
     background-image: url('icons/chevron-left.svg');
     background-position-x: 10px;
 }

src/ui/web/session/RoomGridView.js

@@ -42,6 +42,6 @@ export class RoomGridView extends TemplateView {
             })));
         }
         children.push(t.div({className: vm => `focus-ring tile${vm.focusIndex}`}));
-        return t.div({className: "RoomGridView layout3x2"}, children);
+        return t.div({className: "RoomGridView middle layout3x2"}, children);
     }
 }

src/ui/web/session/SessionView.js

@@ -26,7 +26,7 @@ export class SessionView extends TemplateView {
         return t.div({
             className: {
                 "SessionView": true,
-                "room-shown": vm => vm.activeSection !== "placeholder"
+                "middle-shown": vm => vm.activeSection !== "placeholder"
             },
         }, [
             t.view(new SessionStatusView(vm.sessionStatusViewModel)),
@@ -66,9 +66,9 @@ class SettingsView extends TemplateView {
             ]);
         };
 
-        return t.div({className: "Settings"}, [
+        return t.main({className: "Settings middle"}, [
-            t.div({className: "header"}, [
+            t.div({className: "middle-header"}, [
-                t.a({className: "button-utility close-room", href: vm.closeUrl, title: vm.i18n`Close room`}),
+                t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Close settings`}),
                 t.h2("Settings")
             ]),
             t.div([

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

@@ -23,10 +23,10 @@ import {renderAvatar} from "../../common.js";
 
 export class RoomView extends TemplateView {
     render(t, vm) {
-        return t.div({className: "RoomView"}, [
+        return t.main({className: "RoomView middle"}, [
             t.div({className: "TimelinePanel"}, [
-                t.div({className: "RoomHeader"}, [
+                t.div({className: "RoomHeader middle-header"}, [
-                    t.a({className: "button-utility close-room", href: vm.closeUrl, title: vm.i18n`Close room`}),
+                    t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Close room`}),
                     renderAvatar(t, vm, 32),
                     t.div({className: "room-description"}, [
                         t.h2(vm => vm.name),