nogafam
/
fedilove-ui
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

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

This commit is contained in:
Bofh 2021-01-03 01:51:44 +01:00
parent b354cc7031
commit 276c6e3b6e
3 changed files with 76 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/_layout.html
View File

@ -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">

47
src/scss/themes/ozark.scss
View File

@ -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;
}

36
static/fedilove-no-react.js
View File

@ -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;');