diff --git a/src/routes/_layout.html b/src/routes/_layout.html index 8824c1d8..f7e5a32a 100644 --- a/src/routes/_layout.html +++ b/src/routes/_layout.html @@ -6,6 +6,10 @@
+
diff --git a/src/scss/themes/ozark.scss b/src/scss/themes/ozark.scss index 9dd3911f..0ef3a73f 100644 --- a/src/scss/themes/ozark.scss +++ b/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; } diff --git a/static/fedilove-no-react.js b/static/fedilove-no-react.js index 5e2800fc..ac5abe1c 100644 --- a/static/fedilove-no-react.js +++ b/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(){ - var touchsurface = document.getElementById('anim-swipe'),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); - fediloveUI.meetPageGoToCurrentAccount(swiperightBol); e.preventDefault(); }, false); - }(); - + fediloveUI.registerSwipeOnElement('#meet-navigation #anim-swipe', function(swiperightBol) { + fediloveUI.meetPageGoToCurrentAccount(swiperightBol) + }); } else if (window.location.pathname.startsWith('/notifications/mentions')) { $('nav.notification-filters li > a.focus-fix').attr('onclick', 'return false;');