public/assets/css/BEM.css

@@ -9,6 +9,11 @@ p {
 	padding-left: 0.3em;
 }
 
+.url-text {
+	margin:0px;
+	padding:0px;
+}
+
 /* CONTAINERS */
 
 .wrapper {

views/login.handlebars

@@ -1,14 +1,15 @@
 <div class="wrapper">
     {{> topBar}}
+    <h2>Log In</h2>
     <div class="row row--wide">
-        <h2>Log In</h2>
+
         <div class="column column--6">
             <p>Log in to an existing channel:</p>
             {{>channelLoginForm}}
         </div>
     </div>
+    <h2>Create New</h2>
     <div class="row row--wide">
-        <h2>Create New</h2>
         <div class="column column--6">
             <p>Create a brand new channel:</p>
             {{>channelCreationForm}}

views/partials/publishForm-Channel.handlebars

@@ -2,9 +2,9 @@
     <div class="column column--3">
         <label class="label" for="channel-name-select">Channel:</label>
     </div>
-    <div class="column column--7">
+    <div class="column column--9">
         <div id="input-error-channel-select" class="info-message info-message--failure"></div>
-        <select type="text" id="channel-name-select" class="select select--primary" value="channel" onclick="toggleChannel(event)">
+        <select type="text" id="channel-name-select" class="select select--primary" value="channel" onchange="toggleChannel(event)">
         <optgroup>
             {{#if user}}
                 <option value="@{{user.userName}}" >@{{user.userName}}</option>
@@ -34,16 +34,31 @@
      const createChannelTool = document.getElementById('channel-create-details');
      const loginToChannelTool = document.getElementById('channel-login-details');
      const selectedOption = event.target.selectedOptions[0].value;
+     const urlChannel = document.getElementById('url-channel');
      if (selectedOption === 'new') {
+         // show/hide the login and new channel forms
          createChannelTool.hidden = false;
          loginToChannelTool.hidden = true;
+         // update URL
+         urlChannel.innerText = '';
      } else if (selectedOption === 'login') {
+         // show/hide the login and new channel forms
          loginToChannelTool.hidden = false;
          createChannelTool.hidden = true;
+         // update URL
+         urlChannel.innerText = '';
      } else {
+         // hide the login and new channel forms
          loginToChannelTool.hidden = true;
          createChannelTool.hidden = true;
          hideError(document.getElementById('input-error-channel-select'));
+         // update URL
+         if (selectedOption === 'none'){
+             urlChannel.innerText = '';
+         } else {
+             urlChannel.innerText = `${selectedOption}/`;
+         }
+
      }
  }
 </script>

views/partials/publishForm-Url.handlebars

@@ -5,8 +5,7 @@
     <div class="column column--9">
         <div id="input-error-claim-name" class="info-message info-message--failure"  hidden="true"></div>
         <div class="input-text--primary">
-            <span>Spee.ch/{{user.channelName}}/</span>
+            <span class="url-text">Spee.ch/</span><span id="url-channel" class="url-text">{{#if user.channelName}}{{user.channelName}}/{{/if}}</span><input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">
-            <input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">
             <span id="input-success-claim-name" class="info-message info-message--success"></span>
         </div>