Added some style to the landing page

Gemfile

@@ -56,3 +56,5 @@ gem 'bigbluebutton-api-ruby'
 
 gem 'bootstrap-sass', '3.3.0.0'
 gem 'bootstrap-social-rails', '~> 4.12'
+gem 'jquery-ui-rails'
+gem 'jquery-datatables-rails', '~> 3.4.0'

Gemfile.lock

@@ -75,10 +75,17 @@ GEM
     jbuilder (2.6.0)
       activesupport (>= 3.0.0, < 5.1)
       multi_json (~> 1.2)
+    jquery-datatables-rails (3.4.0)
+      actionpack (>= 3.1)
+      jquery-rails
+      railties (>= 3.1)
+      sass-rails
     jquery-rails (4.2.1)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jquery-ui-rails (5.0.5)
+      railties (>= 3.2.16)
     json (1.8.3)
     jwt (1.5.4)
     listen (3.0.8)
@@ -211,7 +218,9 @@ DEPENDENCIES
   coffee-rails (~> 4.2)
   devise (= 4.2.0)
   jbuilder (~> 2.5)
+  jquery-datatables-rails (~> 3.4.0)
   jquery-rails
+  jquery-ui-rails
   listen (~> 3.0.5)
   omniauth (= 1.3.1)
   omniauth-google-oauth2 (= 0.4.1)
@@ -228,4 +237,4 @@ DEPENDENCIES
   web-console
 
 BUNDLED WITH
-   1.13.2
+   1.13.5

app/assets/javascripts/application.js

@@ -10,7 +10,8 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require jquery
+//= require jquery2
-//= require jquery_ujs
+//= require jquery-ui
+//= require bootstrap-sprockets
 //= require turbolinks
 //= require_tree .

app/assets/stylesheets/application.css

@@ -11,5 +11,7 @@
  * It is generally better to create a new file per style scope.
  *
  *= require_tree .
+ *= require jquery-ui
+ *= require dataTables/jquery.dataTables
  *= require_self
  */

app/assets/stylesheets/landing.scss

@@ -1,3 +1,7 @@
 // Place all the styles related to the landing controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+// Bootstrap
+@import "bootstrap-sprockets";
+@import "bootstrap";

app/assets/stylesheets/narrow-jumbotron.css

