Design of the meet timeline, improved a lot

src/routes/_components/status/MeetStatus.html

@@ -10,6 +10,8 @@
 >
   <div class="meet-content">
     <StatusSidebar {...params} />
+  </div>
+  <div class="meet-msg">
     {#if content && (showContent || preloadHiddenContent)}
       <StatusContent {...params} shown={showContent}/>
     {/if}

src/routes/_layout.html

@@ -1,5 +1,12 @@
 <Nav {page} />
 
+<div id="meet-navigation" style="display: none">
+  <div id="overlay"></div>
+  <a id="back" href="javascript:window.history.back()" >
+    <svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 24 24" width="40"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path></svg>
+  </a>
+</div>
+
 <div id="chat-compose-global" style="visibility: collapse">
   <table class="compose"><tbody>
     <tr>

src/scss/themes/ozark.scss

@@ -61,6 +61,38 @@ body.chat {
   }
 }
 
+body.meet {
+
+  div#sapper {
+    background: #959595;
+  }
+
+  div#meet-navigation {
+
+    div#overlay {
+      width: 100vw;
+      height: 5em;
+      position: fixed;
+      background-image: linear-gradient(#0009, transparent);
+      z-index: 1;
+      overflow: visible;
+      pointer-events: none;
+    }
+
+    a#back {
+      position: fixed;
+      z-index: 10;
+      right: 0;
+
+      svg {
+        fill: #ffffffa3;
+      }
+    }
+
+  }
+
+}
+
 div#chat-party-global {
   display: flex;
   height: 3.6em;
@@ -197,20 +229,40 @@ main {
 }
 
 div.main-content.meet {
+  padding-top: 0 !important;
+
+  main {
+    width: initial !important;
+  }
+
+  div.infinite-scroll-page {
+    background: transparent !important;
+  }
 
   div.virtual-list-item {
-    height: 100vh;
 
     div.meet-content {
+      height: 100vh;
+      max-height: 50em;
       background-image: linear-gradient(transparent, #000000bf);
 
       a.status-sidebar > img.avatar {
-        width: 10em;
+        margin: 1em;
-        height: 10em;
+        width: 12em;
+        height: 12em;
       }
+
+    }
+
+    div.meet-msg {
+
       div.status-content {
+        position: absolute;
+        padding: 2em;
+        bottom: 8%;
         color: #fff;
       }
+
     }
 
     div.meet-footer {
@@ -220,7 +272,7 @@ div.main-content.meet {
       width: 100%;
       height: 4em;
       padding: 0 1em;
-      background-color: #000000d4;
+      background-image: linear-gradient(transparent, #000);
 
       a {
         color: #fff !important;
@@ -231,6 +283,12 @@ div.main-content.meet {
     }
 
   }
+
+  div.dynamic-page-banner[role="navigation"] {
+    visibility: collapse;
+    display: none;
+  }
+
 }
 
 div.main-content.chat {
@@ -246,6 +304,7 @@ div.main-content.chat {
     display: none;
   }
 }
+
 div.main-content.direct {
   button.dynamic-page-go-back {
     visibility: collapse;

static/fedilove-no-react.js

@@ -218,6 +218,7 @@ function fedilove_customization() {
 
     document.body.classList = '';
     document.querySelector('.main-content').classList = "main-content";
+    document.querySelector('#meet-navigation').style = 'display: none';
     document.querySelector('#chat-compose-global').style = 'visibility: collapse';
     document.querySelector('#chat-party-hide').style = 'display: none !important';
     document.querySelector('nav#main-nav > ul.main-nav-ul').style = '';
@@ -322,9 +323,13 @@ function fedilove_customization() {
     }
     else if (window.location.pathname == '/direct') {
         $('div.main-content').addClass('direct');
+        $('body').addClass('direct');
     }
     else if (window.location.pathname == '/federated') {
         $('div.main-content').addClass('meet');
+        $('body').addClass('meet');
+        document.querySelector('nav#main-nav > ul.main-nav-ul').style = 'display: none !important';
+        document.querySelector('#meet-navigation').style = '';
     }
     else if (window.location.pathname.startsWith('/notifications/mentions')) {
         $('nav.notification-filters li > a.focus-fix').attr('onclick', 'return false;');