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:
parent
9c5f2de4ec
commit
3ad3d3037f
@ -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 );
|
||||
|
@ -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');
|
||||
}
|
||||
|
@ -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) {
|
||||
|
Reference in New Issue
Block a user