Added image navigation icons (not functionality) on accounts/{account} page

src/routes/_layout.html

@@ -6,6 +6,10 @@
     <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 id="anim-swipe" onclick="return window.fediloveUI.meetPageGoToCurrentAccount();"></div>
+  <div id="profile-nav" style="display: none">
+    <div id="prev"></div>
+    <div id="next"></div>
+  </div>
 </div>
 
 <div id="chat-compose-global" style="visibility: collapse">

src/scss/themes/ozark.scss

@@ -91,7 +91,7 @@ body.meet, body.account {
       }
     }
 
-    a#back:focus {
+    a#back:focus, a#back:active {
       background: #ffffff1c;
     }
 
@@ -110,6 +110,49 @@ body.meet, body.account {
 
     }
 
+    div#profile-nav {
+
+      div {
+        cursor: pointer;
+        position: fixed;
+        height: 100vh;
+        display: flex;
+        z-index: 1;
+
+        svg {
+          position: relative;
+          margin: auto;
+          fill: #fff;
+        }
+
+      }
+
+      div#prev {
+        padding-right: 20%;
+
+        svg {
+          left: -.8em;
+        }
+      }
+      div#prev:focus, div#prev:active {
+        background-image: linear-gradient(to right, #fdfdfd1f, transparent);
+      }
+
+      div#next {
+        padding-left: 20%;
+        right: 0;
+
+        svg {
+          left: .8em;
+          transform: rotate(180deg);
+        }
+      }
+      div#next:focus, div#next:active {
+        background-image: linear-gradient(to right, transparent, #fdfdfd1f);
+      }
+
+    }
+
   }
 
 }
@@ -166,7 +209,7 @@ div#chat-party-global {
       }
     }
 
-    a:focus {
+    a:focus, a:active {
       background: #eee;
     }
 

static/fedilove-no-react.js

@@ -60,6 +60,19 @@ function api_send_message() {
 }
 
 var fediloveUI = {
+    registerSwipeOnElement: function(selector, cbackFunc) {
+        var touchsurface = document.querySelector(selector),startX,startY,dist,threshold = 150,allowedTime = 200,elapsedTime,startTime;
+        touchsurface.addEventListener('touchstart', function(e){
+            var touchobj = e.changedTouches[0]; dist = 0; startX = touchobj.pageX; startY = touchobj.pageY;
+            startTime = new Date().getTime(); e.preventDefault();
+        }, false);
+        touchsurface.addEventListener('touchmove', function(e){ e.preventDefault() }, false);
+        touchsurface.addEventListener('touchend', function(e){
+            var touchobj = e.changedTouches[0]; dist = touchobj.pageX - startX; elapsedTime = new Date().getTime() - startTime;
+            var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(touchobj.pageY - startY) <= 100);
+            cbackFunc(swiperightBol); e.preventDefault();
+        }, false);
+    },
     meetPageGoToCurrentAccount: function(isRightSwipe) { 
         isRightSwipe = isRightSwipe || false;
         const elements = $('div.virtual-list > div.virtual-list-item > article');
@@ -236,6 +249,7 @@ function fedilove_customization() {
     document.body.classList = '';
     document.querySelector('.main-content').classList = "main-content";
     document.querySelector('#meet-navigation').style = 'display: none';
+    document.querySelector('#meet-navigation > #profile-nav').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 = '';
@@ -364,7 +378,17 @@ function fedilove_customization() {
         $('body').addClass('account');
         document.querySelector('nav#main-nav > ul.main-nav-ul').style = 'display: none !important';
         document.querySelector('#meet-navigation').style = '';
+        document.querySelector('#meet-navigation > #profile-nav').style = '';
         $('#meet-navigation > #anim-swipe').html('');
+
+        // prev and next navigation
+        const cloneBackSvg = function(selector) {
+            $(selector).html('');
+            $(selector).append(
+              $('#meet-navigation > #back > svg').clone());
+        };
+        cloneBackSvg('#meet-navigation > #profile-nav > #prev');
+        cloneBackSvg('#meet-navigation > #profile-nav > #next');
     }
     else if (window.location.pathname == '/federated')
     {
@@ -382,15 +406,9 @@ function fedilove_customization() {
                it.attr('style', 'animation: fadeOut .5s linear infinite');
            }, (i*250), elem);
         }
-        const _= function(){
+        fediloveUI.registerSwipeOnElement('#meet-navigation #anim-swipe', function(swiperightBol) {
-            var touchsurface = document.getElementById('anim-swipe'),startX,startY,dist,threshold = 150,allowedTime = 200,elapsedTime,startTime;
+            fediloveUI.meetPageGoToCurrentAccount(swiperightBol)
-	    touchsurface.addEventListener('touchstart', function(e){ var touchobj = e.changedTouches[0]; dist = 0; startX = touchobj.pageX; startY = touchobj.pageY; startTime = new Date().getTime(); e.preventDefault(); }, false);
+        });
-            touchsurface.addEventListener('touchmove', function(e){ e.preventDefault() }, false);
-            touchsurface.addEventListener('touchend', function(e){ var touchobj = e.changedTouches[0]; dist = touchobj.pageX - startX; elapsedTime = new Date().getTime() - startTime;
-                var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(touchobj.pageY - startY) <= 100);
-                fediloveUI.meetPageGoToCurrentAccount(swiperightBol); e.preventDefault(); }, false);
-        }();
-
     }
     else if (window.location.pathname.startsWith('/notifications/mentions')) {
         $('nav.notification-filters li > a.focus-fix').attr('onclick', 'return false;');