diff --git a/src/routes/_components/status/Status.html b/src/routes/_components/status/Status.html index ebc957ad..7a5b64aa 100644 --- a/src/routes/_components/status/Status.html +++ b/src/routes/_components/status/Status.html @@ -126,7 +126,8 @@ const { elementId, showContent } = this.get() const { disableTapOnStatus } = this.store.get() if (typeof window !== "undefined") { - if (!window.location.pathname.startsWith('/statuses/')) { + if (!window.location.pathname.startsWith('/statuses/') && + !window.location.pathname.startsWith('/accounts')) { registerClickDelegate(this, elementId, (e) => this.onClickOrKeydown(e)) } } diff --git a/src/scss/themes/ozark.scss b/src/scss/themes/ozark.scss index b4f9c01a..7ba6bc90 100644 --- a/src/scss/themes/ozark.scss +++ b/src/scss/themes/ozark.scss @@ -19,6 +19,9 @@ $nav-a-bg-hover: lighten($nav-bg, 25%); $nav-a-border: #ffa700; $nav-a-border-hover: #fff; $nav-active-bg: lighten($nav-a-selected-bg-hover, 15%); +$button-primary: #ff1b3b; +$button-primary-hover: lighten($button-primary, 25%); +$button-primary-active: lighten($button-primary, 10%); $main-border: #ececec; $article-bg: #fff; $deemphasized-text-color: #939393; @@ -32,9 +35,9 @@ $deemphasized-text-color: #939393; --banner-fill: #{$nav-bg}; --action-button-fill-color: #000; --button-primary-border: transparent; - --button-primary-bg: #{$nav-bg}; - --button-primary-bg-hover: #{$nav-a-bg-hover}; - --button-primary-bg-active: #{$nav-a-selected-bg}; + --button-primary-bg: #{$button-primary}; + --button-primary-bg-hover: #{$button-primary-hover}; + --button-primary-bg-active: #{$button-primary-active}; --main-bg: #{$main-bg-color}; --nav-bg: #{$nav-bg}; --nav-text-color: #{$nav-text-color}; @@ -63,6 +66,16 @@ nav#main-nav > ul.main-nav-ul { color: #fff !important; } + span.nav-link-badge { + width: .8em; + height: .8em; + background: red; + position: relative; + top: -1.2em; + left: .5em; + border: none !important; + } + svg.nav-link-svg.active { fill: var(--nav-svg-fill-hover) !important; } @@ -148,18 +161,18 @@ body.meet, body.account { } div#prev { - padding-right: 20%; + padding-right: 10%; svg { left: -.8em; } } div#prev:focus, div#prev:active { - background-image: linear-gradient(to right, #fdfdfd1f, transparent); + background-image: linear-gradient(to right, #7574744a, transparent); } div#next { - padding-left: 20%; + padding-left: 10%; right: 0; svg { @@ -168,7 +181,7 @@ body.meet, body.account { } } div#next:focus, div#next:active { - background-image: linear-gradient(to right, transparent, #fdfdfd1f); + background-image: linear-gradient(to right, transparent, #7574744a); } } diff --git a/static/fedilove-no-react.js b/static/fedilove-no-react.js index a6cfd350..5d61f958 100644 --- a/static/fedilove-no-react.js +++ b/static/fedilove-no-react.js @@ -61,37 +61,74 @@ function api_send_message() { var fediloveUI = { registerSwipeOnElement: function(selector, cbackFunc) { - var touchsurface = document.querySelector(selector),startX,startY,dist,threshold = 150,allowedTime = 200,elapsedTime,startTime; + var touchsurface; + if (typeof selector == "string") + touchsurface = document.querySelector(selector); + else if (typeof selector == "object") + touchsurface = selector; + else return true; + var startX,startY,dist,threshold = 30,allowedTime = 200,elapsedTime,startTime; touchsurface.addEventListener('touchstart', function(e){ - var touchobj = e.changedTouches[0]; dist = 0; startX = touchobj.pageX; startY = touchobj.pageY; + const 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); + const touchobj = e.changedTouches[0]; dist = touchobj.pageX - startX; elapsedTime = new Date().getTime() - startTime; + if (Math.abs(dist) < 20) { return e.preventDefault(); } + const swiperightBol = (elapsedTime <= allowedTime && dist >= threshold); cbackFunc(swiperightBol); e.preventDefault(); }, false); }, meetAccountImageDirection: function(direction) { + if (fediloveUI.meetAccountImageLocked) return; + fediloveUI.meetAccountImageLocked = true; + + var dontMove = false; if (direction === 'prev') fediloveData.meetAccountCurrentImg -= 1; else if (direction === 'next') fediloveData.meetAccountCurrentImg += 1; - const last = $('div.virtual-list > div.virtual-list-item').length - 1; - if (fediloveData.meetAccountCurrentImg > last) - fediloveData.meetAccountCurrentImg = last; - else if (fediloveData.meetAccountCurrentImg < 0) - fediloveData.meetAccountCurrentImg = 0; + else + dontMove = true; + const last = $('div.virtual-list > div.virtual-list-item').length - 1; + if (fediloveData.meetAccountCurrentImg > last) { + fediloveData.meetAccountCurrentImg = last > 0 ? last : 0; + dontMove = true; + } else if (fediloveData.meetAccountCurrentImg < 0) { + fediloveData.meetAccountCurrentImg = 0; + dontMove = true; + } + + document.querySelector('#meet-navigation > #profile-nav > #next').style = ''; + document.querySelector('#meet-navigation > #profile-nav > #prev').style = ''; if (fediloveData.meetAccountCurrentImg === last) document.querySelector('#meet-navigation > #profile-nav > #next').style = 'display: none'; else if (fediloveData.meetAccountCurrentImg === 0) document.querySelector('#meet-navigation > #profile-nav > #prev').style = 'display: none'; - else { - document.querySelector('#meet-navigation > #profile-nav > #next').style = ''; - document.querySelector('#meet-navigation > #profile-nav > #prev').style = ''; - } + + const _setSelectedVisible = function() { + if ($('div.virtual-list > div.virtual-list-item')[fediloveData.meetAccountCurrentImg] !== undefined) { + $('div.virtual-list > div.virtual-list-item').attr('style', 'display: none'); + $('div.virtual-list > div.virtual-list-item')[fediloveData.meetAccountCurrentImg].style = ''; + } + fediloveUI.meetAccountImageLocked = false; + }; + + if (dontMove === false) { + if (direction === 'next') + $('div.virtual-list')[0].style.animation = 'dismissMeet .25s linear 1'; + else if (direction === 'prev') + $('div.virtual-list')[0].style.animation = 'acceptMeet .25s linear 1'; + setTimeout(function() { + if ($('div.virtual-list')[0] !== undefined) { + $('div.virtual-list')[0].style.animation = ''; + _setSelectedVisible(); + } + }, 220); + } else { _setSelectedVisible() } + }, meetPageGoToCurrentAccount: function(isRightSwipe) { isRightSwipe = isRightSwipe || false; @@ -191,6 +228,7 @@ var fediloveFunctions = { var fediloveData = { chatAvatarCache: undefined, meetAccountCurrentImg: 0, + meetAccountImageLocked: false, gotEmojifyTextFunction: false, composeTxtKeypressEvent: false }; @@ -420,6 +458,12 @@ 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'); + }); } else if (window.location.pathname == '/federated') {