update javascript and neaten up layout

app/assets/javascripts/landing.js

@@ -134,6 +134,14 @@
       }
     });
 
+    $('.center-panel-wrapper').on('keyup', '.meeting-name', function (event, msg) {
+      var newId = $(this).val();
+      Meeting.getInstance().setMeetingId(newId);
+      $(".page-wrapper.meetings").data('id', newId);
+      $('.meeting-url').val(Meeting.getInstance().getURL());
+      $('.join-meeting-title').html(I18n.join_title.replace(/%{id}/, newId));
+    })
+
     // enable tooltips
     var options = {
       selector: '.has-tooltip',
@@ -148,7 +156,9 @@
     $(document).tooltip(options);
 
     // focus name input or join button
-    if ($('.meeting-user-name').is(':visible')) {
+    if ($('.meeting-name').is(':visible')) {
+      $('.meeting-name').focus();
+    } else if ($('.meeting-user-name').is(':visible')) {
       $('.meeting-user-name').focus();
     } else {
       $('.meeting-join').focus();
@@ -156,15 +166,6 @@
   };
 
   var initIndex = function() {
-    $('.generate-link').click (function (e) {
-      e.preventDefault();
-      var newId = Math.trunc(Math.random() * 1000000000);
-      Meeting.getInstance().setMeetingId(newId);
-      $(".page-wrapper.meetings").data('id', newId);
-      $('.meeting-url').val(Meeting.getInstance().getURL());
-    });
-
-    $('.generate-link').click();
 
     $('ul.previously-joined').empty();
     var joinedMeetings = localStorage.getItem('joinedMeetings');

app/assets/stylesheets/shared.scss

@@ -26,6 +26,10 @@ html, body {
   background: #ffffff;
 }
 
+.container-fluid {
+  height: 100%;
+}
+
 .background {
   height: 350px;
   width: 100%;
@@ -68,11 +72,16 @@ body[data-controller=landing][data-action=rooms].app-background {
 .center-block {
   float: none;
 }
+.center-panel-wrapper {
+  height: 100%;
+}
 .center-panel {
+  height: 100%;
   .center-panel-size {
     max-width: 1200px
   }
   .center-panel-content-size {
+    height: 100%;
     max-width: 1100px;
   }
 
@@ -157,3 +166,16 @@ a.signin-link {
     color: #444;
   }
 }
+
+.verticle-line {
+  // parent must be position relative to work
+  width: 1px;
+  background-color: lightgray;
+  height: 100%;
+  position: absolute;
+  left: 50%;
+}
+
+.invite-join-wrapper {
+  position: relative;
+}

app/views/landing/index.html.erb

@@ -36,20 +36,21 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
             </div>
           </div>
 
-          <div class="row">
+          <div class="row invite-join-wrapper">
             <div class="col-xs-6">
               <div class="title-wrapper text-center">
-                <div class="title">
+                <div class="title-invite">
                   <h2><%= t('invite') %></h2>
                   <span><%= t('invite_description') %></span>
                 </div>
               </div>
               <%= render 'shared/meeting_url', hidden: false %>
             </div>
+            <div class="verticle-line"></div>
             <div class="col-xs-6">
               <div class="title-wrapper text-center">
-                <div class="title">
+                <div class="title-join">
-                  <h2><%= t('join_session_id', id: '<meeting-name>') %></h2>
+                  <h2 class="join-meeting-title"><%= t('join') %></h2>
                 </div>
               </div>
               <%= render 'shared/join_form' %>

app/views/shared/_meeting_url.html.erb

@@ -17,11 +17,6 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
   <div class="input-group">
     <div class="meeting-url-group">
       <input type="text" class="form-control meeting-url"/>
-      <% if params[:action] == 'index' %>
-        <i class="fa fa-refresh generate-link has-tooltip" aria-hidden="true"
-           title="<%= t('url_refresh_hint') %>"
-        ></i>
-      <% end %>
     </div>
 
     <span class="input-group-btn">

config/locales/en-us.yml

@@ -43,6 +43,7 @@ en-US:
   client:
     are_you_sure: Are you sure?
     delete_recording: Delete recording
+    join_title: Join "%{id}"
     meeting_ended: Meeting was ended
     meeting_started: Meeting was started
     no_recordings: No Recordings
@@ -72,7 +73,7 @@ en-US:
   invite_description: (share this link below to invite others to this meeting)
   join: Join
   join_session: Join the current meeting
-  join_session_id: Join "%{id}"
+  join_session_id: Join %{id}
   join_session_user: Join %{name} meeting
   logged_in_description_html: You are logged in as %{link}
   login: login
@@ -109,7 +110,6 @@ en-US:
   unlisted: Unlisted
   unpublished: Unpublished
   url_copy_explanation: Copy this URL to invite others to the meeting
-  url_refresh_hint: Generate a new meeting URL
   video: Video
   views: Views
   wait_for_mod_msg: Looks like you're the first one here...