Update UI

public/js/app.js.LICENSE.txt

@@ -1,5 +1,5 @@
 /*!
- * Fuse.js v3.4.5 - Lightweight fuzzy-search (http://fusejs.io)
+ * Fuse.js v3.4.6 - Lightweight fuzzy-search (http://fusejs.io)
  * 
  * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me)
  * All Rights Reserved. Apache Software License 2.0
@@ -22,4 +22,4 @@ See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
 
-/*! choices.js v9.0.1 | © 2019 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
+/*! choices.js v9.1.0 | © 2021 Josh Johnson | https://github.com/jshjohnson/Choices#readme */

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=1d8832a55a90910e91ad",
-    "/css/app.css": "/css/app.css?id=543449437fc1da0337d7"
+    "/js/app.js": "/js/app.js?id=3bd7a17ae8879cea08888521628605ff",
+    "/css/app.css": "/css/app.css?id=89e4f1f71a090dfd4a24efae763e948f"
 }

resources/css/app.css

@@ -11,8 +11,8 @@
 @import "forms.css";
 @import "torchlight.css";
 @import "toc.css";
-@import "media-library.css";
-/*@import "rain.css";*/
+@import "header.css";
+/*@import "media-library.css";*/
 /*@import "christmas.css";*/
 
 :root {

resources/css/header.css

@@ -0,0 +1,7 @@
+.header.is-fixed {
+  @apply fixed inset-x-0 transform duration-300 bg-skin-menu/80 backdrop-blur;
+}
+
+.header.is-hidden {
+  transform: translateY(-100%);
+}

resources/js/app.js

@@ -2,11 +2,13 @@ import Alpine from 'alpinejs'
 import intersect from '@alpinejs/intersect'
 
 import internationalNumber from './plugins/internationalNumber'
+import { registerHeader } from './header'
 import './elements'
 import './helpers'
 import './editor'
 import './scrollspy'
-// import './rain'
+
+registerHeader()
 
 // Add Alpine to window object.
 window.Alpine = Alpine;

resources/js/header.js

@@ -0,0 +1,82 @@
+import { throttle } from '@helpers/timers'
+
+let $header = document.querySelector('.header')
+let currentTop = 0
+let previousTop = 0
+let scrolling = false
+const scrollDelta = 20
+let scrollOffset = $header ? $header.offsetHeight : 0
+
+// Les différents états possible du header
+const FIXED = 0
+const HIDDEN = 1
+const DEFAULT = 2
+let state = DEFAULT
+
+/**
+ * Fonction de changement d'état du header
+ *
+ * @param {number} newState
+ */
+function setState (newState) {
+  // Le header n'a pas changé d'état
+  if (newState === state) {
+    return
+  }
+
+  if (newState === HIDDEN) {
+    $header.classList.add('is-hidden')
+  } else if (newState === FIXED) {
+    $header.classList.remove('is-hidden')
+    $header.classList.add('is-fixed')
+  } else if (newState === DEFAULT) {
+    $header.classList.remove('is-hidden')
+    $header.classList.remove('is-fixed')
+  }
+
+  state = newState
+}
+
+const autoHideHeader = function () {
+  if (!$header) {
+    return
+  }
+  currentTop = document.documentElement.scrollTop
+  // Opacité sur le header
+  if (currentTop > $header.offsetHeight) {
+    if (currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
+      setState(HIDDEN)
+    } else if (previousTop - currentTop > scrollDelta) {
+      setState(FIXED)
+    }
+  } else {
+    setState(DEFAULT)
+  }
+  /**
+   // Masquage / affichage
+   if (previousTop - currentTop > scrollDelta) {
+    $header.classList.remove('is-hidden')
+  } else if (currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
+    $header.classList.add('is-hidden')
+  }
+   **/
+  previousTop = currentTop
+  scrolling = false
+}
+
+/**
+ * Enregistre le comportement du header (fixed au scroll)
+ * @return {function(): void}
+ */
+export function registerHeader () {
+  const scrollListener = throttle(() => {
+    if (!scrolling) {
+      scrolling = true
+      window.requestAnimationFrame(autoHideHeader)
+    }
+  }, 100)
+  window.addEventListener('scroll', scrollListener)
+  return () => {
+    window.removeEventListener('scroll', scrollListener)
+  }
+}

resources/js/helpers/timers.js

@@ -0,0 +1,23 @@
+/**
+ * Throttle un callback
+ */
+export function throttle(callback, delay) {
+  let last;
+  let timer;
+  return function () {
+    let context = this;
+    let now = + new Date();
+    let args = arguments;
+    if (last && now < last + delay) {
+      // le délai n'est pas écoulé on reset le timer
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        last = now;
+        callback.apply(context, args);
+      }, delay);
+    } else {
+      last = now;
+      callback.apply(context, args);
+    }
+  };
+}

resources/views/articles/show.blade.php

@@ -11,7 +11,7 @@
     @endphp
 
     <article class="relative lg:grid lg:grid-cols-9 lg:gap-10" xmlns:livewire="http://www.w3.org/1999/html">
-        <div class="hidden lg:block lg:col-span-2">
+        <div class="hidden relative lg:block lg:col-span-2">
             <div class="divide-y divide-skin-base sticky space-y-6 top-4">
                 <div>
                     <h4 class="text-xs text-skin-base font-medium leading-4 tracking-wide uppercase">A propos de l’auteur</h4>
@@ -263,7 +263,7 @@ class="inline-flex items-center py-2 px-4 border border-skin-base rounded-md sha
                 </footer>
             @endif
         </div>
-        <div class="hidden lg:block lg:col-span-2">
+        <div class="hidden relative lg:block lg:col-span-2">
             <div class="sticky top-4 space-y-10">
                 @if($article->showToc())
                     <div class="bg-skin-card px-4 py-6 rounded-lg shadow-lg">

resources/views/forum/index.blade.php

@@ -5,7 +5,7 @@
 
 @section('body')
 
-    <div class="lg:grid lg:grid-cols-12 lg:gap-8">
+    <div class="relative lg:grid lg:grid-cols-12 lg:gap-8">
         <div class="lg:block lg:col-span-2">
             @include('forum._channels')
         </div>
@@ -34,8 +34,8 @@
             </div>
         </div>
 
-        <div class="hidden lg:block lg:col-span-2 xl:col-span-3">
-            <aside class="sticky top-4 space-y-10 mt-10">
+        <div class="hidden relative mt-10 lg:block lg:col-span-2 xl:col-span-3">
+            <aside class="sticky block top-4 space-y-10">
                 <x-sponsors />
 
                 <x-ads />

resources/views/forum/thread.blade.php

@@ -5,8 +5,8 @@
 
 @section('body')
 
-    <div class="lg:grid lg:grid-cols-9 lg:gap-10">
-        <div class="hidden lg:block lg:col-span-2">
+    <div class="relative lg:grid lg:grid-cols-9 lg:gap-10">
+        <div class="hidden relative lg:block lg:col-span-2">
             <div class="sticky top-4 space-y-6">
                 <x-button :link="route('forum.new')" class="w-full flex justify-center">
                     Nouveau Sujet

resources/views/layouts/_nav.blade.php

@@ -1,4 +1,4 @@
-<nav x-data="{ open: false, flyoutMenu: false }" class="relative z-10 bg-skin-menu">
+<nav x-data="{ open: false, flyoutMenu: false }" class="relative z-10 bg-skin-menu header">
     <div class="max-w-7xl mx-auto px-2 sm:px-4">
         <div class="flex justify-between h-16">
             <div class="flex px-2 lg:px-0">