Multiple improvements to make it look to competitors

* Notification dot is up and shows no number
* Notifications shows on direct instead of "notifications"
* Asterisk icon instead of notifications because it will be the "matches" page (following/followers on Mastodon)
* Make person name appear under the person main photo
* Testing NOPE,MAYBE,MATCH buttons (layout)
* Name on chat has now white-space: nowrap
* Fixed bug where you could slide images when there is none on profile, and make navigation icons appear

bin/svgs.js

@@ -1,6 +1,7 @@
 module.exports = [
   { id: 'pinafore-logo', src: 'src/static/sailboat.svg', inline: true },
   { id: 'fa-bell', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bell.svg', inline: true },
+  { id: 'fa-asterisk', src: 'src/thirdparty/font-awesome-svg-png/white/svg/asterisk.svg', inline: true },
   { id: 'fa-users', src: 'src/thirdparty/font-awesome-svg-png/white/svg/users.svg', inline: true },
   { id: 'fa-globe', src: 'src/thirdparty/font-awesome-svg-png/white/svg/globe.svg' },
   { id: 'fa-gear', src: 'src/thirdparty/font-awesome-svg-png/white/svg/gear.svg', inline: true },

src/routes/_components/NavItem.html

@@ -162,10 +162,10 @@
         })
       },
       showBadge: ({ name, $hasNotifications, $hasFollowRequests }) => (
-        (name === 'notifications' && $hasNotifications) || (name === 'community' && $hasFollowRequests)
+        (name === 'direct' && $hasNotifications) || (name === 'community' && $hasFollowRequests)
       ),
       badgeNumber: ({ name, $numberOfNotifications, $numberOfFollowRequests }) => (
-        (name === 'notifications' && $numberOfNotifications) || (name === 'community' && $numberOfFollowRequests) || 0
+        (name === 'direct' && $numberOfNotifications) || (name === 'community' && $numberOfFollowRequests) || 0
       )
     },
     methods: {

src/routes/_components/NavItemIcon.html

@@ -2,7 +2,6 @@
   <div class="nav-link-svg-wrapper">
     <SvgIcon className="nav-link-svg" href={svg} />
     <span class="nav-link-badge nav-link-badge-digits-{badgeDigits}" aria-hidden="true">
-      {badgeNumberToShow}
     </span>
   </div>
 {:else}
@@ -74,8 +73,7 @@
       badgeNumber: 0
     }),
     computed: {
-      badgeDigits: ({ badgeNumber }) => Math.min(3, badgeNumber.toString().length),
+      badgeDigits: ({ badgeNumber }) => Math.min(3, badgeNumber.toString().length)
-      badgeNumberToShow: ({ badgeNumber }) => (badgeNumber < 100 ? badgeNumber.toString() : '99+')
     },
     components: {
       SvgIcon

src/routes/_components/status/MeetStatus.html

@@ -11,6 +11,9 @@
 >
   <div class="meet-content">
     <StatusSidebar {...params} />
+    <div class="person-info">
+      <StatusAuthorName {...params} />
+    </div>
   </div>
   <div class="meet-msg">
     {#if content && (showContent || preloadHiddenContent)}
@@ -18,7 +21,6 @@
     {/if}
   </div>
   <div class="meet-footer">
-    <StatusAuthorName {...params} />
     <StatusAuthorHandle {...params} />
     <StatusRelativeDate {...params} {...timestampParams} />
     {#if showCard }

src/routes/_layout.html

@@ -15,6 +15,25 @@
   <div id="profile-nav" style="display: none">
     <div id="prev" style="display: none" onclick="return window.fediloveUI.meetAccountImageDirection('prev')"></div>
     <div id="next" onclick="return window.fediloveUI.meetAccountImageDirection('next')"></div>
+    <div id="account-actions">
+      <div class="container">
+        <div class="item">
+          <div class="btn-do">
+            <button>NOPE</button>
+          </div>
+        </div>
+        <div class="item">
+          <div class="btn-do">
+            <button>MAYBE</button>
+          </div>
+        </div>
+        <div class="item">
+          <div class="btn-do">
+            <button>YES!</button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 

src/routes/_store/computations/navComputations.js

@@ -75,7 +75,7 @@ export function navComputations (store) {
         {
           name: 'notifications',
           href: '/notifications',
-          svg: '#fa-bell',
+          svg: '#fa-asterisk',
           label: 'intl.notifications'
         },
         {
@@ -87,7 +87,7 @@ export function navComputations (store) {
         {
           name: 'settings',
           href: '/settings',
-          svg: '#fa-gear',
+          svg: '#fa-user',
           label: 'intl.settings'
         }
       ]

src/scss/themes/ozark.scss

@@ -70,7 +70,6 @@ nav#main-nav > ul.main-nav-ul {
     width: .8em;
     height: .8em;
     background: red;
-    position: relative;
     top: -1.2em;
     left: .5em;
     border: none !important;
@@ -145,7 +144,32 @@ body.meet, body.account {
 
     div#profile-nav {
 
-      div {
+      div#account-actions {
+        position: fixed;
+        bottom: 10%;
+        height: 5em;
+        width: 100vw;
+        z-index: 2;
+
+        div.container {
+          background: red;
+          display: flex;
+          max-width: 50em;
+          margin: auto;
+        }
+
+        div.item {
+          display: flex;
+          width: 100%;
+
+          div.btn-do {
+            margin: auto;
+            /*button { width: 0; height: 0; }*/
+          }
+        }
+      }
+
+      div#prev, div#next {
         cursor: pointer;
         position: fixed;
         height: 100vh;
@@ -212,6 +236,10 @@ div#chat-party-global {
     display: flex;
     width: 100%;
     padding-left: 1em;
+
+    span#account-display-name {
+      white-space: nowrap;
+    }
     a {
       display: flex;
       font-weight: bold;
@@ -437,15 +465,17 @@ div.main-content.meet {
         height: 12em;
       }
 
-      a.status-author-name {
+      div.person-info {
-        position: relative;
+        padding: 0 1em;
-        left: -1.4em;
+
-        color: #fff;
+        a.status-author-name {
-        font-size: 2.2em;
+          position: relative;
-        font-family: Arial;
+          color: #fff;
-        top: -1.6em;
+          font-size: 2.2em;
-        text-shadow: 1px 1px 2px #0000003b;
+          font-family: Arial;
-        text-decoration: none;
+          text-shadow: 1px 1px 2px #0000003b;
+          text-decoration: none;
+        }
       }
 
     }
@@ -521,7 +551,7 @@ div.timeline div.virtual-list-item {
 
 }
 
-div.timeline > div.the-list {
+div.main-content.chat div.timeline > div.the-list {
 
   div.list-item {
 

static/fedilove-no-react.js

@@ -484,6 +484,9 @@ function fedilove_customization() {
         $('body').addClass('direct');
         $('nav#main-nav li.main-nav-li svg')[2].classList += ' active';
     }
+    else if (window.location.pathname == '/settings') {
+        $('nav#main-nav li.main-nav-li svg')[3].classList += ' active';
+    }
     else if (window.location.pathname.startsWith('/accounts/'))
     {
         $('div.main-content').addClass('account');
@@ -502,11 +505,6 @@ function fedilove_customization() {
         cloneBackSvg('#meet-navigation > #profile-nav > #prev');
         cloneBackSvg('#meet-navigation > #profile-nav > #next');
         fediloveUI.meetAccountImageDirection(null);
-        fediloveUI.registerSwipeOnElement('main.infinite-scroll-page', function(isRightSwipe) {
-            if (isRightSwipe)
-                fediloveUI.meetAccountImageDirection('prev');
-            else fediloveUI.meetAccountImageDirection('next');
-        });
 
         // clone the first element and include the account header image
         var countmax = 0;
@@ -532,7 +530,13 @@ function fedilove_customization() {
                     // clone the first element, insert it at the next position
                     const _e = $('div.virtual-list > div.virtual-list-item:last').clone();
                     $(_e).insertAfter('div.virtual-list > div.virtual-list-item:last');
+
                     _applyImageTo('div.virtual-list > div.virtual-list-item:last div.status-media img');
+                    fediloveUI.registerSwipeOnElement('main.infinite-scroll-page', function(isRightSwipe) {
+                        if (isRightSwipe)
+                            fediloveUI.meetAccountImageDirection('prev');
+                        else fediloveUI.meetAccountImageDirection('next');
+                    });
                 }
 
                 clearInterval(_this);