Spit and polish

web/templates/about.html

@@ -41,11 +41,48 @@
                 </li>
             </ul>
 
-            <hr>
+            <h1>Help &amp; Support</h1>
+
+            <h2>Browser Support</h2>
 
             <p>
-            This page will be fleshed out later with help and tips for using this
+            BareRTC should work on most modern web browsers. It has been tested in
-            chat room.
+            Firefox and Chromium on desktop Linux and on Android. It utilizes open
+            web standards including
+            <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API" target="_blank">WebSockets</a>
+            (for most of the text chat features) and <a href="https://webrtc.org/" target="_blank">WebRTC</a>
+            (for webcam and microphone sharing).
+            </p>
+
+            <h2>Webcam Streaming</h2>
+
+            <p>
+            The WebRTC technology used by this chat room allows for direct, <strong>peer to peer</strong>
+            connections between you and the other chat members to stream video and audio directly to one
+            another, without needing a server in the middle to relay all that data. In many cases, WebRTC
+            should "just work" but you may run into trouble broadcasting if your local network is heavily
+            firewalled (for example on a corporate or school network).
+            </p>
+
+            <p>
+            In many WebRTC video apps (such as Zoom, Jitsi, Google Hangouts, etc.), when one or both parties
+            are on such difficult networks, a server in the middle is used to transfer the video data between
+            them. BareRTC does not have any such server, as the bandwidth costs to carry your video could get
+            expensive! If your video sharing is not working, it's unfortunate but you should still be able to
+            have text chat conversations as normal.
+            </p>
+
+            <h2>Styling Your Messages</h2>
+
+            <p>
+            BareRTC supports Markdown syntax for your chat messages. You can make text <strong>bold</strong>
+            by putting asterisks around part of it, <strong>**like this**</strong> or make text italic with
+            <em>*single asterisks*</em>.
+            </p>
+
+            <p>
+            Hyperlinks you paste that begin with https:// will be clickable as-is, or you can create a custom
+            label for it by typing e.g. <code>[click my link](https://www.wikipedia.org/)</code>.
             </p>
         </div>
     </div>

web/templates/chat.html

@@ -160,10 +160,10 @@
         <!-- Top header panel -->
         <header class="chat-header">
             <div class="columns is-mobile">
-                <div class="column is-narrow">
+                <div class="column is-narrow pr-1">
                     <strong class="is-6">{{AsHTML .Config.Branding}}</strong>
                 </div>
-                <div class="column">
+                <div class="column px-1">
                     <!-- Stop/Start video buttons -->
                     <button type="button"
                         v-if="webcam.active"
@@ -184,14 +184,14 @@
                     <!-- Mute/Unmute my mic buttons (if streaming)-->
                     <button type="button"
                         v-if="webcam.active && !webcam.muted"
-                        class="button is-small is-danger is-outlined ml-2"
+                        class="button is-small is-danger is-outlined ml-1 px-1"
                         @click="muteMe()">
                         <i class="fa fa-microphone mr-2"></i>
                         Mute
                     </button>
                     <button type="button"
                         v-if="webcam.active && webcam.muted"
-                        class="button is-small is-danger ml-2"
+                        class="button is-small is-danger ml-1 px-1"
                         @click="muteMe()">
                         <i class="fa fa-microphone mr-2"></i>
                         Unmute
@@ -200,16 +200,18 @@
                     <!-- Watchers button -->
                     <button type="button"
                         v-if="webcam.active"
-                        class="button is-small is-info is-outlined ml-2"
+                        class="button is-small is-info is-outlined ml-1 px-1"
                         @click="showViewers()">
                         <i class="fa fa-eye mr-2"></i>
                         [[Object.keys(webcam.watching).length]]
                     </button>
                 </div>
-                <div class="column is-narrow">
+                <div class="column is-narrow pl-1">
-                    <a href="/about" target="_blank" class="button is-small is-link">About</a>
+                    <a href="/about" target="_blank" class="button is-small is-link px-2">
+                        <i class="fa fa-info-circle"></i>
+                    </a>
                     <button type="button"
-                        class="button is-small is-grey"
+                        class="button is-small is-light ml-1 px-2"
                         @click="showSettings()"
                         title="Chat Settings">
                         <i class="fa fa-gear"></i>