work on frontend
This commit is contained in:
Josh
parent
3dd7b33363
commit
a1a41bfa43
8
Gemfile
8
Gemfile
|
|
@ -41,9 +41,11 @@ gem 'omniauth-google-oauth2'
|
|||
gem 'bigbluebutton-api-ruby'
|
||||
|
||||
# Front-end.
|
||||
gem 'bootstrap-sass', '3.3.0.0'
|
||||
gem 'bootstrap-social-rails', '~> 4.12'
|
||||
gem 'font-awesome-sass', '4.7.0'
|
||||
gem 'bootstrap', '~> 4.1.1'
|
||||
gem 'tabler-rubygem'
|
||||
|
||||
# Fontawesome icons.
|
||||
gem "font-awesome-sass", '~> 5.0.13'
|
||||
|
||||
# Use Capistrano for deployment
|
||||
# gem 'capistrano-rails', group: :development
|
||||
|
|
|
|||
27
Gemfile.lock
27
Gemfile.lock
|
|
@ -39,14 +39,16 @@ GEM
|
|||
minitest (~> 5.1)
|
||||
tzinfo (~> 1.1)
|
||||
arel (7.1.4)
|
||||
autoprefixer-rails (8.5.0)
|
||||
execjs
|
||||
bcrypt (3.1.11)
|
||||
bigbluebutton-api-ruby (1.6.0)
|
||||
xml-simple (~> 1.1)
|
||||
bindex (0.5.0)
|
||||
bootstrap-sass (3.3.0.0)
|
||||
sass (~> 3.2)
|
||||
bootstrap-social-rails (4.12.0)
|
||||
railties (>= 3.1)
|
||||
bootstrap (4.1.1)
|
||||
autoprefixer-rails (>= 6.0.3)
|
||||
popper_js (>= 1.12.9, < 2)
|
||||
sass (>= 3.5.2)
|
||||
builder (3.2.3)
|
||||
byebug (10.0.2)
|
||||
coffee-rails (4.2.2)
|
||||
|
|
@ -75,8 +77,8 @@ GEM
|
|||
faraday (0.12.2)
|
||||
multipart-post (>= 1.2, < 3)
|
||||
ffi (1.9.23)
|
||||
font-awesome-sass (4.7.0)
|
||||
sass (>= 3.2)
|
||||
font-awesome-sass (5.0.13)
|
||||
sassc (>= 1.11)
|
||||
globalid (0.4.1)
|
||||
activesupport (>= 4.2.0)
|
||||
hashie (3.5.7)
|
||||
|
|
@ -131,6 +133,7 @@ GEM
|
|||
omniauth-twitter (1.4.0)
|
||||
omniauth-oauth (~> 1.1)
|
||||
rack
|
||||
popper_js (1.12.9)
|
||||
puma (3.11.4)
|
||||
rack (2.0.5)
|
||||
rack-test (0.6.3)
|
||||
|
|
@ -194,6 +197,10 @@ GEM
|
|||
sprockets (>= 2.8, < 4.0)
|
||||
sprockets-rails (>= 2.0, < 4.0)
|
||||
tilt (>= 1.1, < 3)
|
||||
sassc (1.11.4)
|
||||
bundler
|
||||
ffi (~> 1.9.6)
|
||||
sass (>= 3.3.0)
|
||||
spring (2.0.2)
|
||||
activesupport (>= 4.2)
|
||||
spring-watcher-listen (2.0.1)
|
||||
|
|
@ -207,6 +214,8 @@ GEM
|
|||
activesupport (>= 4.0)
|
||||
sprockets (>= 3.0.0)
|
||||
sqlite3 (1.3.13)
|
||||
tabler-rubygem (0.1.2)
|
||||
autoprefixer-rails (>= 6.0.3)
|
||||
thor (0.20.0)
|
||||
thread_safe (0.3.6)
|
||||
tilt (2.0.8)
|
||||
|
|
@ -233,14 +242,13 @@ PLATFORMS
|
|||
DEPENDENCIES
|
||||
bcrypt (~> 3.1.7)
|
||||
bigbluebutton-api-ruby
|
||||
bootstrap-sass (= 3.3.0.0)
|
||||
bootstrap-social-rails (~> 4.12)
|
||||
bootstrap (~> 4.1.1)
|
||||
byebug
|
||||
coffee-rails (~> 4.2)
|
||||
dotenv-rails
|
||||
factory_bot_rails
|
||||
faker
|
||||
font-awesome-sass (= 4.7.0)
|
||||
font-awesome-sass (~> 5.0.13)
|
||||
jbuilder (~> 2.5)
|
||||
jquery-rails
|
||||
listen (~> 3.0.5)
|
||||
|
|
@ -255,6 +263,7 @@ DEPENDENCIES
|
|||
spring
|
||||
spring-watcher-listen (~> 2.0.0)
|
||||
sqlite3
|
||||
tabler-rubygem
|
||||
turbolinks (~> 5)
|
||||
tzinfo-data
|
||||
uglifier (>= 1.3.0)
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
|
||||
// about supported directives.
|
||||
//
|
||||
//= require jquery
|
||||
//= require jquery_ujs
|
||||
//= require tabler
|
||||
//= require tabler.plugins
|
||||
//= require turbolinks
|
||||
//= require_tree .
|
||||
|
|
|
|||
|
|
@ -30,12 +30,42 @@
|
|||
// You should have received a copy of the GNU Lesser General Public License along
|
||||
// with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
@import "font-awesome-sprockets";
|
||||
@import "font-awesome";
|
||||
|
||||
@import "tabler/variables";
|
||||
@import "bootstrap";
|
||||
@import "tabler";
|
||||
@import "tabler.plugins";
|
||||
|
||||
$background-color: #d1e2ff;
|
||||
$rule-color: lightblue;
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
iframe{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
background: linear-gradient(180deg, $background-color 50%, white 50%);
|
||||
}
|
||||
|
||||
.small-rule {
|
||||
width: 25%;
|
||||
border-width: 3px;
|
||||
background-color: $rule-color;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
|
|
@ -158,4 +188,4 @@ body[data-controller=landing].app-background {
|
|||
top: 0;
|
||||
right: 0;
|
||||
padding-right: 3px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@
|
|||
|
||||
<body class="app-background" data-controller="<%= params[:controller] %>" data-action="<%= params[:action] %>"
|
||||
data-resource="<%= params[:resource] %>"
|
||||
data-current-user="<%= current_user.try(:encrypted_id) %>"
|
||||
style="background-image:url(<%= image_path('background.png') if params[:controller] == 'main' %>);">
|
||||
data-current-user="<%= current_user.try(:encrypted_id) %>">
|
||||
|
||||
<!-- Messages -->
|
||||
<div id='alerts'>
|
||||
|
|
@ -27,17 +26,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class='header'>
|
||||
<span class="logo-wrapper pull-left">
|
||||
<% if current_user %>
|
||||
<%= link_to image_tag("bbb_logo.png", :alt => "BigBlueButton", :class => "logo"), room_path(current_user) %>
|
||||
<% else %>
|
||||
<%= link_to image_tag("bbb_logo.png", :alt => "BigBlueButton", :class => "logo"), root_path %>
|
||||
<% end %>
|
||||
</span>
|
||||
</div>
|
||||
<%= render "shared/header" %>
|
||||
|
||||
<%= yield %>
|
||||
|
||||
<%= render "shared/footer" %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,18 @@
|
|||
<% content_for :title do %>
|
||||
<div class="title">
|
||||
<h2>Landing Title</h2>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="container">
|
||||
<h1 class="display-3 text-center text-primary">Teach Students Online</h1>
|
||||
<hr class="small-rule">
|
||||
|
||||
<div class="page-wrapper meetings">
|
||||
<div class="container-fluid">
|
||||
<%= render "shared/start_meeting" %>
|
||||
|
||||
<div class="center-panel-wrapper">
|
||||
<%= render layout: 'shared/center_panel' do %>
|
||||
<div class="center-block center-panel-content-size col-xs-12">
|
||||
<%= form_for(:meeting, url: create_meeting_path) do |f| %>
|
||||
<div class="input-field col s12">
|
||||
<%= f.label :name, "Name" %>
|
||||
<%= f.text_field :name %>
|
||||
</div>
|
||||
<br>
|
||||
<%= f.submit "Start Meeting", class: "btn white-text light-green" %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<% unless configured_providers.empty? %>
|
||||
<div class="center-block col-xs-6 login">
|
||||
<%= render 'shared/signup' %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="text-center" style="padding-top:20px;">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/yGX3JCv7OVM" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<%= render "shared/features" %>
|
||||
</div>
|
||||
|
||||
<%= render "shared/video_modal" %>
|
||||
|
||||
<script>
|
||||
$(window).on('load',function(){
|
||||
$('#welcomeModal').modal('show');
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<h1 class="text-center text-primary">Features</h1>
|
||||
<hr class="small-rule">
|
||||
|
||||
<div class="row text-center">
|
||||
<div class="col-6">
|
||||
<h1>Feature One</h1>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h1>Feature Two</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<div class="footer">
|
||||
<h5 class="text-center">Powered by BigBlueButton.</h5>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<div class="header py-4">
|
||||
<div class="container">
|
||||
<div class="d-flex">
|
||||
<a class="header-brand" href="{{ site.base }}/index.html">
|
||||
<%= image_tag("bbb_logo.png", class: "header-brand-img") %>
|
||||
</a>
|
||||
|
||||
<div class="d-flex order-lg-2 ml-auto">
|
||||
<% if current_user %>
|
||||
<div class="dropdown">
|
||||
<a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
|
||||
<span class="avatar" style="background-image: url({{ site.base }}/{{ user.photo }})"></span>
|
||||
<span class="ml-2 d-none d-lg-block">
|
||||
<span class="text-default">{{ user.name }} {{ user.surname }}</span>
|
||||
<small class="text-muted d-block mt-1">Administrator</small>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<% else %>
|
||||
<button type="submit" class="btn btn-pill btn-outline-primary ml-auto" data-toggle="modal" data-target="#loginModal">Login</button>
|
||||
|
||||
<%= render "shared/login_modal" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content text-center">
|
||||
<div class="modal-body">
|
||||
<div class="card-body p-6">
|
||||
<div class="card-title text-primary">
|
||||
<h3>Login</h3>
|
||||
</div>
|
||||
|
||||
<hr class="small-rule">
|
||||
<% configured_providers.each do |provider| %>
|
||||
<%= link_to omniauth_login_url(provider), class: "btn btn-pill btn-#{provider} btn-block" do %>
|
||||
<i class="fab fa-<%= provider %>"></i> <%= "Login with #{provider.capitalize}" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-outline-primary btn-block btn-pill">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<%= link_to "Don't have an account, sign up!", "google.com" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<div class="col-8 offset-2 form-group">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Enter a meeting name to start!">
|
||||
<span class="input-group-append">
|
||||
<button class="btn btn-primary" type="button">Start Meeting</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
Invite URL and stuff goes here.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content text-center">
|
||||
<div class="modal-body">
|
||||
<div class="card-body p-6">
|
||||
<div class="card-title text-primary">
|
||||
<h3>Welcome</h3>
|
||||
</div>
|
||||
<hr class="small-rule">
|
||||
|
||||
<div class="video-container">
|
||||
<iframe src="https://www.youtube.com/embed/yGX3JCv7OVM" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<div class="col-6 offset-3">
|
||||
<button type="submit" class="btn btn-outline-primary btn-block btn-pill mt-5" data-dismiss="modal">Enter Site</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue