merenber
/
greenlight
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

settings and sessions UI

This commit is contained in:
joshua-arts 2018-05-28 18:10:20 -04:00
parent 6c1074443f
commit 79d63e7b70
12 changed files with 306 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Gemfile.lock
View File

@ -1,6 +1,8 @@
GEM
remote: https://rubygems.org/
specs:
action_interceptor (1.1.0)
rails (>= 3.1)
actioncable (5.0.7)
actionpack (= 5.0.7)
nio4r (>= 1.2, < 3.0)
@ -77,6 +79,12 @@ GEM
faraday (0.12.2)
multipart-post (>= 1.2, < 3)
ffi (1.9.23)
fine_print (3.1.0)
action_interceptor (>= 1.0)
jquery-rails
rails (>= 3.1)
responders
squeel
font-awesome-sass (5.0.13)
sassc (>= 1.11)
globalid (0.4.1)
@ -133,6 +141,8 @@ GEM
omniauth-twitter (1.4.0)
omniauth-oauth (~> 1.1)
rack
polyamorous (1.1.0)
activerecord (>= 3.0)
popper_js (1.12.9)
puma (3.11.4)
rack (2.0.5)
@ -169,6 +179,9 @@ GEM
rb-fsevent (0.10.3)
rb-inotify (0.9.10)
ffi (>= 0.5.0, < 2)
responders (2.4.0)
actionpack (>= 4.2.0, < 5.3)
railties (>= 4.2.0, < 5.3)
rspec-core (3.7.1)
rspec-support (~> 3.7.0)
rspec-expectations (3.7.0)
@ -214,6 +227,10 @@ GEM
activesupport (>= 4.0)
sprockets (>= 3.0.0)
sqlite3 (1.3.13)
squeel (1.2.3)
activerecord (>= 3.0)
activesupport (>= 3.0)
polyamorous (~> 1.1.0)
tabler-rubygem (0.1.2)
autoprefixer-rails (>= 6.0.3)
thor (0.20.0)
@ -248,6 +265,7 @@ DEPENDENCIES
dotenv-rails
factory_bot_rails
faker
fine_print
font-awesome-sass (~> 5.0.13)
jbuilder (~> 2.5)
jquery-rails

42
app/assets/stylesheets/application.scss
View File

