Improved the chat + added basic test layer of party information header

src/intl/en-US.js

@@ -488,7 +488,7 @@ export default {
   }`,
   pinnedStatus: 'Pinned toot',
   rebloggedYou: 'boosted your toot',
-  favoritedYou: 'favorited your toot',
+  favoritedYou: 'liked your message',
   followedYou: 'followed you',
   pollYouCreatedEnded: 'A poll you created has ended',
   pollYouVotedEnded: 'A poll you voted on has ended',
@@ -499,7 +499,7 @@ export default {
   longPost: 'Long post',
   // Accessible status labels
   accountRebloggedYou: '{account} boosted your toot',
-  accountFavoritedYou: '{account} favorited your toot',
+  accountFavoritedYou: '{account} liked your message',
   rebloggedByAccount: 'Boosted by {account}',
   contentWarningContent: 'Content warning: {spoiler}',
   hasMedia: 'has media',

src/routes/_components/Nav.html

@@ -12,6 +12,19 @@
       </li>
     {/each}
 	</ul>
+<div id="chat-party-hide" style="display: none !important">
+  <div style="width: 100%;background:#fff">
+  <div id="chat-party-global">
+    <div id="image">
+      <img alt="Your possible crush" src="https://masto.nogafam.es/system/accounts/avatars/000/000/001/original/046e094da8e86b0c.png?1607635502"/>
+    </div>
+    <div id="name">
+      <span>My Possible Next CRUSH :)</span>
+    </div>
+  </div>
+  </div>
+  <div style="height: 10px;background: #ff0c73;opacity: .1;"></div>
+</div>
 </nav>
 {#if navShortcuts}
   <svelte:component this={navShortcuts}/>

src/routes/_components/dialog/components/ModalDialog.html

@@ -54,7 +54,6 @@
   .modal-dialog-contents {
     z-index: 10020;
     padding: 0;
-    border: 1px solid var(--main-border);
     border-radius: 2px;
     display: flex;
     flex-direction: row;

src/scss/themes/ozark.scss

@@ -39,15 +39,56 @@ $deemphasized-text-color: #939393;
     --nav-a-border: #{$nav-a-border};
     --nav-a-border-hover: #{$nav-a-border-hover};
     --nav-active-bg: #{$nav-active-bg};
+    --nav-total-height: 3.8em;
     --main-border: #{$main-border};
     --article-bg: #{$article-bg};
     --deemphasized-text-color: #{$deemphasized-text-color};
+    --very-deemphasized-text-color: #{$deemphasized-text-color};
+}
+
+nav#main-nav > ul.main-nav-ul {
+  height: var(--nav-total-height);
 }
 
 div.timeline {
   padding-bottom: 10em;
 }
 
+body.chat {
+  nav#main-nav {
+    background: transparent !important;
+  }
+}
+
+div#chat-party-global {
+  display: flex;
+  height: 3.6em;
+  max-width: 60em;
+  margin: auto;
+  padding: .2em 1em;
+
+  div#image {
+    display: flex;
+    img {
+      border-radius: 100%;
+      width: 3em;
+      height: 3em;
+      margin: auto 0;
+    }
+  }
+
+  div#name {
+    display: flex;
+    width: 100%;
+    padding-left: 1em;
+    span {
+      font-weight: bold;
+      margin: auto 0;
+    }
+  }
+
+}
+
 div#chat-compose-global {
   z-index: 10;
   position: fixed;
@@ -57,7 +98,7 @@ div#chat-compose-global {
 
   table.compose {
     background: #ececec;
-    box-shadow: 0px -3px 10px #0000003b;
+    box-shadow: 0px -3px 10px #0000001c;
     max-width: 60em;
     width: 100%;
     margin: auto;
@@ -111,14 +152,24 @@ div#chat-compose-global {
 
     textarea:focus {
       outline: none !important;
-      border: 1px solid #2222224a;
+      border: 5px dashed #ff00ef4a;
       color: black;
-      box-shadow: 1px 1px 10px #ff0154;
     }
   }
 }
 
+main {
+  border: none !important;
+}
+
 div.main-content.chat {
+
+  background: var(--main-bg);
+
+  main {
+    padding-top: 4em;
+  }
+
   div.dynamic-page-banner[role="navigation"] {
     visibility: collapse;
     display: none;
@@ -132,21 +183,37 @@ div.main-content.direct {
 }
 
 div.timeline > div.the-list {
+
   div.list-item {
+
     article.status-article.mymsg {
       background: #fbfbfb;
       float: right;
 
       a.status-favs-reblogs.status-favs {
-          visibility: collapse;
-          display: none;
+        cursor: initial !important;
+      }
+
+      a.status-favs-reblogs.status-favs.liked-msg > svg {
+        fill: #ff00ef !important;
+      }
+
+    }
+
+    article.status-article.partymsg {
+      a.status-favs-reblogs.status-favs.liked-msg {
+        svg {
+          fill: red !important;
+        }
       }
     }
+
     article.status-article {
       background: #e8e8e8;
       border-radius: 1.5em;
       outline: none !important;
       margin: .5em 1em;
+      padding-left: .8em;
       float: left;
       max-width: 70%;
       font-size: .94em;
@@ -182,12 +249,6 @@ div.timeline > div.the-list {
         display: none;
       }
 
-      a.status-favs-reblogs.status-favs.liked-msg {
-        svg {
-          fill: red !important;
-        }
-      }
-
       a.status-favs-reblogs.status-favs {
         position: fixed;
         right: 1em;
@@ -215,16 +276,22 @@ div.timeline > div.the-list {
       }
 
     }
+
     article.status-in-own-thread {
       float: initial !important;
       max-width: initial !important;
       border-radius: .5em !important;
       box-shadow: 6px 6px 6px #a2a5db !important;
 
+      a.status-author-name {
+        margin-left: 0;
+      }
+
       div.status-content {
         font-size: .94em !important;
       }
     }
+
   }
 }
 

static/fedilove-no-react.js

@@ -144,13 +144,19 @@ var fediloveEvents = {
 // this is our URL-based customizations made by JavaScript
 var intervalChatCssChange = null;
 function fedilove_customization() {
+    document.body.classList = '';
     document.querySelector('.main-content').classList = "main-content";
     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 = '';
 
     if (window.location.pathname.startsWith('/statuses/'))
     {
         $('div.main-content').addClass('chat');
+        $('body').addClass('chat');
         document.querySelector('#chat-compose-global').style = '';
+        document.querySelector('#chat-party-hide').style = '';
+        document.querySelector('nav#main-nav > ul.main-nav-ul').style = 'display: none !important';
 
         // add some animations
         var style = document.createElement('style');
@@ -171,6 +177,8 @@ function fedilove_customization() {
                     if ($(this).find('a.status-author-name').attr('href').endsWith(`/accounts/${account_id}`)) {
                         $(this).addClass('mymsg');
                         theint = 250;
+                    } else {
+                        $(this).addClass('partymsg');
                     }
                 });
 
@@ -185,6 +193,11 @@ function fedilove_customization() {
                     }
                 });
 
+                // remove liking functionality from our own messages
+                $('div.the-list article.status-article.mymsg a.status-favs-reblogs').each(function(i) {
+                    $(this).attr('onclick', 'return false;');
+                });
+
             }, theint);
         };