From 3529e97a08834062ceafc47c7c1ff7008892bdbd Mon Sep 17 00:00:00 2001 From: Zachary Chai Date: Mon, 24 Oct 2016 10:56:57 -0400 Subject: [PATCH 1/4] header layout --- app/assets/stylesheets/application.css | 2 +- app/assets/stylesheets/shared.scss | 57 ++++++++++++++++++++++++++ app/views/layouts/application.html.erb | 37 +++++++++++++++-- 3 files changed, 91 insertions(+), 5 deletions(-) create mode 100644 app/assets/stylesheets/shared.scss diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index a15c8c86..6f2b6eff 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -10,8 +10,8 @@ * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * - *= require_tree . *= require jquery-ui *= require dataTables/jquery.dataTables + *= require_tree . *= require_self */ diff --git a/app/assets/stylesheets/shared.scss b/app/assets/stylesheets/shared.scss new file mode 100644 index 00000000..afa20028 --- /dev/null +++ b/app/assets/stylesheets/shared.scss @@ -0,0 +1,57 @@ +@import "bootstrap-sprockets"; +@import "bootstrap"; +@import "bootstrap-social"; +@import "font-awesome"; + + +html, body { + width: 100%; + height: 100%; +} + +.header { + margin: 20px 40px; + + .logo { + max-width: 150px; + max-height: 50px; + } +} + +.footer { + margin: 20px; +} + +.page-header { + margin-top: 60px; + border: 0; +} + +.vertical-center { + display: inline-block; + vertical-align: middle; + float: none; +} + +.content-box { + .center-block { + float: none; + } + + .input-spacing { + margin-top: 15px; + } + + .panel-footer { + padding: 35px; + background-color: white; + } + + .panel-body { + padding-bottom: 40px; + } + + .title-wrapper { + margin-bottom: 30px; + } +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 167c983b..e85c3218 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -14,12 +14,41 @@ -
-
- <%= link_to image_tag("bbb-logo.png", :alt => "BigBlueButton Demo", :class => "center-block"), root_path %> -
+
+ + <%= link_to image_tag("bbb-logo.png", :alt => "BigBlueButton Demo", :class => "logo"), root_path %> + +
+ <%= yield %> + + +
+ Powered by BigBlueButton +
+ From 551b64bb592791cc979dee4cc893d0e533e034da Mon Sep 17 00:00:00 2001 From: Zachary Chai Date: Tue, 25 Oct 2016 10:10:27 -0400 Subject: [PATCH 2/4] shared components for redesigned layout --- app/assets/stylesheets/landing.scss | 12 --- app/assets/stylesheets/narrow-jumbotron.css | 79 ------------------- app/assets/stylesheets/shared.scss | 12 +-- app/views/landing/_footer_message.html.erb | 3 - .../landing/_footer_oauth_append.html.erb | 15 ---- app/views/landing/_join_form.html.erb | 32 -------- app/views/shared/_center_panel.html.erb | 14 ++++ app/views/shared/_join_form.html.erb | 9 +++ app/views/shared/_meeting_url.html.erb | 13 +++ app/views/shared/_title.html.erb | 7 ++ 10 files changed, 46 insertions(+), 150 deletions(-) delete mode 100644 app/assets/stylesheets/narrow-jumbotron.css delete mode 100644 app/views/landing/_footer_message.html.erb delete mode 100644 app/views/landing/_footer_oauth_append.html.erb delete mode 100644 app/views/landing/_join_form.html.erb create mode 100644 app/views/shared/_center_panel.html.erb create mode 100644 app/views/shared/_join_form.html.erb create mode 100644 app/views/shared/_meeting_url.html.erb create mode 100644 app/views/shared/_title.html.erb diff --git a/app/assets/stylesheets/landing.scss b/app/assets/stylesheets/landing.scss index 48ad3a1c..f33d6f8d 100644 --- a/app/assets/stylesheets/landing.scss +++ b/app/assets/stylesheets/landing.scss @@ -1,15 +1,3 @@ // 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"; -@import "bootstrap-social"; -@import "font-awesome"; - -.room { - .room-link { - margin: 0 auto; - } -} diff --git a/app/assets/stylesheets/narrow-jumbotron.css b/app/assets/stylesheets/narrow-jumbotron.css deleted file mode 100644 index a2dbf869..00000000 --- a/app/assets/stylesheets/narrow-jumbotron.css +++ /dev/null @@ -1,79 +0,0 @@ -/* 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; - } -} diff --git a/app/assets/stylesheets/shared.scss b/app/assets/stylesheets/shared.scss index afa20028..cea5f60a 100644 --- a/app/assets/stylesheets/shared.scss +++ b/app/assets/stylesheets/shared.scss @@ -10,7 +10,7 @@ html, body { } .header { - margin: 20px 40px; + padding: 20px 40px; .logo { max-width: 150px; @@ -19,20 +19,14 @@ html, body { } .footer { - margin: 20px; + padding: 20px; } .page-header { - margin-top: 60px; + margin-top: 100px; border: 0; } -.vertical-center { - display: inline-block; - vertical-align: middle; - float: none; -} - .content-box { .center-block { float: none; diff --git a/app/views/landing/_footer_message.html.erb b/app/views/landing/_footer_message.html.erb deleted file mode 100644 index ed818a1e..00000000 --- a/app/views/landing/_footer_message.html.erb +++ /dev/null @@ -1,3 +0,0 @@ -
-

Bookmark this page to reuse this meeting URL<% if @resource == "meetings" %>, or click refresh button to generate a new meeting URL<% end %>

-
diff --git a/app/views/landing/_footer_oauth_append.html.erb b/app/views/landing/_footer_oauth_append.html.erb deleted file mode 100644 index 2c3f58c7..00000000 --- a/app/views/landing/_footer_oauth_append.html.erb +++ /dev/null @@ -1,15 +0,0 @@ -
- <% if current_user.nil? %> -

You can have a personal URL (with recordings) by signing in below

- -
- <%= link_to('/auth/twitter', :class => "btn icon btn-lg btn-social-icon btn-twitter") do %> - - <% end %> - <%= link_to('/auth/google', :class => "btn icon btn-lg btn-social-icon btn-google") do %> - - <% end %> -
- <% end %> -
-
diff --git a/app/views/landing/_join_form.html.erb b/app/views/landing/_join_form.html.erb deleted file mode 100644 index f3cf610f..00000000 --- a/app/views/landing/_join_form.html.erb +++ /dev/null @@ -1,32 +0,0 @@ -
- -

-
-
-
- <%= resource_url(@resource, @meeting_token) %> -
- <% if @refreshable %> - - <% end %> -
-
-

- - -
-
- <% if current_user.nil? %> -
- - -
- <% else %> - - <% end %> - -
-
-
diff --git a/app/views/shared/_center_panel.html.erb b/app/views/shared/_center_panel.html.erb new file mode 100644 index 00000000..cc3395ec --- /dev/null +++ b/app/views/shared/_center_panel.html.erb @@ -0,0 +1,14 @@ +
+
+
+
+
+

+ <%= yield :title %> +

+ <%= yield %> +
+ <%= yield :footer %> +
+
+
diff --git a/app/views/shared/_join_form.html.erb b/app/views/shared/_join_form.html.erb new file mode 100644 index 00000000..16f45284 --- /dev/null +++ b/app/views/shared/_join_form.html.erb @@ -0,0 +1,9 @@ +
+ <% @current_user = user %> + <%= text_field :current_user, :name, class: 'form-control meeting-user-name', placeholder: 'Enter your name' %> + + + +
diff --git a/app/views/shared/_meeting_url.html.erb b/app/views/shared/_meeting_url.html.erb new file mode 100644 index 00000000..88056e75 --- /dev/null +++ b/app/views/shared/_meeting_url.html.erb @@ -0,0 +1,13 @@ + diff --git a/app/views/shared/_title.html.erb b/app/views/shared/_title.html.erb new file mode 100644 index 00000000..21e3ea50 --- /dev/null +++ b/app/views/shared/_title.html.erb @@ -0,0 +1,7 @@ +
+
+

+ <%= title %> +

+
+
From d3ad6980d9fcdb8b446ed961fb423545e67f460e Mon Sep 17 00:00:00 2001 From: Zachary Chai Date: Tue, 25 Oct 2016 10:11:36 -0400 Subject: [PATCH 3/4] redesigned meeting and room page --- app/assets/javascripts/landing.js | 66 ++++++++++++++++++++---------- app/models/user.rb | 8 ++++ app/views/landing/meeting.html.erb | 45 +++++++++++--------- app/views/landing/room.html.erb | 47 +++++++++++++-------- 4 files changed, 107 insertions(+), 59 deletions(-) diff --git a/app/assets/javascripts/landing.js b/app/assets/javascripts/landing.js index b3e24d18..9ede6b12 100644 --- a/app/assets/javascripts/landing.js +++ b/app/assets/javascripts/landing.js @@ -1,10 +1,12 @@ (function() { - var initIndex = function() { - $('#join_form_button').click (function (event) { + var init = function() { + + $('.meeting-join').click (function (event) { + var url = $('.meeting-url').val(); + var name = $('.meeting-user-name').val(); $.ajax({ - url : $(this).data ('url') + "?name=" + $('#join_form_name').val(), + url : url + "/join?name=" + name, dataType : "json", - async : true, type : 'GET', success : function(data) { $(location).attr("href", data.response.join_url); @@ -16,30 +18,50 @@ }); }); - $('#url_form_button').click (function (event) { - $.ajax({ - url : $(this).data ('url'), - dataType : "json", - async : true, - type : 'GET', - success : function(data) { - $('#meeting_url').html(data.response.meeting_url); - $('#text_meeting_url').attr("href", data.response.meeting_url); - $('#text_meeting_url').text(data.response.meeting_url); - }, - error : function(xhr, status, error) { - }, - complete : function(xhr, status) { - } - }); + $('.meeting-url-copy').click (function (e) { + meetingURL = $('.meeting-url'); + meetingURL.select(); + document.execCommand("copy"); + meetingURL.blur(); }); }; + var initIndex = function() { + + $('.generate-link').click (function (e) { + e.preventDefault(); + var link = window.location.protocol + + '//' + + window.location.hostname + + '/' + + 'meetings/' + + Math.trunc(Math.random() * 1000000000); + + $('.meeting-url').val(link); + }); + + + $('.meeting-url').val(''); + $('.generate-link').click(); + }; + + var initRooms = function() { + meetingURL = $('.meeting-url'); + var link = window.location.protocol + + '//' + + window.location.hostname + + meetingURL.data('path'); + meetingURL.val(link); + }; + $(document).on("turbolinks:load", function() { + init(); if ($("body[data-controller=landing]").get(0)) { - if ($("body[data-action=meeting]").get(0) || $("body[data-action=room]").get(0)) { + if ($("body[data-action=meetings]").get(0)) { initIndex(); + } else if ($("body[data-action=rooms]").get(0)) { + initRooms(); } } }); -}).call(this); \ No newline at end of file +}).call(this); diff --git a/app/models/user.rb b/app/models/user.rb index 9cfb2add..0d9f7aa5 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -19,6 +19,14 @@ class User < ApplicationRecord auth_hash['info']['nickname'] end + def ownership_name + if username.end_with? 's' + "#{username}'" + else + "#{username}'s" + end + end + def room_url "/rooms/#{username}" end diff --git a/app/views/landing/meeting.html.erb b/app/views/landing/meeting.html.erb index 7ae51bf0..d853e2fc 100644 --- a/app/views/landing/meeting.html.erb +++ b/app/views/landing/meeting.html.erb @@ -1,28 +1,33 @@ - -
-
-
-
- <% if !current_user.nil? %> - Hello <%= current_user.name %> - <%= link_to "Logout", user_logout_url() %> - <% if current_user.username %> -
<%= link_to 'Personal Room', current_user.room_url %>
- <% else %> -
<%= link_to 'Set Username', edit_user_path(current_user) %>
- <% end %> - <% end %> -
+ +<% content_for :title do %> +
+ Hi Everyone +
+ + The session will be taking place using the following URL + +<% end %> + +<% content_for :footer do %> +
+
+ Click refresh to generate a new meeting URL
+<% end %> -
- <%= render 'landing/join_form' %> +
+
- <%= render 'landing/footer_message' %> + <%= render 'shared/title', title: 'Start A New Session' %> + + <%= render layout: 'shared/center_panel' do %> +
+ <%= render 'shared/meeting_url', hidden: false %> + <%= render 'shared/join_form', user: current_user %> +
+ <% end %> - <%= render 'landing/footer_oauth_append' %>
-
diff --git a/app/views/landing/room.html.erb b/app/views/landing/room.html.erb index b19b97b3..55870e01 100644 --- a/app/views/landing/room.html.erb +++ b/app/views/landing/room.html.erb @@ -1,23 +1,36 @@ - -
+<% if current_user %> + <% page_title = "Welcome, #{current_user.name.split(' ').first}" %> +<% else %> + <% page_title = "Welcome to #{@user.ownership_name} Meeting Space" %> +<% end %> -
-
-
- <% if admin? %> - Hello <%= current_user.name %> - <%= link_to "Logout", user_logout_url() %> +<% content_for :title do %> +
+ <% if current_user == @user %> + Start a new session + <% elsif current_user && current_user != @user %> + <%= "Join #{@user.ownership_name} session" %> + <% else %> + Join the current session + <% end %> +
+<% end %> + +
+
+ + <%= render 'shared/title', title: page_title %> + + <%= render layout: 'shared/center_panel' do %> +
+ <% if current_user == @user %> + <%= render 'shared/meeting_url', hidden: false %> <% else %> - <%= link_to "Login", "/auth/#{@user.provider}" %> + <%= render 'shared/meeting_url', hidden: true %> <% end %> + <%= render 'shared/join_form', user: current_user %>
-
+ <% end %> +
- -
- <%= render 'landing/join_form' %> - - <%= render 'landing/footer_message' %> -
-
From f71f46427fd70a1ed822cf107d7494c19abb7211 Mon Sep 17 00:00:00 2001 From: Zachary Chai Date: Tue, 25 Oct 2016 10:46:30 -0400 Subject: [PATCH 4/4] cleanup controllers and routes --- app/controllers/landing_controller.rb | 21 +++------------------ config/routes.rb | 13 ++++--------- 2 files changed, 7 insertions(+), 27 deletions(-) diff --git a/app/controllers/landing_controller.rb b/app/controllers/landing_controller.rb index e500e1a2..689080ef 100644 --- a/app/controllers/landing_controller.rb +++ b/app/controllers/landing_controller.rb @@ -10,18 +10,6 @@ class LandingController < ApplicationController end end - # GET /token.json - def new_meeting - respond_to do |format| - meeting_url = resource_url('meetings', helpers.new_meeting_token) - format.json { render :json => { :messageKey => "ok", :message => "New meeting URL created", :status => :ok, :response => { :meeting_url => meeting_url} }, :status => status } - end - end - - def meeting - render_meeting - end - def admin? @user == current_user end @@ -30,16 +18,13 @@ class LandingController < ApplicationController private def render_meeting - @resource = params[:resource] - @meeting_token = params[:id] || @meeting_token = helpers.new_meeting_token - @refreshable = (params[:resource] == 'meetings' && !params.has_key?(:id)) + params[:action] = 'meetings' render :action => 'meeting' end def render_room - @resource = params[:resource] - @meeting_token = params[:id] - @user = User.find_by(username: @meeting_token) + params[:action] = 'rooms' + @user = User.find_by(username: params[:id]) if @user.nil? redirect_to root_path return diff --git a/config/routes.rb b/config/routes.rb index a980cfba..9cf70c7a 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,20 +1,15 @@ Rails.application.routes.draw do resources :users, only: [:edit, :update] - - # This should be removed once before being released - get '/auth/:provider/callback', to: 'sessions#create' - ########################################################### - - get '/users/auth/:provider/callback', to: 'sessions#create' get '/users/logout', to: 'sessions#destroy', as: :user_logout - get '/meetings/join/:resource/:id', to: 'bbb#join', as: :bbb_join - get '/meetings/new', to: 'landing#new_meeting', as: :new_meeting + + get '/auth/:provider/callback', to: 'sessions#create' # There are two resources [meetings|rooms] # meetings offer a landing page for NON authenticated users to create and join session in BigBlueButton # rooms offer a customized landing page for authenticated users to create and join session in BigBlueButton get '/:resource(/:id)', to: 'landing#index', as: :resource + get '/:resource/:id/join', to: 'bbb#join', as: :bbb_join - root to: 'landing#meeting', :resource => "meetings" + root to: 'landing#index', :resource => "meetings" # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html end