improve the pause mode display

Author: medyo

src/App.js

@@ -1,20 +1,24 @@
 import React, { Suspense, useEffect, useLayoutEffect, useState } from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import 'src/assets/App.css'
-import { Header, PausedAppContent } from 'src/components/Layout'
+import { DNDLayout, Header } from 'src/components/Layout'
 import { BookmarksSidebar } from 'src/features/bookmarks'
 import { MarketingBanner } from 'src/features/MarketingBanner'
 import { setupAnalytics, setupIdentification, trackPageView } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { diffBetweenTwoDatesInDays } from 'src/utils/DateUtils'
-import { AppContentLayout, ScrollCardsNavigator } from './components/Layout'
+import { AppContentLayout } from './components/Layout'
 import { isWebOrExtensionVersion } from './utils/Environment'
 import { getAppVersion } from './utils/Os'
 
 const OnboardingModal = React.lazy(() =>
   import('src/features/onboarding').then((module) => ({ default: module.OnboardingModal }))
 )
 
+const intersectionOptions = {
+  threshold: 0.5,
+}
+
 function App() {
   const [showSideBar, setShowSideBar] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
@@ -24,7 +28,7 @@ function App() {
     firstSeenDate,
     markOnboardingAsCompleted,
     maxVisibleCards,
-    pauseTo,
+    isPauseModeActive,
   } = useUserPreferences()
 
   useLayoutEffect(() => {
@@ -47,15 +51,34 @@ function App() {
     trackPageView('home')
   }, [])
 
-  const isAppPaused = Boolean(pauseTo && pauseTo - new Date().getTime() > 0)
-  console.log('pauseTo: ', isAppPaused)
+  let callback = (entries) => {
+    entries.forEach((entry) => {
+      if (!entry.isIntersecting) {
+        document.documentElement.classList.remove('dndState')
+      } else {
+        document.documentElement.classList.add('dndState')
+      }
+    })
+  }
+
+  useLayoutEffect(() => {
+    let dndLayoutDiv = document.getElementsByClassName('pauseContentWrapper')[0]
+    let observer = new IntersectionObserver(callback, intersectionOptions)
+
+    if (dndLayoutDiv) {
+      observer.observe(dndLayoutDiv)
+    }
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
 
   return (
     <>
       <MarketingBanner />
 
       <div className="App">
-        <PausedAppContent isAppPaused={isAppPaused} />
         {!onboardingCompleted && isWebOrExtensionVersion() === 'extension' && (
           <Suspense fallback={null}>
             <OnboardingModal
@@ -70,8 +93,11 @@ function App() {
           showSettings={showSettings}
           setShowSettings={setShowSettings}
         />
-        <ScrollCardsNavigator />
-        <AppContentLayout setShowSettings={setShowSettings} />
+
+        <div className="layoutLayers hideScrollBar">
+          {isPauseModeActive() && <DNDLayout />}
+          <AppContentLayout setShowSettings={setShowSettings} />
+        </div>
         <BookmarksSidebar showSidebar={showSideBar} onClose={() => setShowSideBar(false)} />
       </div>
     </>

src/assets/App.css

@@ -3,6 +3,7 @@
 html {
   background: var(--background-color);
   scroll-behavior: smooth;
+  overflow: hidden;
 }
 body {
   color: var(--primary-text-color);
@@ -36,6 +37,7 @@ a {
   color: var(--primary-text-color);
   display: flex;
   flex-direction: column;
+  height: 100vh;
 }
 .errorMsg {
   text-align: center;
@@ -62,8 +64,11 @@ a {
   align-items: center;
   align-content: center;
   flex-wrap: wrap;
-  height: 86px;
+  height: 10vh;
   margin: 0.5% 1% 0px 1%;
+  position: sticky;
+  z-index: 1;
+  top: 0;
 }
 
 .AppFooter {
@@ -91,18 +96,19 @@ a {
 
 .AppContent {
   position: relative;
-  overflow-y: hidden;
-  padding: 12px 0;
+  margin: 0;
 }
 .Cards {
-  padding: 1%;
   flex: 1 1 auto;
   display: flex;
   gap: 12px;
   position: relative;
   overflow-y: hidden;
+  justify-content: space-between;
   scroll-snap-type: x mandatory;
   scroll-padding-left: 12px;
+  padding-top: 2vh;
+  height: 87vh;
 }
 .HorizontalScroll {
   -ms-overflow-style: none;
@@ -114,10 +120,7 @@ a {
 
 .extras {
   flex-direction: row;
-  margin-right: 16px;
   align-content: center;
-
-  transition: width, left, right, 0.3s;
 }
 .darkModeBtn {
   background-color: var(--dark-mode-background-color) !important;
@@ -140,6 +143,7 @@ a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.4s linear;
 }
 .extraTextBtn {
   padding: 0 16px;
@@ -199,7 +203,7 @@ a {
   border-radius: 10px;
   overflow: hidden;
   flex-direction: column;
-  height: 82vh;
+  height: 98%;
   width: 10vw;
   flex: 0 0 auto;
   scroll-snap-align: start;
@@ -772,6 +776,7 @@ Producthunt item
   position: relative;
   margin: 0 auto;
   margin-top: 6px;
+  transition: all 0.3s linear;
 }
 .searchBarIcon {
   position: absolute;
@@ -850,7 +855,7 @@ Producthunt item
 
 .scrollButton {
   border: none;
-  position: fixed;
+  position: absolute;
   top: 45%;
   margin: 0 1%;
   background-color: var(--card-action-button-background);
@@ -1097,7 +1102,7 @@ Producthunt item
   }
   .block {
     width: calc(
-      (1800px - 14px * min(5, var(--max-visible-cards))) / min(5, var(--max-visible-cards))
+      (1800px - 20px * min(5, var(--max-visible-cards))) / min(5, var(--max-visible-cards))
     );
   }
 }
@@ -1125,54 +1130,36 @@ Producthunt item
   position: relative;
   vertical-align: middle;
 }
-
-/* PAUSE CONTENT */
-.pauseContentWrapper {
-  height: 0;
-  transition: height 0.5s ease-out;
-}
-
-.pauseContentWrapper.active {
+.layoutLayers {
+  scroll-snap-type: y mandatory;
+  display: flex;
+  flex-direction: column;
   height: 100vh;
+  overflow-y: scroll;
+  margin: 0 1%;
 }
-
-.pauseContentWrapper .options {
-  height: 5%;
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-end;
-  padding-right: 24px;
+.layoutLayers > * {
+  scroll-snap-align: end;
 }
 
-.pauseContentWrapper .searchContainer {
-  height: 95%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.searchBarWithLogo {
-  display: flex;
-  flex-direction: column;
-  row-gap: 24px;
-  align-items: center;
-  align-content: center;
+.tags {
+  transition: visibility 0.3s ease-out, opacity 0.3s ease-in;
+  visibility: visible;
+  opacity: 1;
 }
 
-.searchBarWithLogo .searchEngineLogo {
-  width: 280px;
-  height: 120px;
-  text-align: center;
-  margin: 0 auto;
-}
-.searchEngineLogo svg {
-  width: 100%;
-  height: 100%;
-}
 /*Helpers */
 .noMargin {
   margin: 0 !important;
 }
 .marginLeftAuto {
   margin-left: auto;
 }
+
+.hideScrollBar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.hideScrollBar::-webkit-scrollbar {
+  display: none;
+}

src/components/Layout/AppContentLayout.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { isDesktop } from 'react-device-detect'
 import { useUserPreferences } from 'src/stores/preferences'
 import { BottomNavigation } from '../Elements'
+import { ScrollCardsNavigator } from './'
 import { DesktopCards } from './DesktopCards'
 import { MobileCards } from './MobileCards'
 
@@ -14,8 +15,9 @@ export const AppContentLayout = ({
   const [selectedCard, setSelectedCard] = useState(cards[0])
 
   return (
-    <>
+    <section>
       <main className="AppContent">
+        <ScrollCardsNavigator />
         {isDesktop ? (
           <DesktopCards cards={cards} userCustomCards={userCustomCards} />
         ) : (
@@ -29,6 +31,6 @@ export const AppContentLayout = ({
         setSelectedCard={setSelectedCard}
         setShowSettings={setShowSettings}
       />
-    </>
+    </section>
   )
 }

src/components/Layout/DNDLayout/DNDLayout.css

@@ -0,0 +1,48 @@
+.dndState .AppHeader .searchBar {
+  opacity: 0;
+  transform: translate(0, 10px);
+  transition: all 0.4s ease-out;
+}
+.dndState .tags {
+  opacity: 0;
+  transform: translate(0, 10px);
+  filter: blur(2px);
+  transition: all 0.4s ease-out;
+}
+
+.pauseContentWrapper {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.scrollToCardsLayout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 12px;
+  font-size: 18px;
+  border: none;
+  background: none;
+  color: var(--primary-text-color);
+  cursor: pointer;
+  padding: 20px 0;
+}
+
+.scrollToCardsLayout:hover .icon {
+  transform: translate(0, 10px);
+  transition: transform 0.3s ease-in-out;
+  animation-iteration-count: revert;
+}
+.scrollToCardsLayout .icon {
+  transition: all 0.3s ease-in-out;
+  font-size: 20px;
+}
+
+.searchWidget {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+}

src/components/Layout/DNDLayout/DNDLayout.tsx

@@ -0,0 +1,32 @@
+import { useLayoutEffect, useRef } from 'react'
+import { BsChevronDown } from 'react-icons/bs'
+import { SearchBarWithLogo } from 'src/components/Elements'
+import './DNDLayout.css'
+
+export const DNDLayout = () => {
+  const cardsLayoutContainer = useRef<HTMLElement | null>(null)
+
+  useLayoutEffect(() => {
+    cardsLayoutContainer.current = document.querySelector('.AppContent')
+  }, [])
+
+  const onScrollToCardsLayoutClicked = () => {
+    if (!cardsLayoutContainer.current) {
+      return
+    }
+    cardsLayoutContainer.current?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <section className="pauseContentWrapper">
+      <div className="searchWidget">
+        <SearchBarWithLogo />
+      </div>
+
+      <button className="scrollToCardsLayout" onClick={() => onScrollToCardsLayoutClicked()}>
+        Scroll for Dev News
+        <BsChevronDown className="icon" />
+      </button>
+    </section>
+  )
+}

src/components/Layout/DNDLayout/index.ts

@@ -0,0 +1 @@
+export * from "./DNDLayout";