increase width of center panel and make responsive

app/assets/javascripts/recordings.coffee

@@ -9,7 +9,7 @@ class @Recordings
       data: [],
       rowId: 'id',
       paging: false,
-      dom: 'lrtip',
+      dom: 't',
       info: false,
       order: [[ 0, "desc" ]],
       language: {

app/assets/stylesheets/landing.scss

@@ -2,22 +2,6 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-.center-panel-wrapper {
-  .join-form {
-    width: 100%;
-  }
-
-  .meeting-url-wrapper {
-    .meeting-url {
-      cursor: default;
-    }
-  }
-
-  .loading-wrapper {
-    text-align: center;
-  }
-}
-
 .rooms {
 
   .table-wrapper {

app/assets/stylesheets/shared.scss

@@ -7,17 +7,17 @@
 html, body {
   width: 100%;
   height: 100%;
+  background: #ffffff;
 }
 
 .app-background {
-  background: #4dc0a2;
+  background: #ffffff;
-  background: -moz-linear-gradient(top, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: -moz-linear-gradient(top, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #ffffff 100%);
-  background: -webkit-gradient(left top, left bottom, color-stop(0%, #4dc0a2), color-stop(35%, #4dc0a2), color-stop(35%, #ffffff), color-stop(100%, #ffffff));
+  background: -webkit-gradient(left top, left bottom, color-stop(0%, #4dc0a2), color-stop(350px, #4dc0a2), color-stop(350px, #ffffff), color-stop(100%, #ffffff));
-  background: -webkit-linear-gradient(top, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: -webkit-linear-gradient(top, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #ffffff 100%);
-  background: -o-linear-gradient(top, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: -o-linear-gradient(top, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #ffffff 100%);
-  background: -ms-linear-gradient(top, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: -ms-linear-gradient(top, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #ffffff 100%);
-  background: linear-gradient(to bottom, #4dc0a2 0%, #4dc0a2 35%, #ffffff 35%, #ffffff 100%);
+  background: linear-gradient(to bottom, #4dc0a2 0%, #4dc0a2 350px, #ffffff 350px, #ffffff 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dc0a2', endColorstr='#ffffff', GradientType=0 );
 }
 
 #alerts {
@@ -52,7 +52,10 @@ html, body {
     float: none;
   }
   .center-panel-size {
-    width: 650px;
+    max-width: 900px
+  }
+  .center-panel-conent-size {
+    max-width: 800px;
   }
 
   .input-spacing {
@@ -71,4 +74,26 @@ html, body {
   .title-wrapper {
     margin-bottom: 30px;
   }
+
+  .join-form-wrapper {
+    .center-block {
+      max-width: 400px;
+    }
+    .join-form {
+      width: 100%;
+    }
+    .btn {
+      width: initial;
+    }
+  }
+
+  .meeting-url-wrapper {
+    .meeting-url {
+      cursor: default;
+    }
+  }
+
+  .loading-wrapper {
+    text-align: center;
+  }
 }

app/views/landing/_rooms_center_panel.html.erb

@@ -11,14 +11,12 @@
 <% end %>
 
 <%= render layout: 'shared/center_panel' do %>
-  <div class="center-block col-sm-8">
+  <div class="center-block center-panel-conent-size col-xs-12">
     <% if admin? %>
       <%= render 'shared/meeting_url', hidden: false %>
     <% else %>
       <%= render 'shared/meeting_url', hidden: true %>
     <% end %>
-    <div class="join-form-wrapper">
+    <%= render 'shared/join_form' %>
-      <%= render 'shared/join_form' %>
-    </div>
   </div>
 <% end %>

app/views/landing/meetings.html.erb

@@ -24,7 +24,7 @@
 
     <div class="center-panel-wrapper">
       <%= render layout: 'shared/center_panel' do %>
-        <div class="center-block col-sm-8">
+        <div class="center-block center-panel-conent-size col-xs-12">
           <%= render 'shared/meeting_url', hidden: false %>
           <%= render 'shared/join_form' %>
         </div>

app/views/layouts/application.html.erb

@@ -4,6 +4,7 @@
     <title>Greenlight</title>
     <%= csrf_meta_tags %>
     <%= action_cable_meta_tag %>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
@@ -31,7 +32,9 @@
           <%= t('are_you', name: @user.username) %> |
           <%= link_to t('login'), "/auth/#{@user.provider}" %>
         <% else %>
-          <%= t('oauth_signup') %>
+          <span class="signup-description hidden-xs">
+            <%= t('oauth_signup') %>
+          </span>
           <%= link_to('/auth/twitter', :class => "btn icon btn-lg btn-social-icon btn-twitter") do %>
             <span class="fa fa-twitter"></span>
           <% end %>

app/views/shared/_center_panel.html.erb

@@ -1,6 +1,6 @@
 <div class="center-panel">
   <div class="row">
-    <div class="center-block center-panel-size">
+    <div class="center-block center-panel-size col-xs-12">
       <div class="panel panel-default">
         <div class="panel-body">
           <h3 class="title-wrapper text-center">

app/views/shared/_join_form.html.erb

@@ -1,36 +1,40 @@
-<div class="join-form input-group input-spacing">
+<div class="join-form-wrapper">
-  <% if current_user %>
+  <div class="center-block">
-    <% @current_user = current_user %>
+    <div class="join-form input-group input-spacing">
-    <%= text_field :current_user, :name, class: 'form-control meeting-user-name', type: 'hidden' %>
+      <% if current_user %>
-  <% else %>
+        <% @current_user = current_user %>
-    <%= text_field :nil, :nil, class: 'form-control meeting-user-name', placeholder: t('enter_name') %>
+        <%= text_field :current_user, :name, class: 'form-control meeting-user-name', type: 'hidden' %>
-  <% end %>
+      <% else %>
-  <% if admin? %>
+        <%= text_field :nil, :nil, class: 'form-control meeting-user-name', placeholder: t('enter_name') %>
-    <% if @meeting_running %>
+      <% end %>
-      <div class="col-sm-6">
+      <% if admin? %>
-        <button type="button" class="btn btn-primary meeting-join pull-right">
+        <% if @meeting_running %>
+          <div class="col-sm-6">
+            <button type="button" class="btn btn-primary meeting-join pull-right">
+              <%= t('join') %>
+            </button>
+          </div>
+          <div class="col-sm-6">
+            <button type="button" class="btn btn-danger meeting-end pull-left">
+              <%= t('end') %>
+            </button>
+          </div>
+        <% else %>
+          <button type="button" class="btn btn-primary center-block meeting-join">
+            <%= t('start') %>
+          </button>
+        <% end %>
+      <% elsif current_user %>
+        <button type="button" class="btn btn-primary center-block meeting-join">
           <%= t('join') %>
         </button>
-      </div>
+      <% else %>
-      <div class="col-sm-6">
+        <span class="input-group-btn">
-        <button type="button" class="btn btn-danger meeting-end pull-left">
+          <button type="button" class="btn btn-primary meeting-join">
-          <%= t('end') %>
+            <%= t('join') %>
-        </button>
+          </button>
-      </div>
+        </span>
-    <% else %>
+      <% end %>
-      <button type="button" class="btn btn-primary center-block meeting-join">
+    </div>
-        <%= t('start') %>
+  </div>
-      </button>
-    <% end %>
-  <% elsif current_user %>
-    <button type="button" class="btn btn-primary center-block meeting-join">
-      <%= t('join') %>
-    </button>
-  <% else %>
-    <span class="input-group-btn">
-      <button type="button" class="btn btn-primary meeting-join">
-        <%= t('join') %>
-      </button>
-    </span>
-  <% end %>
 </div>