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

more ui tweaks

This commit is contained in:
Josh 2018-05-31 16:54:48 -04:00
parent ede80075c1
commit 39414e269b
8 changed files with 87 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,7 +38,7 @@
@import "tabler";
@import "tabler.plugins";
$background-color: #D1E2FF;
$background-color: #F5F7FB;
$rule-color: lightblue;
.video-container {
@ -50,10 +50,17 @@ $rule-color: lightblue;
a {
text-decoration: none !important;
cursor: pointer;
}
.sessions {
background-color: white;
.bottom-div {
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.room-section {
background-color: $background-color;
}
.start-block {
@ -64,8 +71,6 @@ a {
.start-button {
font-size: 26px;
position: absolute;
bottom: 0;
}
.main-large {
@ -89,7 +94,7 @@ html, body {
height: 100%;
//background: linear-gradient(180deg, $background-color 50%, white 50%);
//background-repeat: no-repeat;
background-color: $background-color;
background-color: white;
}
.wrapper {

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

@ -1,85 +0,0 @@
<div class="container">
<%= render "shared/components/subtitle", subtitle: "Sessions" %>
<div class="col-12">
<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>
<a href="#" class="btn btn-secondary">One</a>
<a href="#" class="btn btn-secondary">One</a>
</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
<br><br>
<%= @room.recordings %>
<% @room.recordings.each do |rec| %>
<p><%= rec[:metadata][:meetingName] %></p>
<% Array.wrap(rec[:playback][:format]).each do |form| %>
<%= link_to form[:type], form[:url] %>
<% end %>
<% end %>

67
app/views/rooms/show.html.erb
View File

@ -1,34 +1,41 @@
<div class="container">
<div class="row mt-9">
<div class="col-9">
<h1 id="user-text" class="display-3 text-left text-primary mb-5"><%= @room.name %></h1>
<label class="form-label text-primary">Invite Participants</label>
<form class="form-inline">
<input id="invite-url" type="text" class="form-control mb-5" value="<%= request.base_url + @room.invite_path %>" readonly="" style="width: 40%;">
<div id="copy" class="btn btn-primary mx-2 mb-5">
<i class="fas fa-copy"></i>
Copy
</div>
<div id="email" class="btn btn-primary mb-5">
<i class="fas fa-envelope"></i>
Email
</div>
</form>
<h4 class="text-left text-primary">2 Sessions | 3 Recordings</h4>
</div>
<div class="col-3">
<%= link_to "Start", start_room_path(@room), class: "btn btn-primary btn-block px-7 start-button float-right" %>
</div>
</div>
<div class="row mt-8 mb-6">
<% (current_user.rooms - [@room]).each do |room| %>
<div class="col-4">
<%= link_to room do %>
<%= render "shared/components/room_block", room: room %>
<% end %>
<div class="room-section">
<div class="container">
<div class="row pt-9">
<div class="col-lg-9 col-sm-12">
<h1 id="user-text" class="display-3 text-left text-primary mb-3"><%= @room.name %></h1>
<h4 class="text-left text-primary mb-6">0 Sessions | 0 Recordings</h4>
<label class="form-label text-primary">Invite Participants</label>
<form class="form-inline">
<div class="input-icon" style="width: 45%;">
<span class="input-icon-addon">
<i class="fe fe-link"></i>
</span>
<input id="invite-url" type="text" class="form-control" value="<%= request.base_url + @room.invite_path %>" readonly="" style="width: 100%;">
</div>
<div id="copy" class="btn btn-primary mx-2">
<i class="fas fa-copy"></i>
Copy
</div>
<!-- <div id="email" class="btn btn-primary">
<i class="fas fa-envelope"></i>
Email
</div> -->
</form>
</div>
<% end %>
<div class="col-lg-3 col-sm-12 bottom-div mt-5">
<%= link_to "Start", start_room_path(@room), class: "btn btn-primary btn-block px-7 start-button float-right" %>
</div>
</div>
<div class="row mt-7 mb-2">
<% (current_user.rooms - [@room]).each do |room| %>
<div class="col-4">
<%= link_to room do %>
<%= render "shared/components/room_block", room: room %>
<% end %>
</div>
<% end %>
</div>
</div>
</div>

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

@ -1,8 +1,14 @@
<div class="header py-4 mb-6">
<div class="header py-4">
<div class="container">
<div class="d-flex">
<%= link_to root_path, class: "header-brand" do %>
<%= image_tag("logo_with_text.png", class: "header-brand-img") %>
<% if current_user %>
<%= link_to current_user.main_room, class: "header-brand" do %>
<%= image_tag("logo_with_text.png", class: "header-brand-img") %>
<% end %>
<% else %>
<%= link_to root_path, class: "header-brand" do %>
<%= image_tag("logo_with_text.png", class: "header-brand-img") %>
<% end %>
<% end %>
<div class="d-flex order-lg-2 ml-auto">
@ -19,18 +25,14 @@
<% end %>
<span class="ml-2 d-none d-lg-block">
<span class="text-default"><%= current_user.name %></span>
<small class="text-muted d-block mt-1"><%= current_user.subtitle %></small>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow" x-placement="bottom-end" style="position: absolute; transform: translate3d(-56px, 32px, 0px); top: 0px; left: 0px; will-change: transform;">
<a class="dropdown-item" href="#">
<i class="dropdown-icon fe fe-user"></i> Sessions
</a>
<%= link_to settings_path, class: "dropdown-item" do %>
<i class="dropdown-icon fe fe-settings"></i> Settings
<% end %>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<a class="dropdown-item" href="http://docs.bigbluebutton.org/support/faq.html">
<i class="dropdown-icon fe fe-help-circle"></i> Need help?
</a>
<%= link_to logout_path, class: "dropdown-item" do %>

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

@ -1,7 +1,7 @@
<div class="sessions pb-5">
<div class="container pt-6">
<%= render "shared/components/subtitle", subtitle: "Sessions" %>
<%= render "shared/components/subtitle", subtitle: "Recordings" %>
<div class="col-12">
<div class="card">
@ -14,6 +14,7 @@
<th class="text-left">Length</th>
<th class="text-left">Users</th>
<th class="text-left">Visibility</th>
<th>Formats</th>
<th class="text-center"><i class="icon-settings"></i></th>
</tr>
</thead>
@ -57,11 +58,10 @@
<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>
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon far fa-eye"></i> Change Visibility</a>
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon far fa-envelope"></i> Email Recording</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>
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-trash"></i> Delete</a>
</div>
</div>
</td>

7
app/views/shared/components/_room_block.html.erb
View File

@ -3,7 +3,7 @@
<table class="table table-hover table-outline table-vcenter text-nowrap card-table">
<tbody>
<td>
<span class="stamp stamp-md bg-azure mr-3">
<span class="stamp stamp-md bg-primary mr-3">
<i class="fas fa-<%= room.icon %>"></i>
</span>
</td>
@ -17,8 +17,9 @@
<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>
<%= button_to root_path, class: "dropdown-item" do %>
<i class="dropdown-icon fe fe-home"></i> Make Home Room
<% end %>
<% if room != current_user.main_room %>
<%= button_to room, method: :delete, data: { confirm: 'Are you sure?' }, class: "dropdown-item" do %>
<i class="dropdown-icon fe fe-trash"></i> Delete

3
app/views/shared/modals/_create_room_modal.html.erb
View File

@ -13,7 +13,8 @@
<span class="input-icon-addon">
<i class="fas fa-chalkboard-teacher"></i>
</span>
<%= f.text_field :name, id: "room-name", class: "form-control", placeholder: "Enter a room name...", autocomplete: :off %> </div>
<%= f.text_field :name, id: "room-name", class: "form-control", placeholder: "Enter a room name...", autocomplete: :off %>
</div>
<label class="custom-switch mt-5 mb-5 float-left">
<%= f.check_box :auto_join, class: "custom-switch-input", checked: true %>
<span class="custom-switch-indicator"></span>

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

@ -1,15 +1,25 @@
<div class="container">
<div class="container mt-8">
<%= render "shared/components/subtitle", subtitle: "Settings" %>
<div class="row">
<div class="col-2">
<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 class="col-lg-3 mb-4">
<div class="list-group list-group-transparent mb-0">
<button id="account" class="list-group-item list-group-item-action setting-btn active">
<span class="icon mr-3"><i class="fe fe-user"></i></span>Account
</button>
<button id="password" class="list-group-item list-group-item-action setting-btn">
<span class="icon mr-3"><i class="fe fe-lock"></i></span>Password
</button>
<button id="design" class="list-group-item list-group-item-action setting-btn">
<span class="icon mr-3"><i class="fe fe-edit-2"></i></span>Design
</button>
</div>
</div>
<div class="col-10">
<div class="col-lg-9">
<div id="account" class="setting-view card">
<div class="card-body p-6">
<div class="card-title text-primary">
@ -107,10 +117,12 @@ $(document).ready(function(){
settingsButtons.each(function(i, btn) {
if(i != 0){ $(settingsViews[i]).hide(); }
$(btn).click(function(){
$(btn).addClass("active");
settingsViews.each(function(i, view){
if($(view).attr("id") == $(btn).attr("id")){
$(view).show();
} else {
$(settingsButtons[i]).removeClass("active");
$(view).hide();
}
});