From 2c47f52fce011a2473b04818fb666d9168d5dff2 Mon Sep 17 00:00:00 2001 From: Victor Turgeon <76506447+Medenos@users.noreply.github.com> Date: Sun, 30 Oct 2022 11:42:35 -0700 Subject: [PATCH] chargement async des items dans "morceaux" se fait sur le scroll down (pu besoin de boutton) --- .../grosses-mitaines-ui/src/pages/Morceaux.js | 17 ++++++--- .../src/stylesheets/site.css | 35 +++++++++++++++++++ 2 files changed, 48 insertions(+), 4 deletions(-) diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js index e54d1e6..243f016 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js @@ -94,29 +94,38 @@ const Morceaux = () => { const json = await response.json(); setProducts([...json]); setIsLoading(false); + } + const handleScroll = async (e) => { + const target = e.target; + if (!isLoading && !isSearch) { + if (target.scrollTop + target.clientHeight + 300 >= target.scrollHeight) { + await handleNextItems(); + } + } } return ( -
+
+
-
+
handleScroll(e)} >
-
+ {/*
{!isSearch && } -
+
*/}
); } diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css index 2208bcc..8cdb491 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css +++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css @@ -469,6 +469,36 @@ html { margin-bottom: 16px; } + + /* width */ + ::-webkit-scrollbar { + width: 10px; + } + + /* Track */ + ::-webkit-scrollbar-track { + background: beige; + } + + /* Handle */ + ::-webkit-scrollbar-thumb { + background: plum; + } + + /* Handle on hover */ + ::-webkit-scrollbar-thumb:hover { + background: purple; + } + +.morceaux-container{ + padding-top:10px; + height: 620px; + overflow-y: scroll; + border: purple 2px solid; + border-radius: 5px; + background-color: rgba(245, 245, 220, 0.25); +} + .filters-btn-container{ width:100%; display:flex; @@ -723,6 +753,11 @@ html { /* -------------------------------------------------------- */ @media (max-width:450px) { + + .morceaux-container{ + height: 450px; + } + .item { width: 85%; }