@@ -0,0 +1,79 @@
+/* Space out content a bit */
+body {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+/* Everything but the jumbotron gets side spacing for mobile first views */
+.header,
+.marketing,
+.footer {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+/* Custom page header */
+.header {
+  padding-bottom: 1rem;
+  border-bottom: .05rem solid #e5e5e5;
+}
+/* Make the masthead heading the same height as the navigation */
+.header h3 {
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 3rem;
+}
+
+/* Custom page footer */
+.footer {
+  padding-top: 1.5rem;
+  color: #777;
+  border-top: .05rem solid #e5e5e5;
+}
+
+/* Customize container */
+@media (min-width: 48em) {
+  .container {
+    max-width: 72rem;
+  }
+}
+.container-narrow > hr {
+  margin: 2rem 0;
+}
+
+/* Main marketing message and sign up button */
+.jumbotron {
+  text-align: center;
+  border-bottom: .05rem solid #e5e5e5;
+}
+.jumbotron .btn {
+  padding: .75rem 1.5rem;
+  font-size: 1.5rem;
+}
+
+/* Supporting marketing content */
+.marketing {
+  margin: 3rem 0;
+}
+.marketing p + h4 {
+  margin-top: 1.5rem;
+}
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 48em) {
+  /* Remove the padding we set earlier */
+  .header,
+  .marketing,
+  .footer {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  /* Space out the masthead */
+  .header {
+    margin-bottom: 2rem;
+  }
+  /* Remove the bottom border on the jumbotron for visual effect */
+  .jumbotron {
+    border-bottom: 0;
+  }
+}

app/controllers/landing_controller.rb

@@ -1,15 +1,6 @@
 class LandingController < ApplicationController
   def index
     @meeting_token = params[:id] || @meeting_token = rand.to_s[2..10]
-    @meeting_url = meeting_url(@meeting_token)
+    @meeting_url = helpers.meeting_url(@meeting_token)
-  end
-  
-  private
-  def meeting_url(meeting_token)
-    _meeting_url = "#{request.original_url}"
-    _meeting_url += "meeting" if ( request.original_url == "#{request.base_url}/" )
-    _meeting_url += "/" unless _meeting_url.end_with?('/')
-    _meeting_url += "#{meeting_token}" if !params.has_key?(:id)
-    _meeting_url
   end
 end

app/helpers/landing_helper.rb

@@ -1,2 +1,9 @@
 module LandingHelper
+  def meeting_url(meeting_token)
+    _meeting_url = "#{request.original_url}"
+    _meeting_url += "meeting" if ( request.original_url == "#{request.base_url}/" )
+    _meeting_url += "/" unless _meeting_url.end_with?('/')
+    _meeting_url += "#{meeting_token}" if !params.has_key?(:id)
+    _meeting_url.gsub(/\/+$/, '')
+  end
 end

app/views/landing/index.html.erb

@@ -1,35 +1,48 @@
-<h1>Landing#index</h1>
+<div class='container'>
-<div id="landing_page_url">
-  <p><span id="meeting_url"><%= @meeting_url %></span></p>
-</div>
 
-<div id="landing_page_join_form">
+  <!-- Body -->
-  <form action="#">
+  <div class='body'>
-    <input type="text" name="name" value="" placement="Your name">
-    <input type="submit" value="Join">
-  </form>
-</div>
 
-<div id="landing_page_invite_text">
+    <div class="container">
-  <table border="1">
+      <div class="jumbotron">
-    <tr>
+        <!-- Meeting URL -->
-      <td>
+        <h4 class="display-3">
+          <div id="landing_page_url" class="center-block">
+            <span id="meeting_url"><%= @meeting_url %></span>
+          </div>
+        </h4>
+
+        <!-- Join form -->
+        <div id="landing_page_join_form">
+          <form class="form-inline">
+            <div class="form-group">
+              <label for="name" class="sr-only">Name</label>
+              <input type="text" class="form-control input" id="name" placeholder="Your name">
+            </div>
+            <button type="submit" class="btn btn-success">Join</button>
+          </form>
+        </div>
+      </div>
+
+      <figure class=highlight><pre><figcaption class="text" data-lang="text">
         <p>Hi Everyone</p>
-        <br>
         <p>The meeting will be at this URL</p>
-        <br>
         <p><a href="<%= @meeting_url %>"><span id="meeting_url"><%= @meeting_url %></a></p>
-        <br>
         <p>Please join!</p>
-      </td>
+      </figcaption></pre></figure>
-    </tr>
-  </table>
-</div>
 
-<div id="landing_page_footer_message">
+      <div id="landing_page_footer_message">
-  <p>Bookmark this page to reuse this meeting URL, or click refresh button to generate a new meeting URL</p>
+        <p>Bookmark this page to reuse this meeting URL, or click refresh button to generate a new meeting URL</p>
-</div>
+      </div>
 
-<div id="landing_page_footer_oauth_append">
+      <div id="landing_page_footer_oauth_append">
-  <p>You can have a personal URL (with recordings) by signing in below</p>
+        <p>You can have a personal URL (with recordings) by signing in below</p>
-</div>
+      </div>
+
+        
+    </div>
+    
+    
+  </div>
+
+</div>

app/views/layouts/application.html.erb

@@ -9,6 +9,17 @@
   </head>
 
   <body>
+    <!-- Messages -->
+    <div id='messages' class='hidden'>
+    </div>
+
+    <!-- Header -->
+    <div class='navbar'>
+      <div class='container'>
+        <%= image_tag "bbb-logo.png", :alt => "BigBlueButton Demo", :class => "center-block" %>
+      </div>
+    </div>
+    
     <%= yield %>
   </body>
 </html>