clean styling
This commit is contained in:
Josh
parent
7fadd6be69
commit
bc67d9e1e5
|
|
@ -7,7 +7,7 @@ $(document).on("turbolinks:load", function(){
|
|||
if(controller == "rooms" && action == "join"){
|
||||
App.waiting = App.cable.subscriptions.create({
|
||||
channel: "WaitingChannel",
|
||||
uid: $(".room-section").attr("room")
|
||||
uid: $(".background").attr("room")
|
||||
}, {
|
||||
received: function(data){
|
||||
if(data.action = "started"){ request_to_join_meeting(); }
|
||||
|
|
@ -23,7 +23,7 @@ var request_to_join_meeting = function(){
|
|||
url: window.location.pathname,
|
||||
type: 'POST',
|
||||
data: {
|
||||
join_name: $(".room-section").attr("join-name")
|
||||
join_name: $(".background").attr("join-name")
|
||||
},
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
|
|
|
|||
|
|
@ -14,22 +14,6 @@
|
|||
*= require_self
|
||||
*/
|
||||
|
||||
// BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
|
||||
//
|
||||
// Copyright (c) 2016 BigBlueButton Inc. and by respective authors (see below).
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or modify it under the
|
||||
// terms of the GNU Lesser General Public License as published by the Free Software
|
||||
// Foundation; either version 3.0 of the License, or (at your option) any later
|
||||
// version.
|
||||
//
|
||||
// BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
|
||||
// WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
|
||||
// PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU Lesser General Public License along
|
||||
// with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
@import "font-awesome-sprockets";
|
||||
@import "font-awesome";
|
||||
|
||||
|
|
@ -41,99 +25,19 @@
|
|||
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&subset=latin-ext);
|
||||
|
||||
$background-color: #F5F7FB;
|
||||
$rule-color: lightblue;
|
||||
$error-background-color: #EFE6E6;
|
||||
|
||||
$footer-height: 80px;
|
||||
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bottom-div {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.landing-section {
|
||||
position: relative;
|
||||
height: 45%;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
.room-section {
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
.danger-section {
|
||||
background-color: #efe6e6;
|
||||
}
|
||||
|
||||
.start-block {
|
||||
background-color: white;
|
||||
border: 3px solid lightblue;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.start-button {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
transform: translateY(-50%);
|
||||
margin-top: 50%;
|
||||
}
|
||||
|
||||
.main-large {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.join-button {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.center-page {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
iframe{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.feature-stamp {
|
||||
width: 7vw;
|
||||
height: 7vw;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.resp-header {
|
||||
font-size: 3.3vw;
|
||||
}
|
||||
|
||||
.font-weight-400 {
|
||||
font-weight: 400;
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
|
|
@ -147,130 +51,42 @@ html, body {
|
|||
bottom: 0px;
|
||||
}
|
||||
|
||||
.small-rule {
|
||||
width: 25%;
|
||||
border-width: 3px;
|
||||
background-color: $rule-color;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
height: 40%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.client-icon {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
height: 100%;
|
||||
.table-responsive {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.background {
|
||||
height: 350px;
|
||||
width: 100%;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
body[data-controller=landing].app-background {
|
||||
@extend .background;
|
||||
.error-section {
|
||||
background-color: $error-background-color;
|
||||
}
|
||||
|
||||
#alerts {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
margin-left: -250px;
|
||||
width: 500px;
|
||||
z-index: 999;
|
||||
.font-weight-400 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.center-block {
|
||||
float: none;
|
||||
.subtitle {
|
||||
font-size: 25px;
|
||||
}
|
||||
.center-panel-wrapper {
|
||||
height: 100%;
|
||||
|
||||
.force-bottom {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
}
|
||||
.center-panel {
|
||||
height: 100%;
|
||||
.center-panel-size {
|
||||
max-width: 1200px
|
||||
}
|
||||
.center-panel-content-size {
|
||||
height: 100%;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.invite-link-input {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.input-spacing {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.join-form-wrapper {
|
||||
.center-block {
|
||||
max-width: 400px;
|
||||
}
|
||||
.join-form {
|
||||
width: 100%;
|
||||
}
|
||||
.btn {
|
||||
width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.meeting-url-wrapper {
|
||||
.meeting-url {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-wrapper {
|
||||
text-align: center;
|
||||
.no-border-top {
|
||||
td {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.verticle-line {
|
||||
// parent must be position relative to work
|
||||
width: 1px;
|
||||
background-color: lightgray;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.invite-join-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.help-link {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding-right: 3px;
|
||||
.force-text-normal {
|
||||
color: #495057;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,120 +2,22 @@
|
|||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
|
||||
.meeting-url-button-group {
|
||||
padding-top: 5px;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
.responsive-header {
|
||||
font-size: 3.3vw;
|
||||
}
|
||||
|
||||
.meeting-url-qrcode-group {
|
||||
padding-top: 5px;
|
||||
width: 128px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.previously-joined, .actives {
|
||||
list-style-type: none;
|
||||
margin:auto;
|
||||
width: 200px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.meetings {
|
||||
|
||||
}
|
||||
|
||||
.rooms {
|
||||
|
||||
.table-wrapper {
|
||||
padding: 40px 50px 10px 50px;
|
||||
|
||||
#recordings {
|
||||
thead {
|
||||
th:after {
|
||||
content: none; //removes the sort icon in table header
|
||||
}
|
||||
}
|
||||
.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
.timeago {
|
||||
margin-left: 5px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-thumbnail{
|
||||
padding: 4px;
|
||||
background-color: white;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
|
||||
&.large{
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover + &.large{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.meeting-url-group {
|
||||
.landing-section {
|
||||
position: relative;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.recording-update-trigger {
|
||||
&.recording-unpublished {
|
||||
color: red;
|
||||
}
|
||||
|
||||
&.recording-unlisted {
|
||||
color: #e3a91e;
|
||||
}
|
||||
|
||||
&.recording-published {
|
||||
color: green;
|
||||
}
|
||||
.feature-stamp {
|
||||
width: 7vw !important;
|
||||
height: 7vw !important;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.fa-spinner {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
.feature-icon {
|
||||
transform: translateY(-50%);
|
||||
margin-top: 50%;
|
||||
}
|
||||
|
||||
.disabled-button {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.youtube-red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.cloud-blue {
|
||||
color: cornflowerblue;
|
||||
}
|
||||
|
||||
.green-check {
|
||||
color: limegreen;
|
||||
}
|
||||
|
||||
.top-buffer {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tooltip-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#youtube-footer{
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
@ -1,3 +1,24 @@
|
|||
// Place all the styles related to the Rooms controller here.
|
||||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
|
||||
.start-button {
|
||||
font-size: 26px !important;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
height: 40% !important;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.join-form {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
.join-input {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.home-indicator {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="landing-section">
|
||||
<div class="background landing-section">
|
||||
<div class="d-flex align-items-center" style="height: 100%;">
|
||||
<div class="container text-center">
|
||||
<h1 id="main-text" class="font-weight-400 resp-header">Welcome to BigBlueButton.</h1>
|
||||
<h1 id="main-text" class="font-weight-400 responsive-header">Welcome to BigBlueButton.</h1>
|
||||
<h4 class="text-muted">A simple front end for your BigBlueButton Open Source Web Conferencing Server.</h4>
|
||||
|
||||
<%= link_to "https://www.youtube.com/watch?v=yGX3JCv7OVM&feature=youtu.be", class: "p-3", target: "_blank" do %>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<%= render 'shared/room_event' do %>
|
||||
<%= form_for room_path(@room), method: :post do |f| %>
|
||||
<div class="input-group" style="height: 48px;">
|
||||
<div class="input-group join-input">
|
||||
<%= f.text_field :join_name,
|
||||
required: true,
|
||||
class: "form-control main-large",
|
||||
class: "form-control join-form",
|
||||
placeholder: "Enter your name!",
|
||||
value: "#{current_user ? current_user.name : ''}",
|
||||
readonly: !current_user.nil? %>
|
||||
<span class="input-group-append">
|
||||
<%= f.submit "Join", class: "btn btn-primary px-7 main-large" %>
|
||||
<%= f.submit "Join", class: "btn btn-primary px-7 join-form" %>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<div class="room-section pb-1">
|
||||
<div class="background pb-1">
|
||||
<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 mb-3 font-weight-400"><%= @room.name %>
|
||||
<% if current_user.main_room == @room %>
|
||||
<i class="fas fa-home align-top" style="font-size: 22px;"></i>
|
||||
<i class="fas fa-home align-top home-indicator"></i>
|
||||
<% end %>
|
||||
</h1>
|
||||
<h4 class="text-left mb-6"><%= @room.sessions %> Sessions | <%= @recordings.length %> Recordings</h4>
|
||||
<label class="form-label">Invite Participants</label>
|
||||
<form class="form-inline">
|
||||
<div class="input-icon" style="width: 45%;">
|
||||
<div class="input-icon invite-link-input">
|
||||
<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%;">
|
||||
<input id="invite-url" type="text" class="form-control w-100" value="<%= request.base_url + @room.invite_path %>" readonly="">
|
||||
</div>
|
||||
<div id="copy" class="btn btn-primary mx-2">
|
||||
<i class="fas fa-copy"></i>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</div> -->
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-12 bottom-div mt-5">
|
||||
<div class="col-lg-3 col-sm-12 force-bottom mt-5">
|
||||
<% if @is_running %>
|
||||
<%= button_to "Join", room_path(@room), class: "btn btn-primary btn-block px-7 start-button float-right" %>
|
||||
<% else %>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div class="pt-2 text-center text-danger danger-section pb-1">
|
||||
<div class="pt-2 text-center text-danger error-section pb-1">
|
||||
<%= yield %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<span class="text-default username"><%= current_user.name %></span>
|
||||
</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;">
|
||||
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow" x-placement="bottom-end">
|
||||
<%= link_to current_user.main_room, class: "dropdown-item" do %>
|
||||
<i class="dropdown-icon fas fa-home"></i> Home Room
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="room-section pb-9" room="<%= @room.uid %>" join-name="<%= @join_name %>">
|
||||
<div class="background pb-9" room="<%= @room.uid %>" join-name="<%= @join_name %>">
|
||||
<div class="container">
|
||||
<div class="row pt-9">
|
||||
<div class="col-lg-12 col-sm-12">
|
||||
<h4 class="text-left">You have been invited to join</h4>
|
||||
<h1 class="display-3 text-left mb-3 font-weight-400"><%= @room.name %></h1>
|
||||
<hr class="mt-2 float-left" style="width: 20%;">
|
||||
<hr class="mt-2 float-left w-25">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
<div class="col-10 offset-1 form-group">
|
||||
<div class="start-block">
|
||||
<%= form_for(:meeting, url: create_meeting_path) do |f| %>
|
||||
<div class="input-group" style="height: 70px;">
|
||||
<%= f.text_field :name, id: "name-input", class: "form-control main-large", placeholder: "Enter a meeting name!", autocomplete: :off %>
|
||||
<span class="input-group-append">
|
||||
<%= f.submit "Start", class: "btn btn-primary px-7 main-large" %>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="input-group align-center p-4">
|
||||
<div class="col-8">
|
||||
<label class="form-label">Invite Participants</label>
|
||||
<input id="invite-url" type="text" class="form-control" value="greenlight.com/m/your-meeting-name" readonly="">
|
||||
</div>
|
||||
<div class="col-4 mt-auto align-center">
|
||||
<button id="copy" class="btn btn-primary">
|
||||
<i class="fas fa-copy"></i>
|
||||
Copy
|
||||
</button>
|
||||
<button id="email" class="btn btn-primary">
|
||||
<i class="fas fa-envelope"></i>
|
||||
Email
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<div class="card">
|
||||
<div class="card-body p-1">
|
||||
<table class="table table-hover table-vcenter text-nowrap table-no-border">
|
||||
<tbody>
|
||||
<td style="border-top: none;">
|
||||
<tbody class="no-border-top">
|
||||
<td>
|
||||
<span class="stamp stamp-md bg-cyan">
|
||||
<% if room == current_user.main_room %>
|
||||
<i class="fas fa-home"></i>
|
||||
|
|
@ -11,8 +11,8 @@
|
|||
<% end %>
|
||||
</span>
|
||||
</td>
|
||||
<td style="border-top: none;">
|
||||
<h4 class="m-0 text-normal" style="color: #495057;"><%= room.name %></h4>
|
||||
<td>
|
||||
<h4 class="m-0 force-text-normal"><%= room.name %></h4>
|
||||
<div class="small text-muted">
|
||||
<% if room.sessions > 0 %>
|
||||
<i>Last session on <%= recording_date(room.last_session) %></i>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<% end %>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right" style="border-top: none;">
|
||||
<td class="text-right">
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
<div class="modal fade" id="selectClientModal" 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>Which client would you like to use?</h3>
|
||||
</div>
|
||||
|
||||
<hr class="small-rule">
|
||||
<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 client-icon p-2"><i class="fab fa-html5 fa-3x"></i></span>
|
||||
<p>HTML5</p>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="icon-input" value="2" class="selectgroup-input">
|
||||
<span class="selectgroup-button selectgroup-button-icon client-icon"><i class="fas fa-bolt fa-3x"></i></span>
|
||||
<p>Flash</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<p>We recommend you use the HTML5 client for the best experience.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<span class="avatar avatar-xxl mr-5 mt-2" style="background-image: url(<%= current_user.image %>)"></span>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="col-10" style="transform: translateY(25%);">
|
||||
<div class="col-10 mt-5">
|
||||
<%= f.text_field :image, class: "form-control #{form_is_invalid?(@user, :image)}", placeholder: "Profile Image URL" %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@ Rails.application.config.assets.version = '1.0'
|
|||
|
||||
# Precompile additional assets.
|
||||
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
|
||||
Rails.application.config.assets.precompile += %w(settings.js room.js wait.js)
|
||||
# Rails.application.config.assets.precompile += %w()
|
||||
|
|
|
|||
Reference in New Issue