forked from External/greenlight
redesign landing & fix footer
This commit is contained in:
Joshua Arts
parent
6a668149b6
commit
a9892d2dcb
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
|
|
@ -26,9 +26,11 @@
|
|||
$background-color: #F5F7FB;
|
||||
$error-background-color: #EFE6E6;
|
||||
|
||||
$header-height: 65px;
|
||||
$footer-height: 65px;
|
||||
|
||||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
|
|
@ -39,17 +41,19 @@ a {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: calc(100% - #{$footer-height});
|
||||
.header {
|
||||
height: $header-height;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: calc(100% - #{$header-height} - #{$footer-height});
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
height: $footer-height;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
|
|
|
|||
|
|
@ -29,3 +29,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-cycle img {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.img-cycle img:first-child {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.green-grad {
|
||||
background: linear-gradient(to right, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@
|
|||
</head>
|
||||
|
||||
<body class="app-background" data-controller="<%= params[:controller] %>" data-action="<%= params[:action] %>">
|
||||
<div class="wrapper">
|
||||
<%= render "shared/header" %>
|
||||
<%= render "shared/header" %>
|
||||
|
||||
<div class="page">
|
||||
<% if bigbluebutton_endpoint_default? %>
|
||||
<%= render "shared/error_banner" do %>
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
|
|
|
|||
|
|
@ -6,17 +6,37 @@
|
|||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<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 responsive-header"><%= t("landing.welcome") %></h1>
|
||||
<h4 class="text-muted"><%= t("landing.about") %></h4>
|
||||
|
||||
<%= link_to "https://youtu.be/Hso8yLzkqj8", class: "d-inline-block p-3", target: "_blank" do %>
|
||||
<div class="container">
|
||||
<div class="row pb-8">
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<p id="main-text" class="font-weight-400 display-4"><%= t("landing.welcome").html_safe %></p>
|
||||
<p class="text-muted h4" style="line-height: 22px;"><%= t("landing.about", href: link_to(t("bigbluebutton"), "http://bigbluebutton.org/", target: "_blank", class: "text-blue")).html_safe %></p>
|
||||
<br>
|
||||
<%= link_to "https://youtu.be/Hso8yLzkqj8", target: "_blank" do %>
|
||||
<h4><%= t("landing.video") %> <i class="far fa-play-circle"></i></h4>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12 img-cycle text-center">
|
||||
<%= image_tag("landing/world.png", class: "active") %>
|
||||
<%= image_tag("landing/bbb.png") %>
|
||||
<%= image_tag("landing/mobile.png") %>
|
||||
</div>
|
||||
</div>
|
||||
<%= render "shared/features" %>
|
||||
</div>
|
||||
|
||||
<%= render "shared/features" %>
|
||||
<script>
|
||||
var cycleImages = function(){
|
||||
var images = $('.img-cycle img');
|
||||
var now = images.filter(':visible');
|
||||
var next = now.next().length ? now.next() : images.first();
|
||||
var speed = 1500;
|
||||
|
||||
now.fadeOut(speed);
|
||||
next.fadeIn(speed);
|
||||
}
|
||||
|
||||
$(function() {
|
||||
setInterval(cycleImages, 5000);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<footer class="footer page-footer">
|
||||
<footer class="footer">
|
||||
<p class="left position-absolute mx-3">v <%= Greenlight::Application::VERSION %></p>
|
||||
<h5 class="text-center"><%= t("footer.powered_by", href: link_to(t("bigbluebutton"), "http://bigbluebutton.org/", target: "_blank")).html_safe %></h5>
|
||||
<h5 class="text-center"><%= t("footer.powered_by", href: link_to(t("bigbluebutton"), "http://bigbluebutton.org/", target: "_blank", class: "text-blue")).html_safe %></h5>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -46,9 +46,9 @@ en:
|
|||
invalid_credentials: Login failed due to invalid credentials. Are you sure you entered them correctly?
|
||||
invite_message: "To invite someone to the meeting, send them this link:"
|
||||
landing:
|
||||
about: A simple front end for your BigBlueButton Open Source Web Conferencing Server.
|
||||
welcome: Welcome to Greenlight.
|
||||
video: Watch a tutorial on using Greenlight
|
||||
about: Greenlight is a simple front-end for your %{href} open-source web conferencing server. You can create your own rooms to host sessions, or join others using a short and convenient link.
|
||||
welcome: Welcome to <span class="green-grad">Greenlight</span>.
|
||||
video: Checkout our tutorial on using Greenlight
|
||||
upgrade: Show me how to upgrade to 2.0!
|
||||
version: We've released a new version of Greenlight, but your database isn't compatible.
|
||||
ldap_error: Unable to connect to the LDAP server. Please check your LDAP configuration in the env file and ensure your server is running.
|
||||
|
|
|
|||
Loading…
Reference in New Issue