From 0489fbb6853944dcaad97d0e95466a34dc65f0d1 Mon Sep 17 00:00:00 2001 From: Mario Date: Mon, 21 Jun 2021 18:21:19 +0000 Subject: theme: slightly more transparency for the backdrop --- view/theme/redbasic/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 5f469eb7b..2ed7a03c1 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -52,7 +52,7 @@ main { left: 0; width: 100%; height: 100%; - background: rgba(0, 0, 0, .5); + background: rgba(0, 0, 0, .3); cursor: pointer; z-index: 1028; } -- cgit v1.2.3 From c6b3bc5b203d8e615c4699a8050042b9e9989e09 Mon Sep 17 00:00:00 2001 From: Mario Date: Thu, 1 Jul 2021 09:26:20 +0000 Subject: redbasic: bump version limits --- view/theme/redbasic/php/theme.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/php/theme.php b/view/theme/redbasic/php/theme.php index 2b90ae85f..3c07e1582 100644 --- a/view/theme/redbasic/php/theme.php +++ b/view/theme/redbasic/php/theme.php @@ -4,8 +4,8 @@ * * Name: Redbasic * * Description: Hubzilla standard theme * * Version: 2.1 - * * MinVersion: 2.3.1 - * * MaxVersion: 6.0 + * * MinVersion: 5.9 + * * MaxVersion: 7.0 * * Author: Fabrixxm * * Maintainer: Mike Macgirvin * * Maintainer: Mario Vavti -- cgit v1.2.3 From cca3eb8c56f429e12d69033facb62ceda56cb27c Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Fri, 2 Jul 2021 17:49:03 +0200 Subject: work around the fact that sticky does not stick if a parent element has set overflow to hidden --- view/theme/redbasic/js/redbasic.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js index b0b8d5dfc..35811b524 100644 --- a/view/theme/redbasic/js/redbasic.js +++ b/view/theme/redbasic/js/redbasic.js @@ -139,12 +139,12 @@ function makeFullScreen(full) { function toggleAside() { $('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left'); if($('main').hasClass('region_1-on')){ - $('html, body').css('overflow-x', ''); + $('html, body').css({ 'position': '', 'left': '' }); $('main').removeClass('region_1-on') $('#overlay').remove(); } else { - $('html, body').css('overflow-x', 'hidden'); + $('html, body').css({ 'position': 'sticky', 'left': 0 }); $('main').addClass('region_1-on') $('
').appendTo('section'); } -- cgit v1.2.3 From 081d82218bc2e00169614f268278f7d9dc1e5402 Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Sat, 3 Jul 2021 14:27:55 +0200 Subject: implement a very simple swipe mechanism for bringing in left aside --- view/theme/redbasic/js/redbasic.js | 64 +++++++++++++++++++++++++++++++------- 1 file changed, 53 insertions(+), 11 deletions(-) (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js index 35811b524..1ce1a6d89 100644 --- a/view/theme/redbasic/js/redbasic.js +++ b/view/theme/redbasic/js/redbasic.js @@ -11,7 +11,7 @@ $(document).ready(function() { if($(window).width() < 992) { $('main').css('width', $(window).width() + $('aside').outerWidth() ); } else { - $('main').css('width', '100%' ); + $('main').css('width', '100%'); } }); } @@ -20,11 +20,18 @@ $(document).ready(function() { stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0); stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20); - $('#expand-aside').on('click', toggleAside); + $('#expand-aside').on('click', function() { + if($('main').hasClass('region_1-on')){ + toggleAside('left'); + } + else { + toggleAside('right'); + } + }); $('section').on('click', function() { if($('main').hasClass('region_1-on')){ - toggleAside(); + toggleAside('left'); } }); @@ -69,6 +76,39 @@ $(document).ready(function() { } } setInterval(function () {checkNotify();}, 10 * 1000); + + var touch_start = null; + window.addEventListener('touchstart', function(e) { + if (e.touches.length === 1){ + //just one finger touched + touch_start = e.touches.item(0).clientX; + } + else { + //a second finger hit the screen, abort the touch + touch_start = null; + } + }); + + window.addEventListener('touchend', function(e) { + let touch_offset = 50; //at least 100px are a swipe + let touch_max = 100; + if (touch_start) { + //the only finger that hit the screen left it + let touch_end = e.changedTouches.item(0).clientX; + + if (touch_end > (touch_start + touch_offset)) { + //a left -> right swipe + if (touch_start < touch_max) { + toggleAside('right'); + } + } + if (touch_end < (touch_start - touch_offset)) { + //a right -> left swipe + //toggleAside('left'); + } + } + }); + }); function setStyle(element, cssProperty) { @@ -136,16 +176,18 @@ function makeFullScreen(full) { } } -function toggleAside() { - $('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left'); - if($('main').hasClass('region_1-on')){ - $('html, body').css({ 'position': '', 'left': '' }); - $('main').removeClass('region_1-on') +function toggleAside(swipe) { + + if ($('main').hasClass('region_1-on') && swipe === 'left') { + $('#expand-aside-icon').addClass('fa-arrow-circle-right').removeClass('fa-arrow-circle-left'); + $('html, body').css('overflow-x', ''); + $('main').removeClass('region_1-on'); $('#overlay').remove(); } - else { - $('html, body').css({ 'position': 'sticky', 'left': 0 }); - $('main').addClass('region_1-on') + if (!$('main').hasClass('region_1-on') && swipe === 'right') { + $('#expand-aside-icon').removeClass('fa-arrow-circle-right').addClass('fa-arrow-circle-left'); + $('html, body').css('overflow-x', 'hidden'); + $('main').addClass('region_1-on'); $('
').appendTo('section'); } } -- cgit v1.2.3 From a1f7f7a966b9d70b4b80f9fe47e2fb76b2ed5681 Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Sat, 3 Jul 2021 14:36:27 +0200 Subject: since position sticky has no effect if overflow is hidden and the workarounds also have issues, we will automatically scroll to top when left aside is brought in --- view/theme/redbasic/js/redbasic.js | 1 + 1 file changed, 1 insertion(+) (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js index 1ce1a6d89..0ae81f93e 100644 --- a/view/theme/redbasic/js/redbasic.js +++ b/view/theme/redbasic/js/redbasic.js @@ -186,6 +186,7 @@ function toggleAside(swipe) { } if (!$('main').hasClass('region_1-on') && swipe === 'right') { $('#expand-aside-icon').removeClass('fa-arrow-circle-right').addClass('fa-arrow-circle-left'); + $(window).scrollTop(0); $('html, body').css('overflow-x', 'hidden'); $('main').addClass('region_1-on'); $('
').appendTo('section'); -- cgit v1.2.3 From 86d471834e26e2b12b8cab4d8759f5f7257a71e0 Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Sat, 3 Jul 2021 14:52:00 +0200 Subject: do not call stickyScroll() on small screens - it is not functional --- view/theme/redbasic/js/redbasic.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js index 0ae81f93e..b867244fb 100644 --- a/view/theme/redbasic/js/redbasic.js +++ b/view/theme/redbasic/js/redbasic.js @@ -17,8 +17,10 @@ $(document).ready(function() { } $('#css3-calc').remove(); // Remove the test element - stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0); - stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20); + if($(window).width() > 992) { + stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0); + stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20); + } $('#expand-aside').on('click', function() { if($('main').hasClass('region_1-on')){ -- cgit v1.2.3 From c43f5017167d1ca61f1180c0b8b9579731f0a7da Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Sun, 4 Jul 2021 13:57:20 +0200 Subject: ux fixes --- view/theme/redbasic/css/style.css | 8 ++++---- view/theme/redbasic/js/redbasic.js | 30 +++++++++++++----------------- 2 files changed, 17 insertions(+), 21 deletions(-) (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 2ed7a03c1..e0be54f63 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -47,11 +47,11 @@ main { } #overlay { - position: absolute; + position: fixed; top: 0; - left: 0; - width: 100%; - height: 100%; + left: $left_aside_widthpx; + width: 100vw; + height: 100vh; background: rgba(0, 0, 0, .3); cursor: pointer; z-index: 1028; diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js index b867244fb..05f590c53 100644 --- a/view/theme/redbasic/js/redbasic.js +++ b/view/theme/redbasic/js/redbasic.js @@ -17,10 +17,8 @@ $(document).ready(function() { } $('#css3-calc').remove(); // Remove the test element - if($(window).width() > 992) { - stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0); - stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20); - } + stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0); + stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20); $('#expand-aside').on('click', function() { if($('main').hasClass('region_1-on')){ @@ -31,13 +29,6 @@ $(document).ready(function() { } }); - $('section').on('click', function() { - if($('main').hasClass('region_1-on')){ - toggleAside('left'); - } - }); - - $('.usermenu').click(function() { if($('#navbar-collapse-1, #navbar-collapse-2').hasClass('show')){ $('#navbar-collapse-1, #navbar-collapse-2').removeClass('show'); @@ -80,10 +71,15 @@ $(document).ready(function() { setInterval(function () {checkNotify();}, 10 * 1000); var touch_start = null; + var touch_max = 70; + window.addEventListener('touchstart', function(e) { if (e.touches.length === 1){ //just one finger touched touch_start = e.touches.item(0).clientX; + if (touch_start < touch_max) { + $('html, body').css('overflow-y', 'hidden'); + } } else { //a second finger hit the screen, abort the touch @@ -92,8 +88,9 @@ $(document).ready(function() { }); window.addEventListener('touchend', function(e) { - let touch_offset = 50; //at least 100px are a swipe - let touch_max = 100; + $('html, body').css('overflow-y', ''); + + let touch_offset = 30; //at least 100px are a swipe if (touch_start) { //the only finger that hit the screen left it let touch_end = e.changedTouches.item(0).clientX; @@ -182,15 +179,14 @@ function toggleAside(swipe) { if ($('main').hasClass('region_1-on') && swipe === 'left') { $('#expand-aside-icon').addClass('fa-arrow-circle-right').removeClass('fa-arrow-circle-left'); - $('html, body').css('overflow-x', ''); + $('html, body').css({ 'position': '', left: '' }); $('main').removeClass('region_1-on'); $('#overlay').remove(); } if (!$('main').hasClass('region_1-on') && swipe === 'right') { $('#expand-aside-icon').removeClass('fa-arrow-circle-right').addClass('fa-arrow-circle-left'); - $(window).scrollTop(0); - $('html, body').css('overflow-x', 'hidden'); + $('html, body').css({ 'position': 'sticky', 'left': '0px'}); $('main').addClass('region_1-on'); - $('
').appendTo('section'); + $('
').appendTo('body').one('click', function() { toggleAside('left'); }); } } -- cgit v1.2.3 From 50ead82bc4a3dc0a3289cbfcf9625dcd5a04da4d Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Sun, 4 Jul 2021 14:05:48 +0200 Subject: remove redundant z-index --- view/theme/redbasic/css/style.css | 1 - 1 file changed, 1 deletion(-) (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index e0be54f63..3b74c5ea1 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -54,7 +54,6 @@ main { height: 100vh; background: rgba(0, 0, 0, .3); cursor: pointer; - z-index: 1028; } h1, .h1 { -- cgit v1.2.3 From d45df824edaf6f05ca33df31ece56846809685d0 Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Mon, 5 Jul 2021 10:42:36 +0200 Subject: redbasic: close left aside if hq control button is clicked --- view/theme/redbasic/js/redbasic.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'view/theme/redbasic') diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js index 05f590c53..a354682d7 100644 --- a/view/theme/redbasic/js/redbasic.js +++ b/view/theme/redbasic/js/redbasic.js @@ -108,6 +108,10 @@ $(document).ready(function() { } }); + $(document).on('hz:hqControlsClickAction', function(e) { + toggleAside('left'); + }); + }); function setStyle(element, cssProperty) { -- cgit v1.2.3