Layout fix (#4070)

* Initial work on layout

* Fix layout

* Small layout fixes

* esf

* Improve pathname search

* Improve logic a bit

* Swap back to nested if logic

* Improve comments

Co-authored-by: farhatahmad <ahmad.af.farhat@gmail.com>

app/assets/stylesheets/application.bootstrap.scss

@@ -24,6 +24,17 @@ body {
   background: white;
 }
 
+.background-sm-buffer {
+  background-color: white;
+  height: $background-sm-buffer-height;
+}
+
+.background-lg-buffer {
+  background-color: white;
+  height: $background-lg-buffer-height;
+}
+
+
 // TODO - samuel: make responsive/add breakpoints
 .btn-xlg {
   font-size: 1.5rem;
@@ -121,6 +132,7 @@ input.search-bar {
 }
 
 #footer {
+  margin-top: $footer-buffer-height;
   max-height: $footer-height;
   a {
     text-decoration: none !important;
@@ -152,6 +164,7 @@ input.search-bar {
 }
 
 #nav-user-dropdown {
+  padding-right: 0;
   color: $black !important;
   &:hover {
     color: $black !important;

app/assets/stylesheets/helpers.scss

@@ -4,18 +4,15 @@
 }
 
 .wide-background-room {
-  background: white;
-  margin: 0 -600rem;
-  padding: 0.25rem 600rem;
-  //TODO - samuel: need to find a solution for this
-  height: 302px;
+  margin-top: -299px;
+  z-index: 1;
+  position: relative;
 }
 
 .wide-background-rooms {
-  background: white;
-  margin: 0 -600rem;
-  padding: 0.25rem 600rem;
-  height: 90px;
+  margin-top: -90px;
+  z-index: 1;
+  position: relative;
 }
 
 .vertical-center {
@@ -26,12 +23,12 @@
   transform: translateY(-50%);
 }
 
-.regular-height {
-  height: calc(100vh - $header-height - $footer-height);
+.no-header-height {
+  height: calc(100vh - $footer-height - $footer-buffer-height);
 }
 
-.no-header-height {
-  height: calc(100vh - $footer-height);
+.regular-height {
+  min-height: calc(100vh - $header-height - $footer-height - $footer-buffer-height);
 }
 
 .cursor-pointer {

app/assets/stylesheets/rooms.scss

 #room-card {
   border: 2px solid transparent !important;
-  width: 305px;
+  width: 311px;
 
   &:hover {
     border: 2px solid var(--brand-color-light) !important;

app/assets/stylesheets/variables.scss

@@ -9,4 +9,7 @@ $muted: #6c757d;
 $black: #212529;
 
 $header-height: 70px;
+$background-sm-buffer-height: 90px;
+$background-lg-buffer-height: 300px;
+$footer-buffer-height: 35px;
 $footer-height: 35px;

app/javascript/App.jsx

@@ -7,6 +7,7 @@ import Header from './components/shared_components/Header';
 import { useAuth } from './contexts/auth/AuthProvider';
 import Footer from './components/shared_components/Footer';
 import useSiteSetting from './hooks/queries/site_settings/useSiteSetting';
+import BackgroundBuffer from './components/shared_components/BackgroundBuffer';
 
 export default function App() {
   const currentUser = useAuth();
@@ -29,6 +30,7 @@ export default function App() {
   return (
     <>
       {currentUser?.signed_in && <Header /> }
+      <BackgroundBuffer />
       <Container className={pageHeight}>
         <Outlet />
       </Container>

app/javascript/components/rooms/RoomsList.jsx

@@ -31,7 +31,7 @@ export default function RoomsList() {
           body={<CreateRoomForm mutation={mutationWrapper} userId={currentUser.id} />}
         />
       </Stack>
-      <Row className="g-4 pb-4 mt-4">
+      <Row className="g-4 mt-4">
         {
           // eslint-disable-next-line react/no-array-index-key
           (isLoading && [...Array(8)].map((val, idx) => <Col key={idx} className="mt-0 mb-4"><RoomPlaceHolder /></Col>))

app/javascript/components/shared_components/BackgroundBuffer.jsx

+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import { useLocation, useParams } from 'react-router-dom';
+
+export default function BackgroundBuffer() {
+  const location = useLocation();
+  const { friendlyId } = useParams();
+
+  // The background buffer is needed only in /rooms and /rooms/friendly_id
+  if (location?.pathname.startsWith('/rooms')) {
+    if (location?.pathname === `/rooms/${friendlyId}`) {
+      return <Container className="background-lg-buffer" fluid />;
+    }
+    return <Container className="background-sm-buffer" fluid />;
+  }
+
+  return null;
+}

app/javascript/components/shared_components/Footer.jsx

@@ -13,23 +13,16 @@ export default function Footer() {
   if (isLoading) return <Spinner />;
 
   return (
-    <footer id="footer" className="footer background-whitesmoke text-center py-2">
-      <span className="text-muted"> { t('powered_by') }</span>
+    <footer id="footer" className="footer background-whitesmoke text-center pb-2">
       <a href="https://docs.bigbluebutton.org/greenlight_v3/gl3-install.html" target="_blank" rel="noreferrer">Greenlight</a>
       <span className="text-muted"> {env.VERSION_TAG} </span>
       { terms
         && (
-        <>
-          <span> | </span>
-          <a href={terms} target="_blank" rel="noreferrer">{ t('admin.site_settings.administration.terms') }</a>
-        </>
+          <a className="ps-3" href={terms} target="_blank" rel="noreferrer">{ t('admin.site_settings.administration.terms') }</a>
         )}
       { privacyPolicy
         && (
-        <>
-          <span> | </span>
-          <a href={privacyPolicy} target="_blank" rel="noreferrer">{ t('admin.site_settings.administration.privacy_policy') }</a>
-        </>
+          <a className="ps-3" href={privacyPolicy} target="_blank" rel="noreferrer">{ t('admin.site_settings.administration.privacy_policy') }</a>
         )}
     </footer>
   );

public/locales/en.json

@@ -19,7 +19,6 @@
   "or": "Or",
   "online": "Online",
   "need_help": "Need help?",
-  "powered_by": "Powered by ",
   "are_you_sure": "Are you sure?",
   "return_home": "Return Home",
   "created_at": "Created at",