@ -41,14 +41,6 @@
$background-color: #D1E2FF;
$rule-color: lightblue;
.header {
background-color: transparent;
}
.footer {
background-color: $background-color;
}
.video-container {
position: relative;
width: 100%;
@ -77,8 +69,23 @@ iframe{
html, body {
width: 100%;
height: 100%;
background: linear-gradient(180deg, $background-color 50%, white 50%);
background-repeat: no-repeat;
//background: linear-gradient(180deg, $background-color 50%, white 50%);
//background-repeat: no-repeat;
background-color: $background-color;
}
.wrapper {
min-height:100%;
position:relative;
}
.footer {
width: 100%;
height: 70px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.small-rule {
@ -88,7 +95,7 @@ html, body {
}
.thumbnail {
height: 60%;
height: 40%;
width: auto;
}
@ -125,19 +132,6 @@ body[data-controller=landing].app-background {
z-index: 999;
}
.header {
padding: 20px 40px;
margin-bottom: 160px;
.logo {
max-width: 150px;
max-height: 50px;
}
}
.footer {
padding: 20px;
}
.center-block {
float: none;
}

2
app/controllers/main_controller.rb
View File

@ -1,6 +1,6 @@
class MainController < ApplicationController
before_action :redirect_to_room
#before_action :redirect_to_room
# GET /
def index

3
app/helpers/sessions_helper.rb
View File

@ -2,7 +2,8 @@ module SessionsHelper
# Logs a user into GreenLight.
def login(user)
session[:user_id] = user.id
redirect_to room_path(user.room.uid)
redirect_to root_path
#redirect_to room_path(user.room.uid)
end
# Logs current user out of GreenLight.

4
app/models/user.rb
View File

@ -81,6 +81,10 @@ class User < ApplicationRecord
end
end
def firstname
name.split(' ').first
end
private
# Initializes a room for the user.

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

@ -12,24 +12,28 @@
data-resource="<%= params[:resource] %>"
data-current-user="<%= current_user.try(:encrypted_id) %>">
<!-- Messages -->
<div id='alerts'>
<div class='flash-alerts'>
<% flash.each do |name, msg| %>
<div class="alert alert-<%= name %> alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<span class="alert-message"><%= msg %></span>
</div>
<% end %>
<div class="wrapper">
<!-- Messages -->
<div id='alerts'>
<div class='flash-alerts'>
<% flash.each do |name, msg| %>
<div class="alert alert-<%= name %> alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<span class="alert-message"><%= msg %></span>
</div>
<% end %>
</div>
</div>
<%= render "shared/header" %>
<%= yield %>
<%= render "shared/footer" %>
</div>
<%= render "shared/header" %>
<%= yield %>
<%= render "shared/footer" %>
</body>
</html>

15
app/views/main/index.html.erb
View File

@ -1,16 +1,21 @@
<div class="container">
<h1 id="main-text" class="display-3 text-center text-primary">Teach Students Online.</h1>
<hr class="small-rule">
<%= render "shared/start_meeting" %>
<% if current_user %>
<h1 id="user-text" class="display-3 text-center text-primary"><%= "Welcome, #{current_user.firstname}." %></h1>
<%= render "shared/modals/create_room_modal" %>
<% else %>
<h1 id="main-text" class="display-3 text-center text-primary">Teach Students Online.</h1>
<%= render "shared/modals/video_modal" %>
<% end %>
<hr class="small-rule">
<!-- <%= render "shared/start_meeting" %> -->
<br>
<%= render "shared/features" %>
</div>
<%= render "shared/modals/video_modal" %>
<script>
$(window).on('load',function(){
$('#welcomeModal').modal('show');

112
app/views/rooms/sessions.html.erb
View File

@ -1,41 +1,83 @@
<div class="container">
<div class="col-lg-10">
<div class="card">
<table class="table card-table table-vcenter">
<tbody>
<% 3.times do %>
<tr>
<td>
<!--<i class="fas fa-users fa-2x"></i>-->
<img class="thumbnail" src="http://test-install.blindsidenetworks.com/presentation/b622495d927cd99e9898b0601c2b18a5424a0627-1527259102285/presentation/d2d9a672040fbde2a47a10bf6c37b6a4b5ae187f-1527259102298/thumbnails/thumb-1.png">
</td>
<td class="text-left">
<h4>Introduction to Dinosaurs</h4>
<p><i>June 21, 2017 (about 3 hours ago)</i></p>
</td>
<td class="text-center d-none d-md-table-cell text-nowrap">
<h6 class="text-uppercase"><strong>Users</strong></h6>
<h5>3</h5>
</td>
<td class="text-center d-none d-md-table-cell text-nowrap">
<h6 class="text-uppercase"><strong>Length</strong></h6>
<h5>2 hours</h5>
</td>
<td class="text-center d-none d-md-table-cell text-nowrap">
<h6 class="text-uppercase"><strong>Visbility</strong></h6>
<h5>Unlisted</h5>
</td>
<td>
<button type="button" class="btn btn-icon btn-success"><i class="fas fa-video"></i></button>
<button type="button" class="btn btn-icon btn-primary"><i class="fas fa-chart-bar"></i></button>
<button type="button" class="btn btn-icon btn-warning"><i class="fas fa-podcast"></i></button>
</td>
</tr>
<% end %>
</tbody>
</table>
<div class="row">
<div class="col-10 offset-1">
<p style="font-size: 25px;">Sessions</p>
<!-- <div class="input-icon float-right">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-icon-addon">
<i class="fe fe-search"></i>
</span>
</div> -->
<hr>
</div>
</div>
<div class="col-10 offset-1">
<div class="card">
<div class="table-responsive">
<table class="table table-hover table-outline table-vcenter text-nowrap card-table">
<thead>
<tr>
<th>Name</th>
<th>Thumbnails</th>
<th class="text-left">Length</th>
<th class="text-left">Users</th>
<th class="text-left">Visibility</th>
<th class="text-center"><i class="icon-settings"></i></th>
</tr>
</thead>
<tbody>
<% 3.times do %>
<tr>
<td>
<div>Example Meeting</div>
<div class="small text-muted">
June 21, 2017 <i>(about 3 hours ago)</i>
</div>
</td>
<td>
<img class="thumbnail px-2" src="http://test-install.blindsidenetworks.com/presentation/b622495d927cd99e9898b0601c2b18a5424a0627-1527259102285/presentation/d2d9a672040fbde2a47a10bf6c37b6a4b5ae187f-1527259102298/thumbnails/thumb-1.png">
<img class="thumbnail px-2" src="http://test-install.blindsidenetworks.com/presentation/b622495d927cd99e9898b0601c2b18a5424a0627-1527259102285/presentation/d2d9a672040fbde2a47a10bf6c37b6a4b5ae187f-1527259102298/thumbnails/thumb-1.png">
<img class="thumbnail px-2" src="http://test-install.blindsidenetworks.com/presentation/b622495d927cd99e9898b0601c2b18a5424a0627-1527259102285/presentation/d2d9a672040fbde2a47a10bf6c37b6a4b5ae187f-1527259102298/thumbnails/thumb-1.png">
</td>
<td class="text-left">
<div class="small text-muted text-uppercase">
Length
</div>
1 hr
</td>
<td class="text-left">
<div class="small text-muted text-uppercase">
Users
</div>
4
</td>
<td class="text-left">
<div class="small text-muted text-uppercase">
Visibility
</div>
Unlisted
</td>
<td class="text-center">
<div class="item-action dropdown">
<a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
<div class="dropdown-divider"></div>
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
</div>
</div>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
</div>
Sessions

2
app/views/shared/_footer.html.erb
View File

@ -1,3 +1,3 @@
<div class="footer mt-6">
<div class="footer">
<h5 class="text-center">Powered by <a target="_blank" href="http://bigbluebutton.org/">BigBlueButton</a>.</h5>
</div>

10
app/views/shared/_header.html.erb
View File

@ -1,4 +1,4 @@
<div class="header py-4">
<div class="header py-4 mb-6">
<div class="container">
<div class="d-flex">
<a class="header-brand" href="{{ site.base }}/index.html">
@ -7,6 +7,11 @@
<div class="d-flex order-lg-2 ml-auto">
<% if current_user %>
<a class="px-3" href="" data-toggle="modal" data-target="#createRoomModal">
<i class="fas fa-plus"></i> Create Room
</a>
<%= render "shared/modals/login_modal" %>
<a class="px-3" href="">Sessions</a>
<div class="dropdown">
<a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
<% if current_user.image.nil? %>
@ -20,6 +25,9 @@
</span>
</a>
</div>
<%= link_to logout_path do %>
<i class="fas fa-sign-out-alt fa-2x px-5"></i>
<% end %>
<% else %>
<button type="submit" class="btn btn-pill btn-outline-primary ml-auto" data-toggle="modal" data-target="#loginModal">Login</button>
<%= render "shared/modals/login_modal" %>

31
app/views/shared/modals/_create_room_modal.html.erb Normal file
View File

@ -0,0 +1,31 @@
<div class="modal fade" id="createRoomModal" 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>Create New Room</h3>
</div>
<hr class="small-rule">
<hr>
<div class="form-group">
<div class="input-icon">
<span class="input-icon-addon">
<i class="fas fa-chalkboard-teacher"></i>
</span>
<input type="email" class="form-control" placeholder="Enter a room name...">
</div>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-outline-primary btn-block btn-pill">Create Room</button>
</div>
</div>
<div class="card-footer">
<p>You will be free to delete this room at any time.</p>
</div>
</div>
</div>
</div>
</div>

196
app/views/users/settings.html.erb
View File

@ -1,93 +1,125 @@
<div class="container">
<div class="form-group">
<div class="selectgroup selectgroup-pills">
<label class="selectgroup-item">
<input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
<span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-user"></i> Account</span>
</label>
<label class="selectgroup-item">
<input type="radio" name="icon-input" value="2" class="selectgroup-input">
<span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-pencil-alt"></i> Design </span>
</label>
<div class="row">
<div class="col-10 offset-1">
<p style="font-size: 25px;">Settings</p>
<hr>
</div>
</div>
<div class="form-group">
<label class="form-label">Background</label>
<div class="row gutters-xs">
<div class="col-auto">
<label class="colorinput">
<input name="color" type="radio" value="azure" class="colorinput-input">
<span class="colorinput-color bg-azure"></span>
</label>
<div class="row">
<div class="col-2 offset-1">
<button id="account" class="setting-btn btn btn-primary btn-sm btn-block m-2">Account</button>
<button id="password" class="setting-btn btn btn-primary btn-sm btn-block m-2">Password</button>
<button id="design" class="setting-btn btn btn-primary btn-sm btn-block m-2">Design</button>
</div>
<div class="col-8">
<div id="account" class="setting-view card">
<div class="card-body p-6">
<div class="card-title text-primary">
<h4>Update your Account</h4>
</div>
<hr>
<div class="form-group">
<div class="row">
<div class="col-6">
<label class="form-label">Fullname</label>
<div class="input-icon">
<span class="input-icon-addon">
<i class="fas fa-user"></i>
</span>
<input type="text" class="form-control" value="<%= current_user.name %>" placeholder="Fullname">
</div>
</div>
<div class="col-6">
<label class="form-label">Email</label>
<div class="input-icon">
<span class="input-icon-addon">
<i class="fas fa-at"></i>
</span>
<input type="email" class="form-control" value="<%= current_user.email %>" placeholder="Email">
</div>
</div>
</div>
<br>
<label class="form-label">Account Provider</label>
<input type="text" class="form-control" value="<%= current_user.provider.capitalize %>" readonly="">
<br>
<label class="form-label">Profile Image</label>
<span class="avatar avatar-xl" style="background-image: url(<%= current_user.image %>)"></span>
</div>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary float-right">Update</a>
</div>
</div>
<div class="col-auto">
<label class="colorinput">
<input name="color" type="radio" value="indigo" class="colorinput-input" checked="">
<span class="colorinput-color bg-indigo"></span>
</label>
<div id="password" class="setting-view card">
<div class="card-body p-6">
<div class="card-title text-primary">
<h4>Change your Password</h4>
</div>
<hr>
<div class="form-group">
<div class="row">
<div class="col-9">
<label class="form-label">Old Password</label>
<input type="password" class="form-control">
<br>
<label class="form-label">New Password</label>
<input type="password" class="form-control">
<br>
<label class="form-label">New Password Confirmation</label>
<input type="password" class="form-control">
</div>
</div>
</div>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary float-right">Update</a>
</div>
</div>
<div class="col-auto">
<label class="colorinput">
<input name="color" type="radio" value="purple" class="colorinput-input">
<span class="colorinput-color bg-purple"></span>
</label>
</div>
<div class="col-auto">
<label class="colorinput">
<input name="color" type="radio" value="pink" class="colorinput-input">
<span class="colorinput-color bg-pink"></span>
</label>
</div>
<div class="col-auto">
<label class="colorinput">
<input name="color" type="radio" value="red" class="colorinput-input">
<span class="colorinput-color bg-red"></span>
</label>
</div>
<div class="col-auto">
<label class="colorinput">
<input name="color" type="radio" value="orange" class="colorinput-input">
<span class="colorinput-color bg-orange"></span>
</label>
</div>
<div class="col-auto">
<label class="colorinput">
<input name="color" type="radio" value="yellow" class="colorinput-input">
<span class="colorinput-color bg-yellow"></span>
</label>
</div>
<div class="col-auto">
<label class="colorinput">
<input name="color" type="radio" value="lime" class="colorinput-input">
<span class="colorinput-color bg-lime"></span>
</label>
</div>
<div class="col-auto">
<label class="colorinput">
<input name="color" type="radio" value="green" class="colorinput-input">
<span class="colorinput-color bg-green"></span>
</label>
</div>
<div class="col-auto">
<label class="colorinput">
<input name="color" type="radio" value="teal" class="colorinput-input">
<span class="colorinput-color bg-teal"></span>
</label>
<div id="design" class="setting-view card">
<div class="card-body p-6">
<div class="card-title text-primary">
<h4>Customize Greenlight</h4>
</div>
<hr>
<div class="form-group">
<div class="row">
<div class="col-6">
</div>
</div>
</div>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary float-right">Update</a>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Name</label>
<input type="text" class="form-control" value="<%= current_user.name %>" readonly="">
<label class="form-label">Email</label>
<input type="text" class="form-control" value="<%= current_user.email %>" readonly="">
<label class="form-label">Account Provider</label>
<input type="text" class="form-control" value="<%= current_user.provider.capitalize %>" readonly="">
</div>
</div>
<script>
settingsButtons = $('.setting-btn');
settingsViews = $('.setting-view');
$(window).on('load', function(){
settingsButtons.each(function(i, btn) {
if(i != 0){ $(settingsViews[i]).hide(); }
$(btn).click(function(){
settingsViews.each(function(i, view){
if($(view).attr("id") == $(btn).attr("id")){
$(view).show();
} else {
$(view).hide();
}
});
});
});
});
</script>