aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
authorMario Vavti <mario@mariovavti.com>2016-12-19 12:46:36 +0100
committerMario Vavti <mario@mariovavti.com>2016-12-19 12:47:55 +0100
commit1e1b51bc1c9bd3f94670ecfa1c1e5b9f6a4402bc (patch)
treec284c0b667006b5cd607a79cc4aa5f97275df18a /view
parent127772e1b4a2853d98635e7144757a9df5ffb4a0 (diff)
downloadvolse-hubzilla-1e1b51bc1c9bd3f94670ecfa1c1e5b9f6a4402bc.tar.gz
volse-hubzilla-1e1b51bc1c9bd3f94670ecfa1c1e5b9f6a4402bc.tar.bz2
volse-hubzilla-1e1b51bc1c9bd3f94670ecfa1c1e5b9f6a4402bc.zip
make sticky aside available for small screens. we had to get rid of the transition effect for this to work reliably
Diffstat (limited to 'view')
-rw-r--r--view/theme/redbasic/css/style.css10
-rw-r--r--view/theme/redbasic/js/redbasic.js38
-rw-r--r--view/theme/redbasic/php/style.php2
3 files changed, 28 insertions, 22 deletions
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 5c9c7397f..8a632088f 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -22,6 +22,8 @@ body {
color: $font_colour;
margin: 0px;
height: 100%;
+ overflow-x: hidden;
+
}
aside {
@@ -30,6 +32,10 @@ aside {
max-width: $aside_widthpx;
}
+aside#region_1 {
+ border-right: 1px solid transparent;
+}
+
main {
margin-left: auto;
margin-right: auto;
@@ -1833,10 +1839,6 @@ nav .badge.mail-update:hover {
}
main {
- transition: all 0.25s ease-in-out;
- }
-
- main {
left: -$aside_widthpx;
width: calc( 100% + $aside_widthpx );
}
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 8fb1117ce..4a18db8ff 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -8,34 +8,32 @@ $(document).ready(function() {
if( $('#css3-calc').width() == 10) {
$(window).resize(function() {
if($(window).width() < 767) {
- $('main').css('width', $(window).width() + 287 );
+ $('main').css('width', $(window).width() + $('aside').outerWidth() );
} else {
$('main').css('width', '100%' );
}
});
}
+
$('#css3-calc').remove(); // Remove the test element
- if($(window).outerWidth() > 767) {
- $('#left_aside_wrapper').stick_in_parent({
- offset_top: $('nav').outerHeight(true)
- });
- }
+ $('#left_aside_wrapper').stick_in_parent({
+ offset_top: $('nav').outerHeight(true)
+ });
- $(window).resize(function() {
- if($(window).outerWidth() > 767) {
- $('#left_aside_wrapper').stick_in_parent({
- offset_top: $('nav').outerHeight(true)
- });
- }
- else {
- $('#left_aside_wrapper').trigger("sticky_kit:detach");
+ $('#expand-aside').on('click', toggleAside);
+
+ $('section').on('click', function() {
+ if($('main').hasClass('region_1-on')){
+ toggleAside();
}
});
- $('#expand-aside').click(function() {
- $('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left');
- $('main').toggleClass('region_1-on');
+ $(window).on('scroll', function() {
+ if($('main').hasClass('region_1-on') && $(window).scrollLeft() > 5){
+ $(window).scrollLeft(0);
+ toggleAside();
+ }
});
if($('aside').length && $('aside').html().length === 0) {
@@ -92,3 +90,9 @@ function makeFullScreen(full) {
$(document.body).trigger("sticky_kit:recalc");
}
}
+
+function toggleAside() {
+ $(window).scroll();
+ $('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left');
+ $('main').toggleClass('region_1-on');
+}
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 2db0d4c44..9b994ebdf 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -165,7 +165,7 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
$x .= $schemecss;
}
- $aside_width = 287;
+ $aside_width = 288;
// left aside and right aside are 285px + converse width
if($align_left) {