harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
view/theme/redbasic/css/style.css
View File

@ -22,6 +22,8 @@ body {
color: $font_colour; color: $font_colour;
margin: 0px; margin: 0px;
height: 100%; height: 100%;
overflow-x: hidden;
} }
aside { aside {
@ -30,6 +32,10 @@ aside {
max-width: $aside_widthpx; max-width: $aside_widthpx;
} }
aside#region_1 {
border-right: 1px solid transparent;
}
main { main {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -1838,10 +1844,6 @@ nav .badge.mail-update:hover {
border-right: 1px solid $nav_bd; border-right: 1px solid $nav_bd;
} }
main {
transition: all 0.25s ease-in-out;
}
main { main {
left: -$aside_widthpx; left: -$aside_widthpx;
width: calc( 100% + $aside_widthpx ); width: calc( 100% + $aside_widthpx );

38
view/theme/redbasic/js/redbasic.js
View File

@ -8,34 +8,32 @@ $(document).ready(function() {
if( $('#css3-calc').width() == 10) { if( $('#css3-calc').width() == 10) {
$(window).resize(function() { $(window).resize(function() {
if($(window).width() < 767) { if($(window).width() < 767) {
$('main').css('width', $(window).width() + 287 ); $('main').css('width', $(window).width() + $('aside').outerWidth() );
} else { } else {
$('main').css('width', '100%' ); $('main').css('width', '100%' );
} }
}); });
} }
$('#css3-calc').remove(); // Remove the test element $('#css3-calc').remove(); // Remove the test element
if($(window).outerWidth() > 767) { $('#left_aside_wrapper').stick_in_parent({
$('#left_aside_wrapper').stick_in_parent({ offset_top: $('nav').outerHeight(true)
offset_top: $('nav').outerHeight(true) });
});
}
$(window).resize(function() { $('#expand-aside').on('click', toggleAside);
if($(window).outerWidth() > 767) {
$('#left_aside_wrapper').stick_in_parent({ $('section').on('click', function() {
offset_top: $('nav').outerHeight(true) if($('main').hasClass('region_1-on')){
}); toggleAside();
}
else {
$('#left_aside_wrapper').trigger("sticky_kit:detach");
} }
}); });
$('#expand-aside').click(function() { $(window).on('scroll', function() {
$('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left'); if($('main').hasClass('region_1-on') && $(window).scrollLeft() > 5){
$('main').toggleClass('region_1-on'); $(window).scrollLeft(0);
toggleAside();
}
}); });
if($('aside').length && $('aside').html().length === 0) { if($('aside').length && $('aside').html().length === 0) {
@ -92,3 +90,9 @@ function makeFullScreen(full) {
$(document.body).trigger("sticky_kit:recalc"); $(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');
}

2
view/theme/redbasic/php/style.php
View File

@ -165,7 +165,7 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
$x .= $schemecss; $x .= $schemecss;
} }
$aside_width = 287; $aside_width = 288;
// left aside and right aside are 285px + converse width // left aside and right aside are 285px + converse width
if($align_left) { if($align_left) {