--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/chat/select.html	Fri Jan 05 13:14:22 2018 +0100
@@ -0,0 +1,17 @@
+{% if not embedded %}{% extends 'base/base.html' %}{% endif %}
+{% import 'input/form.html' as form with context %}
+{% import 'input/field.html' as field with context %}
+
+{% block body %}
+<p class="instructions">{% trans %}Please select the chat room you want to enter{% endtrans %}</p>
+<ul class="rooms_list">
+{% for room in rooms %}
+    <li><a href="{{room.url}}">{{room.name}}</a></li>
+{% endfor %}
+</ul>
+<p class="instructions room_jid">{% trans %}Or enter a room address{% endtrans %}</p>
+{% call form.form(class="room_jid_form") %}
+    {{ field.text("jid", _("Room address (JID)"), required=true)}}
+    {{ field.submit(_("Join")) }}
+{% endcall %}
+{% endblock body %}

--- a/default/components/common.html	Wed Jan 03 01:12:16 2018 +0100
+++ b/default/components/common.html	Fri Jan 05 13:14:22 2018 +0100
@@ -13,7 +13,7 @@
     <nav class="menu {{class}}">
         <ul>
         {% for name,url in menus %}
-            <li><a class="menu_item button {{name}}" {{ {'href': url}|xmlattr }}>{{ml[name]}}</a></li>
+            <li><a class="menu_item {{name}}" {{ {'href': url}|xmlattr }}>{{ml[name]}}</a></li>
         {% endfor %}
         </ul>
     </nav>

--- a/default/input/field.html	Wed Jan 03 01:12:16 2018 +0100
+++ b/default/input/field.html	Fri Jan 05 13:14:22 2018 +0100
@@ -8,7 +8,7 @@
 
 {% macro int(name, label="", init=0) %}
     <span class="form_input">
-        <label id="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="number" name="{{name}}" value="{{init}}" step="1" min="0">
+        <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="number" name="{{name}}" value="{{init}}" step="1" min="0">
     </span>
 {% endmacro %}
 
@@ -16,7 +16,7 @@
     {# single line text field
        additional kwargs will be passed as attributes #}
     <span class="form_input">
-        <label id="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="text" name="{{name}}" placeholder="{{placeholder}}" {{"required" if required}} {{kwargs|xmlattr}}>
+        <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="text" name="{{name}}" placeholder="{{placeholder}}" {{"required" if required}} {{kwargs|xmlattr}}>
     </span>
 {% endmacro %}
 
@@ -24,7 +24,7 @@
     {# password field
        additional kwargs will be passed as attributes #}
     <span class="form_input">
-        <label id="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="password" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}>
+        <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="password" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}>
     </span>
 {% endmacro %}
 
@@ -32,7 +32,7 @@
     {# email field
        additional kwargs will be passed as attributes #}
     <span class="form_input">
-        <label id="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="email" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}>
+        <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="email" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}>
     </span>
 {% endmacro %}
 

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/static/chat_select.css	Fri Jan 05 13:14:22 2018 +0100
@@ -0,0 +1,65 @@
+#main_area {
+    overflow: auto;
+}
+
+.instructions {
+	text-align: center;
+	font-style: italic;
+}
+
+.rooms_list {
+	list-style: none;
+    display: grid;
+    text-align: center;
+    padding: 0;
+}
+
+.rooms_list a {
+	text-decoration: none;
+	color: inherit;
+	font-variant: small-caps;
+	font-weight: bold;
+}
+
+.rooms_list li {
+    margin-top: 1em;
+}
+
+.rooms_list li:first-child {
+    margin-top: 0;
+}
+
+.rooms_list li:hover {
+    background-color: #efefef;
+}
+
+#jid {
+	margin: 0 1em;
+	width: 15em;
+	border-radius: 0.7em;
+	outline: none;
+	border: 1px solid black;
+	padding: 0.4em;
+    box-shadow: none;
+}
+
+.room_jid_form {
+    text-align: center;
+}
+
+@media (min-width: 600px) {
+    .instructions {
+        padding-top: 3rem;
+    }
+    .rooms_list {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    .rooms_list li {
+        margin-top: 0;
+    }
+
+    .room_jid_form .form_submit.button {
+        display: inline;
+    }
+}

--- a/default/static/styles.css	Wed Jan 03 01:12:16 2018 +0100
+++ b/default/static/styles.css	Fri Jan 05 13:14:22 2018 +0100
@@ -56,6 +56,16 @@
 
 /*** Generic ***/
 
+.button {
+	padding: 0.5em 1em;
+	background: #333;
+	color: #ccc;
+	border: 1px solid #555;
+	border-radius: 0.8em;
+	font-weight: bold;
+}
+
+
 .button:hover {
     background-color: #bc0000;
 }