lino.jorzick
/
greenlight
forked from External/greenlight
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #17 from zach-chai/redesigned_views 

Redesigned views
This commit is contained in:
Zachary Chai 2016-10-25 11:16:15 -04:00 committed by GitHub
parent 50e98e4bcd f71f46427f
commit dadaa52387
18 changed files with 242 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app/assets/javascripts/landing.js
View File

@ -1,10 +1,12 @@
(function() { (function() {
var initIndex = function() { var init = function() {
$('#join_form_button').click (function (event) {
$('.meeting-join').click (function (event) {
var url = $('.meeting-url').val();
var name = $('.meeting-user-name').val();
$.ajax({ $.ajax({
url : $(this).data ('url') + "?name=" + $('#join_form_name').val(), url : url + "/join?name=" + name,
dataType : "json", dataType : "json",
async : true,
type : 'GET', type : 'GET',
success : function(data) { success : function(data) {
$(location).attr("href", data.response.join_url); $(location).attr("href", data.response.join_url);
@ -16,29 +18,49 @@
}); });
}); });
$('#url_form_button').click (function (event) { $('.meeting-url-copy').click (function (e) {
$.ajax({ meetingURL = $('.meeting-url');
url : $(this).data ('url'), meetingURL.select();
dataType : "json", document.execCommand("copy");
async : true, meetingURL.blur();
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) {
}
});
}); });
}; };
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() { $(document).on("turbolinks:load", function() {
init();
if ($("body[data-controller=landing]").get(0)) { 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(); initIndex();
} else if ($("body[data-action=rooms]").get(0)) {
initRooms();
} }
} }
}); });

2
app/assets/stylesheets/application.css
View File

@ -10,8 +10,8 @@
* files in this directory. Styles in this file should be added after the last require_* statement. * 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. * It is generally better to create a new file per style scope.
* *
*= require_tree .
*= require jquery-ui *= require jquery-ui
*= require dataTables/jquery.dataTables *= require dataTables/jquery.dataTables
*= require_tree .
*= require_self *= require_self
*/ */

12
app/assets/stylesheets/landing.scss
View File

@ -1,15 +1,3 @@
// Place all the styles related to the landing controller here. // Place all the styles related to the landing controller here.
// They will automatically be included in application.css. // They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/ // 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;
}
}

79
app/assets/stylesheets/narrow-jumbotron.css
View File

@ -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;
}
}

51
app/assets/stylesheets/shared.scss Normal file
View File

@ -0,0 +1,51 @@
@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-social";
@import "font-awesome";
html, body {
width: 100%;
height: 100%;
}
.header {
padding: 20px 40px;
.logo {
max-width: 150px;
max-height: 50px;
}
}
.footer {
padding: 20px;
}
.page-header {
margin-top: 100px;
border: 0;
}
.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;
}
}

21
app/controllers/landing_controller.rb
View File

@ -10,18 +10,6 @@ class LandingController < ApplicationController
end end
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? def admin?
@user == current_user @user == current_user
end end
@ -30,16 +18,13 @@ class LandingController < ApplicationController
private private
def render_meeting def render_meeting
@resource = params[:resource] params[:action] = 'meetings'
@meeting_token = params[:id] || @meeting_token = helpers.new_meeting_token
@refreshable = (params[:resource] == 'meetings' && !params.has_key?(:id))
render :action => 'meeting' render :action => 'meeting'
end end
def render_room def render_room
@resource = params[:resource] params[:action] = 'rooms'
@meeting_token = params[:id] @user = User.find_by(username: params[:id])
@user = User.find_by(username: @meeting_token)
if @user.nil? if @user.nil?
redirect_to root_path redirect_to root_path
return return

8
app/models/user.rb
View File

@ -19,6 +19,14 @@ class User < ApplicationRecord
auth_hash['info']['nickname'] auth_hash['info']['nickname']
end end
def ownership_name
if username.end_with? 's'
"#{username}'"
else
"#{username}'s"
end
end
def room_url def room_url
"/rooms/#{username}" "/rooms/#{username}"
end end

3
app/views/landing/_footer_message.html.erb
View File

