From acdc71b1f4e06060ad861b0976b91a4561fb9006 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Tue, 2 Apr 2019 13:37:33 -0500 Subject: [PATCH] Done --- view/template/layout/basic.php | 2 +- web/js/global.js | 27 ++++++++++++++++++++------- web/scss/components/_header.scss | 2 +- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/view/template/layout/basic.php b/view/template/layout/basic.php index 09234b89..2bf68a11 100644 --- a/view/template/layout/basic.php +++ b/view/template/layout/basic.php @@ -3,7 +3,7 @@ - + { }); // Fix for touchscreen devices -const navigationLinks = document.querySelectorAll("drawer-title"); +if ("ontouchstart" in window) { + const navigationLinks = document.querySelectorAll("drawer-title"); -navigationLinks.forEach(navigationLink => { - navigationLink.ontouchstart = () => { - // $("drawer-navigation-helper").hide(); // rewrite this in vanilla JS - navigationLink.onhover.call(navigationLink); - }; -}); + navigationLinks.forEach(navigationLink => { + navigationLink.ontouchstart = () => { + hideNavigationHelpers(); + navigationLink.onhover.call(navigationLink); + }; + }); + + document.querySelector("body").addEventListener("touchstart", event => { + if (event.target !== document.querySelector("drawer-navigation")) + document.querySelector("drawer-wrap").hide(); + }); + + function hideNavigationHelpers() { + document.querySelectorAll("drawer-navigation-helper").forEach(navigationHelper => { + navigationHelper.style.display = "none"; + }); + } +} diff --git a/web/scss/components/_header.scss b/web/scss/components/_header.scss index 40bd8a05..7e87cef6 100644 --- a/web/scss/components/_header.scss +++ b/web/scss/components/_header.scss @@ -206,7 +206,7 @@ drawer-navigation-helper { width: 30vw; height: 100%; top: 3rem; left: -15vw; - background-color: bisque; // uncomment to view path + // background-color: bisque; // uncomment to view path border: none; // clip-path: ellipse(farthest-side closest-side at 50% 50%); display: block;