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

more ui tweaks

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

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

@@ -1,27 +1,33 @@
<div class="container"> <div class="room-section">
<div class="row mt-9"> <div class="container">
<div class="col-9"> <div class="row pt-9">
<h1 id="user-text" class="display-3 text-left text-primary mb-5"><%= @room.name %></h1> <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> <label class="form-label text-primary">Invite Participants</label>
<form class="form-inline"> <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 class="input-icon" style="width: 45%;">
<div id="copy" class="btn btn-primary mx-2 mb-5"> <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> <i class="fas fa-copy"></i>
Copy Copy
</div> </div>
<div id="email" class="btn btn-primary mb-5"> <!-- <div id="email" class="btn btn-primary">
<i class="fas fa-envelope"></i> <i class="fas fa-envelope"></i>
Email Email
</div> </div> -->
</form> </form>
<h4 class="text-left text-primary">2 Sessions | 3 Recordings</h4>
</div> </div>
<div class="col-3"> <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" %> <%= link_to "Start", start_room_path(@room), class: "btn btn-primary btn-block px-7 start-button float-right" %>
</div> </div>
</div> </div>
<div class="row mt-8 mb-6"> <div class="row mt-7 mb-2">
<% (current_user.rooms - [@room]).each do |room| %> <% (current_user.rooms - [@room]).each do |room| %>
<div class="col-4"> <div class="col-4">
<%= link_to room do %> <%= link_to room do %>
@@ -30,6 +36,7 @@
</div> </div>
<% end %> <% end %>
</div> </div>
</div>
</div> </div>
<%= render "shared/sessions" %> <%= render "shared/sessions" %>

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

@@ -1,9 +1,15 @@
<div class="header py-4 mb-6"> <div class="header py-4">
<div class="container"> <div class="container">
<div class="d-flex"> <div class="d-flex">
<% 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 %> <%= link_to root_path, class: "header-brand" do %>
<%= image_tag("logo_with_text.png", class: "header-brand-img") %> <%= image_tag("logo_with_text.png", class: "header-brand-img") %>
<% end %> <% end %>
<% end %>
<div class="d-flex order-lg-2 ml-auto"> <div class="d-flex order-lg-2 ml-auto">
<% if current_user %> <% if current_user %>
@@ -19,18 +25,14 @@
<% end %> <% end %>
<span class="ml-2 d-none d-lg-block"> <span class="ml-2 d-none d-lg-block">
<span class="text-default"><%= current_user.name %></span> <span class="text-default"><%= current_user.name %></span>
<small class="text-muted d-block mt-1"><%= current_user.subtitle %></small>
</span> </span>
</a> </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;"> <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 %> <%= link_to settings_path, class: "dropdown-item" do %>
<i class="dropdown-icon fe fe-settings"></i> Settings <i class="dropdown-icon fe fe-settings"></i> Settings
<% end %> <% end %>
<div class="dropdown-divider"></div> <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? <i class="dropdown-icon fe fe-help-circle"></i> Need help?
</a> </a>
<%= link_to logout_path, class: "dropdown-item" do %> <%= 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="sessions pb-5">
<div class="container pt-6"> <div class="container pt-6">
<%= render "shared/components/subtitle", subtitle: "Sessions" %> <%= render "shared/components/subtitle", subtitle: "Recordings" %>
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
@@ -14,6 +14,7 @@
<th class="text-left">Length</th> <th class="text-left">Length</th>
<th class="text-left">Users</th> <th class="text-left">Users</th>
<th class="text-left">Visibility</th> <th class="text-left">Visibility</th>
<th>Formats</th>
<th class="text-center"><i class="icon-settings"></i></th> <th class="text-center"><i class="icon-settings"></i></th>
</tr> </tr>
</thead> </thead>
@@ -57,11 +58,10 @@
<div class="item-action dropdown"> <div class="item-action dropdown">
<a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a> <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"> <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 far fa-eye"></i> Change Visibility</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 far fa-envelope"></i> Email Recording</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> <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>
</div> </div>
</td> </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"> <table class="table table-hover table-outline table-vcenter text-nowrap card-table">
<tbody> <tbody>
<td> <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> <i class="fas fa-<%= room.icon %>"></i>
</span> </span>
</td> </td>
@@ -17,8 +17,9 @@
<div class="item-action dropdown"> <div class="item-action dropdown">
<a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a> <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"> <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> <%= button_to root_path, class: "dropdown-item" do %>
<a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a> <i class="dropdown-icon fe fe-home"></i> Make Home Room
<% end %>
<% if room != current_user.main_room %> <% if room != current_user.main_room %>
<%= button_to room, method: :delete, data: { confirm: 'Are you sure?' }, class: "dropdown-item" do %> <%= button_to room, method: :delete, data: { confirm: 'Are you sure?' }, class: "dropdown-item" do %>
<i class="dropdown-icon fe fe-trash"></i> Delete <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"> <span class="input-icon-addon">
<i class="fas fa-chalkboard-teacher"></i> <i class="fas fa-chalkboard-teacher"></i>
</span> </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"> <label class="custom-switch mt-5 mb-5 float-left">
<%= f.check_box :auto_join, class: "custom-switch-input", checked: true %> <%= f.check_box :auto_join, class: "custom-switch-input", checked: true %>
<span class="custom-switch-indicator"></span> <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" %> <%= render "shared/components/subtitle", subtitle: "Settings" %>
<div class="row"> <div class="row">
<div class="col-2"> <div class="col-lg-3 mb-4">
<button id="account" class="setting-btn btn btn-primary btn-sm btn-block m-2">Account</button> <div class="list-group list-group-transparent mb-0">
<button id="password" class="setting-btn btn btn-primary btn-sm btn-block m-2">Password</button> <button id="account" class="list-group-item list-group-item-action setting-btn active">
<button id="design" class="setting-btn btn btn-primary btn-sm btn-block m-2">Design</button> <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>
<div class="col-10"> <div class="col-lg-9">
<div id="account" class="setting-view card"> <div id="account" class="setting-view card">
<div class="card-body p-6"> <div class="card-body p-6">
<div class="card-title text-primary"> <div class="card-title text-primary">
@@ -107,10 +117,12 @@ $(document).ready(function(){
settingsButtons.each(function(i, btn) { settingsButtons.each(function(i, btn) {
if(i != 0){ $(settingsViews[i]).hide(); } if(i != 0){ $(settingsViews[i]).hide(); }
$(btn).click(function(){ $(btn).click(function(){
$(btn).addClass("active");
settingsViews.each(function(i, view){ settingsViews.each(function(i, view){
if($(view).attr("id") == $(btn).attr("id")){ if($(view).attr("id") == $(btn).attr("id")){
$(view).show(); $(view).show();
} else { } else {
$(settingsButtons[i]).removeClass("active");
$(view).hide(); $(view).hide();
} }
}); });