From bd86b7936a4ef9f5ccb0d2284fe8c4be157e604c Mon Sep 17 00:00:00 2001 From: Pig Fang Date: Mon, 1 Apr 2019 09:56:04 +0800 Subject: [PATCH] Layout tiny tweaks --- resources/assets/src/scripts/home-page.ts | 17 +++++ resources/assets/src/scripts/route.ts | 5 +- .../assets/tests/scripts/home-page.test.ts | 21 ++++++ resources/views/admin/index.blade.php | 1 - resources/views/index.blade.php | 69 +------------------ resources/views/skinlib/master.blade.php | 6 -- 6 files changed, 43 insertions(+), 76 deletions(-) create mode 100644 resources/assets/src/scripts/home-page.ts create mode 100644 resources/assets/tests/scripts/home-page.test.ts diff --git a/resources/assets/src/scripts/home-page.ts b/resources/assets/src/scripts/home-page.ts new file mode 100644 index 00000000..e999bf82 --- /dev/null +++ b/resources/assets/src/scripts/home-page.ts @@ -0,0 +1,17 @@ +function handler() { + const header = document.querySelector('.main-header') + /* istanbul ignore else */ + if (header) { + window.addEventListener('scroll', () => { + if (window.scrollY >= window.innerHeight * 2 / 3) { + header.classList.remove('transparent') + } else { + header.classList.add('transparent') + } + }) + } +} + +window.addEventListener('load', handler) + +export default handler diff --git a/resources/assets/src/scripts/route.ts b/resources/assets/src/scripts/route.ts index 888d1abd..3b386d00 100644 --- a/resources/assets/src/scripts/route.ts +++ b/resources/assets/src/scripts/route.ts @@ -1,7 +1,10 @@ export default [ { path: '/', - module: [() => import('../styles/home.styl')], + module: [ + () => import('../styles/home.styl'), + () => import('./home-page'), + ], }, { path: 'user', diff --git a/resources/assets/tests/scripts/home-page.test.ts b/resources/assets/tests/scripts/home-page.test.ts new file mode 100644 index 00000000..5cb2eb99 --- /dev/null +++ b/resources/assets/tests/scripts/home-page.test.ts @@ -0,0 +1,21 @@ +import handler from '@/scripts/home-page' + +test('should be transparent at top', () => { + Object.assign(window, { innerHeight: 900 }) + document.body.innerHTML = '
' + handler() + window.dispatchEvent(new Event('scroll')) + expect( + document.querySelector('header')!.classList.contains('transparent') + ).toBeTrue() +}) + +test('should not be transparent at bottom', () => { + Object.assign(window, { innerHeight: 900, scrollY: 800 }) + document.body.innerHTML = '
' + handler() + window.dispatchEvent(new Event('scroll')) + expect( + document.querySelector('header')!.classList.contains('transparent') + ).toBeFalse() +}) diff --git a/resources/views/admin/index.blade.php b/resources/views/admin/index.blade.php index 5dfa859f..87e4ac5b 100644 --- a/resources/views/admin/index.blade.php +++ b/resources/views/admin/index.blade.php @@ -3,7 +3,6 @@ @section('title', trans('general.dashboard')) @section('content') -
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php index 0103f252..6b2db9e7 100644 --- a/resources/views/index.blade.php +++ b/resources/views/index.blade.php @@ -15,7 +15,7 @@ -
+