From c8866e31bfae1a832c334f027f6e47ab3ebe1b54 Mon Sep 17 00:00:00 2001 From: luSteven01 <146397397+luSteven01@users.noreply.github.com> Date: Tue, 29 Jul 2025 02:26:39 -0700 Subject: [PATCH 1/6] added mobile sizing to the search modal --- src/Components/ShortcutKeyModal/SearchModal.css | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/Components/ShortcutKeyModal/SearchModal.css b/src/Components/ShortcutKeyModal/SearchModal.css index 2f0ccef8c..40667ac33 100644 --- a/src/Components/ShortcutKeyModal/SearchModal.css +++ b/src/Components/ShortcutKeyModal/SearchModal.css @@ -8,8 +8,7 @@ /* blurred background */ display: flex; justify-content: center; - align-items: flex-start; - padding-top: 33vh; + align-items: center; z-index: 9999; } @@ -17,7 +16,9 @@ padding: 8px; background: white; border-radius: 8px; - width: 35rem; + width: 100%; + /* the default is the mobile size */ + max-width: 500px; } .shortcut-search-modal input { @@ -67,3 +68,11 @@ background-color: #1e293b; } } + +/* Desktop mode */ +@media (min-width: 768px) { + .shortcut-search-modal .input-wrapper { + width: 35rem; + max-width: none; + } +} \ No newline at end of file From cae685b0bfe9233ee410d1b8ca3ba6cc7776a38b Mon Sep 17 00:00:00 2001 From: luSteven01 <146397397+luSteven01@users.noreply.github.com> Date: Tue, 29 Jul 2025 03:21:30 -0700 Subject: [PATCH 2/6] used context to add a modal button to the navbar --- src/Components/Navbar/UserNavbar.js | 11 +++++++++-- src/Components/ShortcutKeyModal/SearchModal.js | 5 ++++- src/index.js | 7 ++++--- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/Components/Navbar/UserNavbar.js b/src/Components/Navbar/UserNavbar.js index 9515a4c00..48d3c96e5 100644 --- a/src/Components/Navbar/UserNavbar.js +++ b/src/Components/Navbar/UserNavbar.js @@ -3,7 +3,7 @@ import { membershipState } from '../../Enums'; import { useSCE } from '../context/SceContext'; export default function UserNavbar(props) { - const { user, authenticated } = useSCE(); + const { user, authenticated, setModalOpen } = useSCE(); const [isDropdownOpen, setIsDropdownOpen] = useState(false); const dropdownRef = useRef(null); let initials = ''; @@ -84,8 +84,15 @@ export default function UserNavbar(props) {
-
diff --git a/src/Components/ShortcutKeyModal/SearchModal.js b/src/Components/ShortcutKeyModal/SearchModal.js index 09a748317..cc9d33139 100644 --- a/src/Components/ShortcutKeyModal/SearchModal.js +++ b/src/Components/ShortcutKeyModal/SearchModal.js @@ -6,7 +6,10 @@ import { useSCE } from '../context/SceContext'; import { searchUsersAndCleezyUrls } from '../../APIFunctions/ShortcutSearch'; export default function SearchModal() { - const [open, setOpen] = useState(false); + const {modalOpen, setModalOpen} = useSCE(); + //kept original open and setOpen state variables + const open = modalOpen; + const setOpen = setModalOpen; const inputRef = useRef(null); const modalRef = useRef(null); const filteredSignedOutRoutes = [...signedOutRoutes].filter(r => !r.hideFromShortcutSuggestions); diff --git a/src/index.js b/src/index.js index 312e36477..91bc7fdfb 100755 --- a/src/index.js +++ b/src/index.js @@ -12,6 +12,7 @@ function App() { const [authenticated, setAuthenticated] = useState(false); const [isAuthenticating, setIsAuthenticating] = useState(true); const [user, setUser] = useState({}); + const [modalOpen, setModalOpen] = useState(false); async function getAuthStatus() { setIsAuthenticating(true); @@ -30,10 +31,10 @@ function App() { return ( !isAuthenticating && ( - + - - + + ) From 55d19280e2cdbe28bf662b777979aaaccbd15acb Mon Sep 17 00:00:00 2001 From: luSteven01 <146397397+luSteven01@users.noreply.github.com> Date: Wed, 30 Jul 2025 21:40:37 -0700 Subject: [PATCH 3/6] added support for button on mobile devices --- src/Components/Navbar/UserNavbar.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/Components/Navbar/UserNavbar.js b/src/Components/Navbar/UserNavbar.js index 48d3c96e5..b865562c7 100644 --- a/src/Components/Navbar/UserNavbar.js +++ b/src/Components/Navbar/UserNavbar.js @@ -86,17 +86,17 @@ export default function UserNavbar(props) {
+ {authenticated && user ? ( <>
From f89b18a2d08a82e4e8e17a2a5cbf358e8120eeeb Mon Sep 17 00:00:00 2001 From: luSteven01 <146397397+luSteven01@users.noreply.github.com> Date: Thu, 31 Jul 2025 21:57:43 -0700 Subject: [PATCH 4/6] moved urls back underneath page name, and now always show the url --- .../ShortcutKeyModal/SearchModal.js | 34 ++++++++++++------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/src/Components/ShortcutKeyModal/SearchModal.js b/src/Components/ShortcutKeyModal/SearchModal.js index cc9d33139..f1aa76ea7 100644 --- a/src/Components/ShortcutKeyModal/SearchModal.js +++ b/src/Components/ShortcutKeyModal/SearchModal.js @@ -80,11 +80,11 @@ export default function SearchModal() { const topFiveItems = suggestions.slice(0, SHORTCUT_MAX_RESULT); return ( -
    +
      {topFiveItems.map((r, index) => (
    • setSelectItem(index)} onClick={() => { if (externalSiteRoute(r)) return; @@ -92,14 +92,20 @@ export default function SearchModal() { setOpen(false); }} > - - {r.type === 'user' ? '👤' : '📄'} - -
      - {r.pageName} -
      - {selectItem === index && (r.type === 'external_url' ? r.path : `${window.location.origin}${r.path}`)} +
      +
      + + {r.type === 'user' ? '👤' : '📄'} + + + {r.pageName} +
      + + + {r.type === 'external_url' ? r.path : window.location.origin + r.path} + +
      • ))} @@ -277,14 +283,16 @@ export default function SearchModal() { if (!open) return null; return ( -
      +
      -
      +
      + onChange={handleChanges} + className='border-[1.5px] border-gray-600 w-full rounded p-3 h-10 text-[1.2rem] bg-transparent focus:outline-sky-600' + />
      @@ -293,4 +301,4 @@ export default function SearchModal() {
      ); -} +} \ No newline at end of file From b1c807e96d8ecdd74cc67d7a5acca33116624209 Mon Sep 17 00:00:00 2001 From: luSteven01 <146397397+luSteven01@users.noreply.github.com> Date: Thu, 31 Jul 2025 22:03:47 -0700 Subject: [PATCH 5/6] cleaned up lint --- src/Components/ShortcutKeyModal/SearchModal.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/Components/ShortcutKeyModal/SearchModal.js b/src/Components/ShortcutKeyModal/SearchModal.js index f1aa76ea7..6da784091 100644 --- a/src/Components/ShortcutKeyModal/SearchModal.js +++ b/src/Components/ShortcutKeyModal/SearchModal.js @@ -7,7 +7,7 @@ import { searchUsersAndCleezyUrls } from '../../APIFunctions/ShortcutSearch'; export default function SearchModal() { const {modalOpen, setModalOpen} = useSCE(); - //kept original open and setOpen state variables + // kept original open and setOpen state variables const open = modalOpen; const setOpen = setModalOpen; const inputRef = useRef(null); @@ -105,7 +105,6 @@ export default function SearchModal() { {r.type === 'external_url' ? r.path : window.location.origin + r.path} -
      ))} @@ -290,9 +289,9 @@ export default function SearchModal() { ref={inputRef} placeholder="Search here... (Ctrl + k)" value={keyword} - onChange={handleChanges} + onChange={handleChanges} className='border-[1.5px] border-gray-600 w-full rounded p-3 h-10 text-[1.2rem] bg-transparent focus:outline-sky-600' - /> + />
      @@ -301,4 +300,4 @@ export default function SearchModal() {
      ); -} \ No newline at end of file +} From a9283e598c6e354a9ac7a6421bd4cb26a12637f8 Mon Sep 17 00:00:00 2001 From: luSteven01 <146397397+luSteven01@users.noreply.github.com> Date: Thu, 31 Jul 2025 22:08:20 -0700 Subject: [PATCH 6/6] added see-able text for input --- src/Components/ShortcutKeyModal/SearchModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/ShortcutKeyModal/SearchModal.js b/src/Components/ShortcutKeyModal/SearchModal.js index 6da784091..e431b6189 100644 --- a/src/Components/ShortcutKeyModal/SearchModal.js +++ b/src/Components/ShortcutKeyModal/SearchModal.js @@ -290,7 +290,7 @@ export default function SearchModal() { placeholder="Search here... (Ctrl + k)" value={keyword} onChange={handleChanges} - className='border-[1.5px] border-gray-600 w-full rounded p-3 h-10 text-[1.2rem] bg-transparent focus:outline-sky-600' + className='border-[1.5px] text-white border-gray-600 w-full rounded p-3 h-10 text-[1.2rem] bg-transparent focus:outline-sky-600' />