@ -1,3 +0,0 @@
<div id="landing_page_footer_message">
<p>Bookmark this page to reuse this meeting URL<% if @resource == "meetings" %>, or click refresh button to generate a new meeting URL<% end %></p>
</div>

15
app/views/landing/_footer_oauth_append.html.erb
View File

@ -1,15 +0,0 @@
<div id="landing_page_footer_oauth_append">
<% if current_user.nil? %>
<p>You can have a personal URL (with recordings) by signing in below</p>
<div class="text-center">
<%= link_to('/auth/twitter', :class => "btn icon btn-lg btn-social-icon btn-twitter") do %>
<span class="fa fa-twitter"></span>
<% end %>
<%= link_to('/auth/google', :class => "btn icon btn-lg btn-social-icon btn-google") do %>
<span class="fa fa-google"></span>
<% end %>
</div>
<% end %>
</div>
</div>

32
app/views/landing/_join_form.html.erb
View File

@ -1,32 +0,0 @@
<div class="jumbotron">
<!-- Meeting URL -->
<h4 class="display-3">
<div id="landing_page_url" class="center-block">
<form id="url_form" class="form-inline">
<div class="form-group">
<span id="meeting_url"><%= resource_url(@resource, @meeting_token) %></span>
</div>
<% if @refreshable %>
<button id="url_form_button" type="button" class="btn btn-default" data-url="<%= new_meeting_path() %>">
<span class="glyphicon glyphicon-refresh"></span>
</button>
<% end %>
</form>
</div>
</h4>
<!-- Join form -->
<div id="landing_page_join">
<form id="join_form" class="form-inline">
<% if current_user.nil? %>
<div class="form-group">
<label for="join_form_name" class="sr-only">Name</label>
<input id="join_form_name" type="text" class="form-control input" placeholder="Your name" required>
</div>
<% else %>
<input id="join_form_name" type="hidden" value="<%= current_user.name %>">
<% end %>
<button id="join_form_button" type="button" class="btn btn-success" data-url="<%= bbb_join_path(@resource, @meeting_token) %>">Join</button>
</form>
</div>
</div>

51
app/views/landing/meeting.html.erb
View File

@ -1,28 +1,33 @@
<!-- Body -->
<div class='body'>
<div class="page-wrapper room">
<div class="row"> <% content_for :title do %>
<div class="col-sm-2 col-sm-offset-10"> <div class="title">
<% if !current_user.nil? %> Hi Everyone
<span class="user">Hello <%= current_user.name %></span> </div>
<%= link_to "Logout", user_logout_url() %> <small>
<% if current_user.username %> The session will be taking place using the following URL
<div><%= link_to 'Personal Room', current_user.room_url %></div> </small>
<% else %> <% end %>
<div><%= link_to 'Set Username', edit_user_path(current_user) %></div>
<% content_for :footer do %>
<div class="panel-footer">
<div class="text-center">
<a href="#" class="generate-link">Click refresh</a> to generate a new meeting URL
</div>
</div>
<% end %>
<div class="page-wrapper meeting">
<div class='container-fluid'>
<%= render 'shared/title', title: 'Start A New Session' %>
<%= render layout: 'shared/center_panel' do %>
<div class="center-block col-sm-8">
<%= render 'shared/meeting_url', hidden: false %>
<%= render 'shared/join_form', user: current_user %>
</div>
<% end %> <% end %>
<% end %>
</div>
</div>
</div>
<div class="container">
<%= render 'landing/join_form' %>
<%= render 'landing/footer_message' %>
<%= render 'landing/footer_oauth_append' %>
</div> </div>
</div> </div>

41
app/views/landing/room.html.erb
View File

