aboutsummaryrefslogtreecommitdiffstats
path: root/view/theme/redbasic
diff options
context:
space:
mode:
authorMario Vavti <mario@mariovavti.com>2021-07-04 13:57:20 +0200
committerMario Vavti <mario@mariovavti.com>2021-07-04 13:57:20 +0200
commitc43f5017167d1ca61f1180c0b8b9579731f0a7da (patch)
tree5ce080aa9ef0c0b7824ab5a5b6efc0f2217de2e0 /view/theme/redbasic
parent86d471834e26e2b12b8cab4d8759f5f7257a71e0 (diff)
downloadvolse-hubzilla-c43f5017167d1ca61f1180c0b8b9579731f0a7da.tar.gz
volse-hubzilla-c43f5017167d1ca61f1180c0b8b9579731f0a7da.tar.bz2
volse-hubzilla-c43f5017167d1ca61f1180c0b8b9579731f0a7da.zip
ux fixes
Diffstat (limited to 'view/theme/redbasic')
-rw-r--r--view/theme/redbasic/css/style.css8
-rw-r--r--view/theme/redbasic/js/redbasic.js30
2 files changed, 17 insertions, 21 deletions
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');
- $('<div id="overlay"></div>').appendTo('section');
+ $('<div id="overlay"></div>').appendTo('body').one('click', function() { toggleAside('left'); });
}
}