mobile layout - jump to message now temporarily hides search results

slatinsky · Apr 20, 2024 · e58abc1 · e58abc1
1 parent 78e1934
commit e58abc1
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 15 deletions.
diff --git a/frontend/src/components/messages/NewMessage.svelte b/frontend/src/components/messages/NewMessage.svelte
@@ -13,6 +13,7 @@
 	import identicons from 'identicons'
 	import AuthorModal from 'src/routes/channels/[guildId]/[channelId]/AuthorModal.svelte';
 	import MessageNickname from './MessageNickname.svelte';
+	import { hideSearchOnMobile } from 'src/components/search/searchStores';
 
 	export let message: Message;
 	export let previousMessage: Message | null = null;
@@ -211,7 +212,7 @@
 		</div>
 	{/if}
 
-	<a class="msg-jump" href="/channels/{message.guildId}/{message.channelId}#{message._id}">Jump</a>
+	<a class="msg-jump" href="/channels/{message.guildId}/{message.channelId}#{message._id}" on:click={hideSearchOnMobile}>Jump</a>
 
 	<!-- {#if search && message.searchPrevMessageChannelId && message.searchPrevMessageChannelId !== message.channelId}
 		<div class="channel-name"><a href="/channels/{selectedGuildId}/{message.channelId}/"># {guild.channels[message.channelId]?.name}</a></div>

diff --git a/frontend/src/components/search/SearchFilter.svelte b/frontend/src/components/search/SearchFilter.svelte
@@ -17,7 +17,7 @@
 	}
 
 
-	import { searchPrompt, searchPromptLarge, searchResultsMessageIds, searchShown, submitSearch } from "./searchStores";
+	import { searchPrompt, searchPromptLarge, searchShown, searchTemporarilyHidden, showSearchOnMobile, submitSearch } from "./searchStores";
 	import { checkUrl } from "src/js/helpers";
 	export let guildId: string;
 
@@ -237,7 +237,7 @@
 	$: searchSuggestions, searchSuggestionsChanged();
 	$: $searchPrompt, searchPromptChanged()
 