@ -1,23 +1,36 @@
<!-- Body --> <% if current_user %>
<div class='body'> <% page_title = "Welcome, #{current_user.name.split(' ').first}" %>
<% else %>
<% page_title = "Welcome to #{@user.ownership_name} Meeting Space" %>
<% end %>
<div class="page-wrapper room"> <% content_for :title do %>
<div class="row"> <div class="title">
<div class="col-sm-2 col-sm-offset-10"> <% if current_user == @user %>
<% if admin? %> Start a new session
<span class="user">Hello <%= current_user.name %></span> <% elsif current_user && current_user != @user %>
<%= link_to "Logout", user_logout_url() %> <%= "Join #{@user.ownership_name} session" %>
<% else %> <% else %>
<%= link_to "Login", "/auth/#{@user.provider}" %> Join the current session
<% end %> <% end %>
</div> </div>
</div> <% end %>
</div>
<div class="container"> <div class="page-wrapper room">
<%= render 'landing/join_form' %> <div class="container-fluid">
<%= render 'landing/footer_message' %> <%= render 'shared/title', title: page_title %>
<%= render layout: 'shared/center_panel' do %>
<div class="center-block col-sm-8">
<% if current_user == @user %>
<%= render 'shared/meeting_url', hidden: false %>
<% else %>
<%= render 'shared/meeting_url', hidden: true %>
<% end %>
<%= render 'shared/join_form', user: current_user %>
</div> </div>
<% end %>
</div>
</div> </div>

37
app/views/layouts/application.html.erb
View File

@ -14,12 +14,41 @@
</div> </div>
<!-- Header --> <!-- Header -->
<div class='navbar'> <div class='header'>
<div class='container'> <span class="logo-wrapper pull-left">
<%= 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 %>
</div> </span>
<span class="signup pull-right">
<% if current_user %>
<%= current_user.name %> |
<% if current_user.username %>
<%= link_to 'my room', current_user.room_url %> |
<% else %>
<%= link_to 'my room', edit_user_path(current_user) %> |
<% end %>
<%= link_to 'logout', user_logout_url %>
<% elsif @user %>
Are you <%= @user.username %> ? |
<%= link_to 'login', "/auth/#{@user.provider}" %>
<% else %>
Signup for customized sessions
<%= link_to('/auth/twitter', :class => "btn icon btn-lg btn-social-icon btn-twitter") do %>
<span class="fa fa-twitter"></span>
<% end %>
<%= link_to('/auth/google', :class => "btn icon btn-lg btn-social-icon btn-google") do %>
<span class="fa fa-google"></span>
<% end %>
<% end %>
</span>
</div> </div>
<!-- End of Header -->
<%= yield %> <%= yield %>
<!-- Footer -->
<div class='footer text-center'>
Powered by BigBlueButton
</div>
<!-- End of Footer -->
</body> </body>
</html> </html>

14
app/views/shared/_center_panel.html.erb Normal file
View File

@ -0,0 +1,14 @@
<div class="content-box">
<div class="row">
<div class="center-block col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h3 class="title-wrapper text-center">
<%= yield :title %>
</h3>
<%= yield %>
</div>
<%= yield :footer %>
</div>
</div>
</div>

9
app/views/shared/_join_form.html.erb Normal file
View File

@ -0,0 +1,9 @@
<div class="input-group input-spacing">
<% @current_user = user %>
<%= text_field :current_user, :name, class: 'form-control meeting-user-name', placeholder: 'Enter your name' %>
<span class="input-group-btn">
<button type="button" class="btn btn-primary meeting-join">
Join
</button>
</span>
</div>

13
app/views/shared/_meeting_url.html.erb Normal file
View File

@ -0,0 +1,13 @@
<div <%= "hidden" if hidden %> class="meetin-url-wrapper">
<div class="input-group">
<input type="text" readonly="readonly" class="form-control meeting-url" data-path="<%= @user.room_url if @user %>"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default meeting-url-copy">
<i class="fa fa-paperclip" aria-hidden="true"></i>
</button>
</span>
</div>
<small>
<em>Copy this URL to invite others to the meeting</em>
</small>
</div>

7
app/views/shared/_title.html.erb Normal file
View File

@ -0,0 +1,7 @@
<div class="row">
<div class="page-header">
<h1 class="text-center">
<%= title %>
</h1>
</div>
</div>

13
config/routes.rb
View File

@ -1,20 +1,15 @@
Rails.application.routes.draw do Rails.application.routes.draw do
resources :users, only: [:edit, :update] 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 '/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] # There are two resources [meetings|rooms]
# meetings offer a landing page for NON authenticated users to create and join session in BigBlueButton # 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 # 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)', 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 # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end end