infeeeee/dis-2019
1
0
Fork 0
Code Issues 6 Pull Requests Releases 19 Wiki Activity

black icons on scroll on mobile

Browse Source
This commit is contained in:
infeeeee
2019-09-06 21:37:20 +02:00
parent 1595691bc3
commit 752ff9c0aa
3 changed files with 52 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/base.css
View File

@@ -285,6 +285,9 @@ html *::selection {
background-repeat: no-repeat;
width: 5rem;
height: 5rem; }
.wrapper .header .dis-logo.black {
background-image: url(../img/dis-logo-black.png);
background-image: url(../img/dis-logo-black.svg); }
@media (min-width: 769px) {
.wrapper .header .dis-logo {
background-image: url(../img/dis-logo-black.png);
@@ -338,6 +341,9 @@ html *::selection {
.wrapper .header .menubutton-icon {
background-image: url(../img/dis-plus-black.png);
background-image: url(../img/dis-plus-black.svg); } }
.wrapper .header .menubutton-icon.black {
background-image: url(../img/dis-plus-black.png);
background-image: url(../img/dis-plus-black.svg); }
.wrapper .header .kereso-icon {
background-image: url(../img/kereso_icon-white.png);
background-image: url(../img/kereso_icon-white.svg); }

52
js/scripts.js
View File

@@ -132,23 +132,38 @@
var isMasonryPage = isArchive || isHome || isSearch || isSearchNoResults
/* ========================================================================== */
/* FUNCTIONS */
/* ========================================================================== */
/* -------------------------------------------------------------------------- */
/* Black logo on scroll on mobile */
/* -------------------------------------------------------------------------- */
$.fn.scrollStopped = function (callback) {
var that = this, $this = $(that);
$this.scroll(function (ev) {
clearTimeout($this.data('scrollTimeout'));
$this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev));
});
};
var rotateMenuButton = function () {
if ($(".menubutton button").hasClass("rotated")) {
$(".menubutton button").removeClass("rotated");
} else {
$(".menubutton button").addClass("rotated").addClass("inverted");
}
var isMenuOpen = function () {
let menuopen = ($('#sidebar').attr('data-simplersidebar') == 'opened') ? true : false
return menuopen
}
$(window).scroll(function () {
if (isMobile && !isMenuOpen()) {
$('.dis-logo, .menubutton-icon').addClass('black')
}
})
/* ========================================================================== */
$(window).scrollStopped(function () {
if (isMobile && !isMenuOpen()) {
$('.dis-logo, .menubutton-icon').removeClass('black')
}
})
/* -------------------------------------------------------------------------- */
/* SEARCH */
/* ========================================================================== */
/* -------------------------------------------------------------------------- */
// on mobile add to sidebar:
// if (isMobile) {
@@ -182,6 +197,13 @@
/* MENU */
/* ========================================================================== */
var rotateMenuButton = function () {
if ($(".menubutton button").hasClass("rotated")) {
$(".menubutton button").removeClass("rotated");
} else {
$(".menubutton button").addClass("rotated").addClass("inverted");
}
}
function mwCalc() {
let ww = calcWidths()
@@ -230,12 +252,12 @@
},
callbacks: {
animation: {
open: function (){
open: function () {
if (isMobile) {
$('.social-link, .events-link').removeClass('hidden')
$('.social-link, .events-link').removeClass('hidden')
}
},
close: function () {
close: function () {
$(".menubutton button").removeClass("inverted")
if (isMobile) {
$('.social-link, .events-link').addClass('hidden')
@@ -653,6 +675,8 @@
}
}
/* -------------------------- on scroll on desktop -------------------------- */
var scrolltimer = false;
$(window).on('wheel DOMMouseScroll', function (e) {
//e.preventDefault();

8
sass/base.scss
View File

@@ -543,6 +543,10 @@ $v-unit-6: 24rem;
background-repeat: no-repeat;
width: $h-unit-1;
height: $h-unit-1;
&.black {
background-image: url(../img/dis-logo-black.png);
background-image: url(../img/dis-logo-black.svg);
}
@media #{$tablet} {
background-image: url(../img/dis-logo-black.png);
@@ -596,6 +600,10 @@ $v-unit-6: 24rem;
.menubutton-icon {
@include bw-icon(dis-plus);
&.black {
background-image: url(../img/dis-plus-black.png);
background-image: url(../img/dis-plus-black.svg);
}
}
.kereso-icon {