forked from External/greenlight
settings and sessions UI
This commit is contained in:
joshua-arts
parent
6c1074443f
commit
79d63e7b70
18
Gemfile.lock
18
Gemfile.lock
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
class MainController < ApplicationController
|
||||
|
||||
before_action :redirect_to_room
|
||||
#before_action :redirect_to_room
|
||||
|
||||
# GET /
|
||||
def index
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -81,6 +81,10 @@ class User < ApplicationRecord
|
|||
end
|
||||
end
|
||||
|
||||
def firstname
|
||||
name.split(' ').first
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
# Initializes a room for the user.
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
data-resource="<%= params[:resource] %>"
|
||||
data-current-user="<%= current_user.try(:encrypted_id) %>">
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
<!-- Messages -->
|
||||
<div id='alerts'>
|
||||
<div class='flash-alerts'>
|
||||
|
|
@ -31,5 +33,7 @@
|
|||
<%= yield %>
|
||||
|
||||
<%= render "shared/footer" %>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,21 @@
|
|||
<div class="container">
|
||||
|
||||
<% 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" %>
|
||||
<!-- <%= render "shared/start_meeting" %> -->
|
||||
|
||||
<br>
|
||||
|
||||
<%= render "shared/features" %>
|
||||
</div>
|
||||
|
||||
<%= render "shared/modals/video_modal" %>
|
||||
|
||||
<script>
|
||||
$(window).on('load',function(){
|
||||
$('#welcomeModal').modal('show');
|
||||
|
|
|
|||
|
|
@ -1,34 +1,75 @@
|
|||
<div class="container">
|
||||
<div class="col-lg-10">
|
||||
|
||||
<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">
|
||||
<table class="table card-table table-vcenter">
|
||||
<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>
|
||||
<!--<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>
|
||||
<div>Example Meeting</div>
|
||||
<div class="small text-muted">
|
||||
June 21, 2017 <i>(about 3 hours ago)</i>
|
||||
</div>
|
||||
</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>
|
||||
<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 %>
|
||||
|
|
@ -36,6 +77,7 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Sessions
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" %>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<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">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" value="<%= current_user.name %>" readonly="">
|
||||
|
||||
<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>
|
||||
<input type="text" class="form-control" value="<%= current_user.email %>" readonly="">
|
||||
|
||||
<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 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 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>
|
||||
|
||||
<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>
|
||||
Loading…
Reference in New Issue