-	$: $searchPromptLarge = $searchPrompt !== '' || $searchShown || isInputFocused;
+	$: $searchPromptLarge = ($searchPrompt !== '' || $searchShown || isInputFocused) && !$searchTemporarilyHidden ;
 
 
 	function clearSearch() {
@@ -252,11 +252,20 @@
 	onMount(async () => {
 		searchCategories = await fetchCategories()
 	})
+
+	function magnGlassMobileClicked() {
+		if ($searchTemporarilyHidden) {  // don't show suggestions if the user wants to revisit the search
+			showSearchOnMobile()
+		}
+		else {
+			domInput.focus()
+		}
+	}
 </script>
 
 <div class="search" class:large={$searchPromptLarge}>
-	<svg on:click={()=>domInput.focus()} class="icon-magnifying-glass-mobile" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21.707 20.293L16.314 14.9C17.403 13.504 18 11.799 18 10C18 7.863 17.167 5.854 15.656 4.344C14.146 2.832 12.137 2 10 2C7.863 2 5.854 2.832 4.344 4.344C2.833 5.854 2 7.863 2 10C2 12.137 2.833 14.146 4.344 15.656C5.854 17.168 7.863 18 10 18C11.799 18 13.504 17.404 14.9 16.314L20.293 21.706L21.707 20.293ZM10 16C8.397 16 6.891 15.376 5.758 14.243C4.624 13.11 4 11.603 4 10C4 8.398 4.624 6.891 5.758 5.758C6.891 4.624 8.397 4 10 4C11.603 4 13.109 4.624 14.242 5.758C15.376 6.891 16 8.398 16 10C16 11.603 15.376 13.11 14.242 14.243C13.109 15.376 11.603 16 10 16Z"></path></svg>
-	<div class="search-input-container">
+	<svg on:click={magnGlassMobileClicked} class="icon-magnifying-glass-mobile" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21.707 20.293L16.314 14.9C17.403 13.504 18 11.799 18 10C18 7.863 17.167 5.854 15.656 4.344C14.146 2.832 12.137 2 10 2C7.863 2 5.854 2.832 4.344 4.344C2.833 5.854 2 7.863 2 10C2 12.137 2.833 14.146 4.344 15.656C5.854 17.168 7.863 18 10 18C11.799 18 13.504 17.404 14.9 16.314L20.293 21.706L21.707 20.293ZM10 16C8.397 16 6.891 15.376 5.758 14.243C4.624 13.11 4 11.603 4 10C4 8.398 4.624 6.891 5.758 5.758C6.891 4.624 8.397 4 10 4C11.603 4 13.109 4.624 14.242 5.758C15.376 6.891 16 8.398 16 10C16 11.603 15.376 13.11 14.242 14.243C13.109 15.376 11.603 16 10 16Z"></path></svg>
+	<div class="search-input-container" >
 		<input
 			type="text"
 			placeholder="Search"

diff --git a/frontend/src/components/search/searchStores.ts b/frontend/src/components/search/searchStores.ts
@@ -5,6 +5,7 @@ export const searchResultsMessageIds = writable([])
 export const searchPrompt = writable("")
 export const isSearching = writable(false)
 export const searchPromptLarge = writable(false)
+export const searchTemporarilyHidden = writable(false)
 
 export async function submitSearch(guildId: string) {
     // do a fetch to the server to search for the message
@@ -19,6 +20,40 @@ export async function submitSearch(guildId: string) {
     isSearching.set(false);
 }
 
+
+
+
+
+/*
+on mobile we want to temporarily hide the search results after jump (to message) button is clicked
+and show it again at the same scroll position when user clicks magnifying glass
+*/
+export async function hideSearchOnMobile() {
+    if (window.innerWidth <= 1000 && !get(searchTemporarilyHidden)) {
+        searchShown.set(false);
+        searchTemporarilyHidden.set(true);
+        window.addEventListener("resize", mobileToDesktopSwitch);
+    }
+}
+
+export async function showSearchOnMobile() {
+    if (get(searchTemporarilyHidden)) {
+        searchShown.set(true);
+        searchTemporarilyHidden.set(false);
+        window.removeEventListener("resize", mobileToDesktopSwitch);
+    }
+}
+function mobileToDesktopSwitch() {
+    /*
+    disable temporarily hidden search after switching to desktop view
+    */
+    if (window.innerWidth >= 1000 && get(searchTemporarilyHidden)) {
+        searchShown.set(true);
+        searchTemporarilyHidden.set(false);
+        window.removeEventListener("resize", mobileToDesktopSwitch);
+    }
+}
+
 export function doSearch(prompt: string, guildId: string) {
     if (prompt == "") {
         searchPrompt.set("");

diff --git a/frontend/src/routes/channels/[guildId]/+layout.svelte b/frontend/src/routes/channels/[guildId]/+layout.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import Header from './Header.svelte';
-	import SearchResults from '../../../components/search/SearchResults.svelte';
-	import { searchShown, searchResultsMessageIds } from '../../../components/search/searchStores';
+	import SearchResults from 'src/components/search/SearchResults.svelte';
+	import { searchShown, searchResultsMessageIds, searchTemporarilyHidden } from 'src/components/search/searchStores';
 
 	import type { PageServerData } from './$types';
 	export let data: PageServerData;
 
-	import ChannelsMenu from '../../../components/channels/MenuCategories.svelte';
+	import ChannelsMenu from 'src/components/channels/MenuCategories.svelte';
 	import Container from 'src/components/containers/Container.svelte';
 	import { currentUserName1, currentUserName2, currentUserPhoto, settingsShown } from 'src/components/settings/settingsStore';
 	import { isMenuHidden } from 'src/components/menu/menuStore';
@@ -60,18 +60,20 @@
 			<div id="messages">
 				<slot />
 			</div>
-			{#if $searchShown}
-				<div id="search">
-					<SearchResults guildId={currentGuildId} />
-				</div>
-			{/if}
+			<div id="search" class:hidden={$searchTemporarilyHidden || !$searchShown}>
+				<SearchResults guildId={currentGuildId} />
+			</div>
 		</div>
 	{/if}
 {/key}
 
 <UserSelectionModal bind:showModal={showUserSelectionModal} guildId={currentGuildId}/>
 
 <style>
+	.hidden {
+		display: none;
+	}
+
 	#guild-layout {
 		display: grid;
 		/* flex-direction: row; */

diff --git a/frontend/src/routes/channels/[guildId]/Header.svelte b/frontend/src/routes/channels/[guildId]/Header.svelte
@@ -3,7 +3,7 @@
 	import IconChannel from 'src/components/icons/IconChannel.svelte';
 	import SearchFilter from 'src/components/search/SearchFilter.svelte';
 	import HamburgerBtn from 'src/components/menu/HamburgerBtn.svelte';
-	import { doSearch, searchPrompt, searchPromptLarge } from 'src/components/search/searchStores';
+	import { doSearch, searchPrompt, searchPromptLarge, searchTemporarilyHidden } from 'src/components/search/searchStores';
 	import IconPin from 'src/components/icons/IconPin.svelte';
 
 	export let channel: Channel | null = null;
@@ -30,7 +30,7 @@
 		<div class="channel-header__left-wrapper">
 			<HamburgerBtn />
 
-			<div class="channel-header__left" class:searchlarge={$searchPromptLarge}>
+			<div class="channel-header__left" class:searchlarge={$searchPromptLarge && !$searchTemporarilyHidden}>
 				{#if channel !== null}
 					<IconChannel />
 					<a href={`/channels/${guildId}/${channel._id}`}>