diff --git a/app/assets/javascripts/wait.js b/app/assets/javascripts/wait.js index 7b0a47ac..b07588d5 100644 --- a/app/assets/javascripts/wait.js +++ b/app/assets/javascripts/wait.js @@ -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', diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 3ab92069..7b80ceb7 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -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 . - @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; } diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 26e6b04f..616e3290 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -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; - } \ No newline at end of file diff --git a/app/assets/stylesheets/rooms.scss b/app/assets/stylesheets/rooms.scss index c1c3c554..42daca51 100644 --- a/app/assets/stylesheets/rooms.scss +++ b/app/assets/stylesheets/rooms.scss @@ -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; +} diff --git a/app/views/main/index.html.erb b/app/views/main/index.html.erb index 3a447db9..7e1e41ea 100644 --- a/app/views/main/index.html.erb +++ b/app/views/main/index.html.erb @@ -1,7 +1,7 @@ -
+
-

Welcome to BigBlueButton.

+

Welcome to BigBlueButton.

A simple front end for your BigBlueButton Open Source Web Conferencing Server.

<%= link_to "https://www.youtube.com/watch?v=yGX3JCv7OVM&feature=youtu.be", class: "p-3", target: "_blank" do %> diff --git a/app/views/rooms/join.html.erb b/app/views/rooms/join.html.erb index 5ab7a080..caa6b7ac 100644 --- a/app/views/rooms/join.html.erb +++ b/app/views/rooms/join.html.erb @@ -1,14 +1,14 @@ <%= render 'shared/room_event' do %> <%= form_for room_path(@room), method: :post do |f| %> -
+
<%= 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? %> - <%= f.submit "Join", class: "btn btn-primary px-7 main-large" %> + <%= f.submit "Join", class: "btn btn-primary px-7 join-form" %>
<% end %> diff --git a/app/views/rooms/show.html.erb b/app/views/rooms/show.html.erb index f97d58da..3bbd0384 100644 --- a/app/views/rooms/show.html.erb +++ b/app/views/rooms/show.html.erb @@ -1,20 +1,20 @@ -
+

<%= @room.name %> <% if current_user.main_room == @room %> - + <% end %>

<%= @room.sessions %> Sessions | <%= @recordings.length %> Recordings

-
+
@@ -26,7 +26,7 @@
-->
-
+
<% if @is_running %> <%= button_to "Join", room_path(@room), class: "btn btn-primary btn-block px-7 start-button float-right" %> <% else %> diff --git a/app/views/shared/_error_banner.html.erb b/app/views/shared/_error_banner.html.erb index 3aaeef82..4d9f59f6 100644 --- a/app/views/shared/_error_banner.html.erb +++ b/app/views/shared/_error_banner.html.erb @@ -1,3 +1,3 @@ -
+
<%= yield %>
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb index ba67cefb..d31353b0 100644 --- a/app/views/shared/_header.html.erb +++ b/app/views/shared/_header.html.erb @@ -27,7 +27,7 @@ <%= current_user.name %> -