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

redesign landing & fix footer

This commit is contained in:
Joshua Arts 2018-07-25 14:43:05 -04:00
parent 6a668149b6
commit a9892d2dcb
9 changed files with 61 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/landing/bbb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
app/assets/images/landing/mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
app/assets/images/landing/world.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

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

@ -26,9 +26,11 @@
$background-color: #F5F7FB; $background-color: #F5F7FB;
$error-background-color: #EFE6E6; $error-background-color: #EFE6E6;
$header-height: 65px;
$footer-height: 65px; $footer-height: 65px;
html, body { html, body {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: white; background-color: white;
@ -39,17 +41,19 @@ a {
cursor: pointer; cursor: pointer;
} }
.wrapper { .header {
height: calc(100% - #{$footer-height}); height: $header-height;
}
.page {
position: relative; position: relative;
height: auto;
min-height: calc(100% - #{$header-height} - #{$footer-height});
} }
.footer { .footer {
position: fixed;
height: $footer-height; height: $footer-height;
width: 100%; width: 100%;
bottom: 0;
z-index: 5;
} }
.table-responsive { .table-responsive {

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

@ -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;
}

4
app/views/layouts/application.html.erb
View File

@ -18,9 +18,9 @@
</head> </head>
<body class="app-background" data-controller="<%= params[:controller] %>" data-action="<%= params[:action] %>"> <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? %> <% if bigbluebutton_endpoint_default? %>
<%= render "shared/error_banner" do %> <%= render "shared/error_banner" do %>
<i class="fas fa-exclamation-triangle"></i> <i class="fas fa-exclamation-triangle"></i>

36
app/views/main/index.html.erb
View File

@ -6,17 +6,37 @@
<% end %> <% end %>
<% end %> <% end %>
<div class="background landing-section"> <div class="container">
<div class="d-flex align-items-center" style="height: 100%;"> <div class="row pb-8">
<div class="container text-center"> <div class="col-md-8 col-sm-12">
<h1 id="main-text" class="font-weight-400 responsive-header"><%= t("landing.welcome") %></h1> <p id="main-text" class="font-weight-400 display-4"><%= t("landing.welcome").html_safe %></p>
<h4 class="text-muted"><%= t("landing.about") %></h4> <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", class: "d-inline-block p-3", target: "_blank" do %> <%= link_to "https://youtu.be/Hso8yLzkqj8", target: "_blank" do %>
<h4><%= t("landing.video") %> <i class="far fa-play-circle"></i></h4> <h4><%= t("landing.video") %> <i class="far fa-play-circle"></i></h4>
<% end %> <% end %>
</div> </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> </div>
<%= render "shared/features" %>
</div> </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>

4
app/views/shared/_footer.html.erb
View File

@ -1,4 +1,4 @@
<footer class="footer page-footer"> <footer class="footer">
<p class="left position-absolute mx-3">v <%= Greenlight::Application::VERSION %></p> <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> </footer>

6
config/locales/en.yml
View File

@ -46,9 +46,9 @@ en:
invalid_credentials: Login failed due to invalid credentials. Are you sure you entered them correctly? 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:" invite_message: "To invite someone to the meeting, send them this link:"
landing: landing:
about: A simple front end for your BigBlueButton Open Source Web Conferencing Server. 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 Greenlight. welcome: Welcome to <span class="green-grad">Greenlight</span>.
video: Watch a tutorial on using Greenlight video: Checkout our tutorial on using Greenlight
upgrade: Show me how to upgrade to 2.0! upgrade: Show me how to upgrade to 2.0!
version: We've released a new version of Greenlight, but your database isn't compatible. 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. ldap_error: Unable to connect to the LDAP server. Please check your LDAP configuration in the env file and ensure your server is running.