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

settings and sessions UI

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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>