make sticky aside available for small screens. we had to get rid of the transition effect for this to work reliably

This commit is contained in:
Mario Vavti 2016-12-19 12:46:36 +01:00
parent 9c5f2de4ec
commit 3ad3d3037f
3 changed files with 28 additions and 22 deletions

View File

@ -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;
@ -1838,10 +1844,6 @@ nav .badge.mail-update:hover {
border-right: 1px solid $nav_bd;
}
main {
transition: all 0.25s ease-in-out;
}
main {
left: -$aside_widthpx;
width: calc( 100% + $aside_widthpx );

View File

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

View File

@ -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) {