Merge branch 'layout'

main.css

@@ -1,4 +1,3 @@
-/* Theming taken from https://github.com/vector-im/riot-web/blob/cf5cf02529f95a094d88051c12fdb87a03d87335/src/skins/vector/css/themes/_base.scss */
 .room {
     margin-left: 2em;
 }
@@ -21,7 +20,23 @@ summary {
     margin: 0.5em;
 }
 
-img.roomAvatar {
+.roomAvatar {
     height: 36px;
+    width: 36px;
     margin: 0.5em;
 }
+
+.topic {
+    font-size: smaller;
+    color: DarkSlateGrey;
+    margin-left: 2em;
+
+    width: 40em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.topic:hover {
+    overflow: visible;
+}

spaces.html

@@ -14,7 +14,9 @@
 
             <div class="room">
                 % if room['name'] != "TOP":
-                    % if room['name'] != "TOP" and room['name'] != "Libre Gaming" and 'children' in room:
+                    % if room['name'].startswith('Libre Gaming'):
+                    <details open><summary>
+                    % elif room['name'] != "TOP" and room['name'] != "Libre Gaming" and 'children' in room:
                     <details><summary>
                     % endif
                <div class="info">
@@ -24,13 +26,15 @@
                     % if 'avatar_url' in room:
                     <img class="avatar roomAvatar" src=${mxc2url(room['avatar_url'])}>
                     % else:
-                    <img class="avatar roomAvatar" src="./empty.png">
+                    <div class="avatar roomAvatar"></div>
 
                     % endif
                     
 
                     % if 'room_id' in room:
-                        % if 'children' not in room:
+                        % if 'canonical_alias' in room:
+                            <a href="https://matrix.to/#/${room['canonical_alias']}">
+                        % elif 'children' not in room and room['world_readable']:
                             <a href="https://view.matrix.org/room/${room['room_id']}">
                         % endif
 
@@ -39,6 +43,10 @@
                         % endif
 
                             </a>
+
+                        % if 'topic' in room:
+                            <p class="topic"> ${room['topic']} </p>
+                        % endif
                     % endif
                 </div>
                     % if room['name'] != "TOP" and room['name'] != "Libre Gaming" and 'children' in room: