aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-01-26 16:18:46 +0100
committerArmand Philippot <git@armandphilippot.com>2022-01-26 16:18:46 +0100
commit189a8698c601c6121e6a07dbf32ebac716cae386 (patch)
treeb567a6675fe1bc833582d721c6e3c8093f145703
parent5c3ea8b577e934237a5d03c477361763b167f57b (diff)
chore(widgets): update recent posts layout
Replace flex with grid to avoid cards reflow on resize.
Diffstat
-rw-r--r--src/components/Widgets/RecentPosts/RecentPosts.module.scss22
1 files changed, 18 insertions, 4 deletions
diff --git a/src/components/Widgets/RecentPosts/RecentPosts.module.scss b/src/components/Widgets/RecentPosts/RecentPosts.module.scss
index dc580a1..0b1e0d8 100644
--- a/src/components/Widgets/RecentPosts/RecentPosts.module.scss
+++ b/src/components/Widgets/RecentPosts/RecentPosts.module.scss
@@ -2,14 +2,28 @@
@use "@styles/abstracts/placeholders";
.list {
- @extend %flex-list;
- align-items: stretch;
- gap: var(--spacing-xs);
+ --items: 3;
+ --items-size: 25ch;
+
+ @extend %reset-list;
+
+ display: grid;
+ grid-template-columns: repeat(
+ auto-fit,
+ min(calc(100vw - (var(--spacing-md) * 2)), var(--items-size))
+ );
+ gap: var(--spacing-sm);
+ width: min(
+ calc(100vw - (var(--spacing-md) * 2)),
+ calc(
+ (var(--items-size) * var(--items)) +
+ (var(--spacing-sm) * (var(--items) - 1))
+ )
+ );
margin-bottom: var(--spacing-md);
}
.item {
- width: min(calc(100vw - var(--spacing-md)), 25ch);
text-align: center;
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 07:08:29 +0000
f='#n146'>146 147 148 149 150 151 
import { ButtonToolbar } from '@components/Buttons';
import MainNav from '@components/MainNav/MainNav';
import SearchForm from '@components/SearchForm/SearchForm';
import Settings from '@components/Settings/Settings';
import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
import styles from './Toolbar.module.scss';

const Toolbar = () => {
  const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
  const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
  const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
  const mainNavRef = useRef<HTMLDivElement>(null);
  const searchBtnRef = useRef<HTMLButtonElement>(null);
  const searchModalRef = useRef<HTMLDivElement>(null);
  const settingsBtnRef = useRef<HTMLButtonElement>(null);
  const settingsModalRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (isNavOpened) {
      setIsSearchOpened(false);
      setIsSettingsOpened(false);
    }
  }, [isNavOpened]);

  useEffect(() => {
    if (isSearchOpened) {
      setIsNavOpened(false);
      setIsSettingsOpened(false);
    }
  }, [isSearchOpened]);

  useEffect(() => {
    if (isSettingsOpened) {
      setIsNavOpened(false);
      setIsSearchOpened(false);
    }
  }, [isSettingsOpened]);

  const isClickOutside = (
    ref: RefObject<HTMLDivElement>,
    target: EventTarget
  ) => {
    return ref.current && !ref.current.contains(target as Node);
  };

  const isToggleBtn = (ref: RefObject<HTMLDivElement>, target: EventTarget) => {
    return (
      ref.current &&
      ref.current.previousElementSibling &&
      ref.current.previousElementSibling.contains(target as Node)
    );
  };

  const isSearchBtn = useCallback((target: HTMLElement) => {
    return (
      target === searchBtnRef.current || searchBtnRef.current?.contains(target)
    );
  }, []);

  const isSettingsBtn = useCallback((target: HTMLElement) => {
    return (
      target === settingsBtnRef.current ||
      settingsBtnRef.current?.contains(target)
    );
  }, []);

  const handleVisibility = useCallback(
    (e: MouseEvent | FocusEvent) => {
      let ref: RefObject<HTMLDivElement> | null = null;
      if (isNavOpened) ref = mainNavRef;
      if (isSearchOpened) ref = searchModalRef;
      if (isSettingsOpened) ref = settingsModalRef;

      if (!ref || !ref.current || !ref.current.id) return;
      if (!isClickOutside(ref, e.target as Node)) return;
      if (isToggleBtn(ref, e.target as Node)) return;

      if (
        ref.current.id === 'main-nav' &&
        !isSettingsBtn(e.target as HTMLElement) &&
        !isSearchBtn(e.target as HTMLElement)
      ) {
        setIsNavOpened(false);
      }

      if (
        ref.current.id === 'search-modal' &&
        !isSettingsBtn(e.target as HTMLElement)
      )
        setIsSearchOpened(false);
      if (
        ref.current.id === 'settings-modal' &&
        !isSearchBtn(e.target as HTMLElement)
      )
        setIsSettingsOpened(false);
    },
    [isNavOpened, isSearchOpened, isSettingsOpened, isSearchBtn, isSettingsBtn]
  );

  useEffect(() => {
    document.addEventListener('mousedown', handleVisibility);
    document.addEventListener('focusin', handleVisibility);

    return () => {
      document.removeEventListener('mousedown', handleVisibility);
      document.removeEventListener('focusin', handleVisibility);
    };
  }, [handleVisibility]);

  const searchClasses = `${styles.menu} ${
    isSearchOpened ? styles['menu--opened'] : styles['menu--closed']
  }`;

  const settingsClasses = `${styles.menu} ${
    isSettingsOpened ? styles['menu--opened'] : styles['menu--closed']
  }`;

  return (
    <div className={styles.wrapper}>
      <MainNav
        ref={mainNavRef}
        isOpened={isNavOpened}
        setIsOpened={setIsNavOpened}
      />
      <ButtonToolbar
        ref={searchBtnRef}
        type="search"
        isActivated={isSearchOpened}
        setIsActivated={setIsSearchOpened}
      />
      <div id="search-modal" className={searchClasses} ref={searchModalRef}>
        <SearchForm isOpened={isSearchOpened} />
      </div>
      <ButtonToolbar
        ref={settingsBtnRef}
        type="settings"
        isActivated={isSettingsOpened}
        setIsActivated={setIsSettingsOpened}
      />
      <div
        id="settings-modal"
        className={settingsClasses}
        ref={settingsModalRef}
      >
        <Settings />
      </div>
    </div>
  );
};

export default Toolbar;