Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs]: Updated the design of the search bar #344

Merged
merged 6 commits into from
Apr 20, 2023
Merged

[docs]: Updated the design of the search bar #344

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b5edd18
[docs]: Updated the design of the search bar
Caladan08 Apr 14, 2023
8b81db7
[docs]: Changed 'Search' text to paragraph tag
Caladan08 Apr 15, 2023
d008e2b
[docs]: Enforce 100% width
Caladan08 Apr 15, 2023
97661dd
[docs]: Removed blue background color of search modal
Caladan08 Apr 15, 2023
d7acce5
[docs]: Made the search links keyboard focusable
Caladan08 Apr 16, 2023
114bf34
[docs]: Corrected wrong language declarations in code blocks
Caladan08 Apr 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
23 changes: 23 additions & 0 deletions apps/docs/src/lib/components/SearchItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<script lang="ts">
import { Paper, Group } from "@svelteuidev/core"
type SearchType = {
title: String,
link: String,
section?: String
}
export let search: SearchType
</script>

<Paper class="searchTerm" withBorder>
<Group position="apart">
<div>
<p class="searchItemTitle">{search.title}</p>
{#if search.section}
<p class="searchItemDescription">{search.section}</p>
{/if}
</div>
<Group position="center" direction="column" override={{ color: "#969696" }}>
<p class="searchLink">{search.link}</p>
</Group>
</Group>
</Paper>
115 changes: 72 additions & 43 deletions apps/docs/src/lib/components/TopBar/TopBar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@
colorScheme,
Modal,
TextInput,
Paper,
Box,
Kbd
Kbd,
createStyles
} from '@svelteuidev/core';
import { Sun, Moon, MagnifyingGlass } from 'radix-icons-svelte';
import { mobile } from '$lib/components';
import { config, searchLinks } from './data.js';
import { onMount } from 'svelte';
import { hotkey } from '@svelteuidev/composables';
import { browser } from '$app/environment';
import SearchItem from '$lib/components/SearchItem.svelte';

type SearchItem = {
title: string;
Expand All @@ -42,6 +42,8 @@
searchTerm = '';
}

let previousSection = "";

function onSearchValueInput() {
matchingSearches = searchLinks.filter((item) =>
item.title.toLowerCase().includes(searchTerm.toLowerCase())
Expand All @@ -60,34 +62,61 @@
localStorage.setItem('recentSearches', JSON.stringify(existingSearches));
}

function changePreviousSection(newVal: string) {
previousSection = newVal;
return newVal;
}

function validateSearchLink(searchLinkSection: string) {
return searchLinkSection === previousSection
}

// @ts-nocheck
BeeMargarida marked this conversation as resolved.
Show resolved Hide resolved

const useStyles = createStyles(() => ({
'.svelteui-Modal-inner > div': {
width: '100%',
display: 'block !important'
},
'.svelteui-Modal-inner': {
display: 'block !important'
},
'.svelteui-Modal-modal': {
width: '100%',
maxWidth: '40rem',
background: 'linear-gradient(135deg, #3e97e6, #86b8e3) !important',
Caladan08 marked this conversation as resolved.
Show resolved Hide resolved
marginRight: "auto",
marginLeft: "auto"
}
}));
$: ({ getStyles } = useStyles());
</script>

<div class="mobile_topbar">
<Menu mr="xl" transition="scale" transitionOptions={{ duration: 250 }}>
<Menu.Label>Navigation</Menu.Label>
{#each config.links as { title, href }}
<Menu.Item root="a" {href}>
{title}
</Menu.Item>
{/each}
<Divider />
<Menu.Label>Experimental Theme Toggle</Menu.Label>
<Menu.Item>
<ActionIcon variant="default" on:click={toggleTheme} size={30}>
{#if $colorScheme === 'dark'}
<Moon />
{:else}
<Sun />
{/if}
</ActionIcon>
</Menu.Item>
<Menu.Item>
<ActionIcon variant="default" on:click={changeModalState} size={30}>
<MagnifyingGlass />
</ActionIcon>
</Menu.Item>
</Menu>
<Menu mr="xl" transition="scale" transitionOptions={{ duration: 250 }}>
<Menu.Label>Navigation</Menu.Label>
{#each config.links as { title, href }}
<Menu.Item root="a" {href}>
{title}
</Menu.Item>
{/each}
<Divider />
<Menu.Label>Experimental Theme Toggle</Menu.Label>
<Menu.Item>
<ActionIcon variant="default" on:click={toggleTheme} size={30}>
{#if $colorScheme === 'dark'}
<Moon />
{:else}
<Sun />
{/if}
</ActionIcon>
</Menu.Item>
<Menu.Item>
<ActionIcon variant="default" on:click={changeModalState} size={30}>
<MagnifyingGlass />
</ActionIcon>
</Menu.Item>
</Menu>
</div>
<div class="desktop_topbar">
<ul style={`padding-right: 0.75rem`} use:hotkey={[['mod+k', () => changeModalState()]]}>
Expand All @@ -102,8 +131,8 @@
on:click={changeModalState}
>
<div style="display: flex; align-items: center">
<MagnifyingGlass size={25} />
<p style="margin-left: 0.5rem; font-size: 1.1rem">Search</p>
<MagnifyingGlass size={25} color="#228be6" />
<h1 style="margin-left: 0.5rem; font-size: 1.1rem">Search</h1>
Caladan08 marked this conversation as resolved.
Show resolved Hide resolved
</div>
<div>
<Kbd>{browser && window.navigator.platform === 'MacIntel' ? '⌘' : 'Ctrl'}</Kbd> + <Kbd
Expand Down Expand Up @@ -138,9 +167,10 @@
<Modal
opened={modalOpened}
on:close={changeModalState}
title="SvelteUI Docs"
overflow="inside"
trapFocus
class={getStyles()}
withCloseButton={false}
>
<TextInput
placeholder="Search..."
Expand All @@ -155,19 +185,14 @@
</TextInput>
{#if searchTerm.length === 0}
{#if recentSearches.length > 0}
<p class="recentSearchesTitle">Recent searches:</p>
<h3 class="recentSearchesTitle">Recent searches:</h3>
{#each recentSearches as recentSearch}
<a
href={recentSearch.link}
style={`text-decoration: none`}
on:click={() => addSearch(recentSearch)}
>
<Paper class="searchTerm" withBorder>
<p class="searchItemTitle">{recentSearch.title}</p>
{#if recentSearch.section}
<p class="searchItemDescription">{recentSearch.section}</p>
{/if}
</Paper>
<SearchItem search={recentSearch} />
</a>
{/each}
{:else}
Expand All @@ -180,15 +205,19 @@
style={`text-decoration: none`}
on:click={() => addSearch(matchingSearch)}
>
<Paper class="searchTerm" withBorder>
<p class="searchItemTitle">{matchingSearch.title}</p>
{#if matchingSearch.section}
<p class="searchItemDescription">{matchingSearch.section}</p>
{/if}
</Paper>
<SearchItem search={matchingSearch} />
</a>
{/each}
{:else}
<p class="noMatches">No matches</p>
{/if}
<Divider />
Caladan08 marked this conversation as resolved.
Show resolved Hide resolved
{#each searchLinks as searchLink}
{#if validateSearchLink(searchLink.section)}
<SearchItem search={searchLink} />
{:else}
<h2>{changePreviousSection(searchLink.section)}</h2>
<SearchItem search={searchLink} />
{/if}
{/each}
</Modal>
86 changes: 43 additions & 43 deletions apps/docs/src/lib/components/TopBar/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,45 +12,25 @@ const discordStyles = {
};

export const searchLinks = [
{ title: "Introduction", link: "/introduction"},
{ title: "Installation", link: "/installation"},
{ title: "Learn the Basics", link: "/basics"},
{ title: "Contributing", link: "/contributing"},
{ title: "FAQ", link: "/faq"},
{ title: "Introduction", link: "/introduction", section: "Essentials" },
{ title: "Installation", link: "/installation", section: "Essentials" },
{ title: "Learn the Basics", link: "/basics", section: "Essentials" },
{ title: "Contributing", link: "/contributing", section: "Essentials" },
{ title: "FAQ", link: "/faq", section: "Essentials" },

{ title: "Version 0.5.0", link: "/changelog/v0-5-0", section: "Changelog" },
{ title: "Version 0.5.5", link: "/changelog/v0-5-5", section: "Changelog" },
{ title: "Version 0.6.0", link: "/changelog/v0-6-0", section: "Changelog" },
{ title: "Version 0.6.5", link: "/changelog/v0-6-5", section: "Changelog" },
{ title: "Version 0.7.0", link: "/changelog/v0-7-0", section: "Changelog" },

{ title: "use-browser-context", link: "/composables/use-browser-context", section: "Composables" },
{ title: "use-click-outside", link: "/composables/use-click-outside", section: "Composables" },
{ title: "use-clipboard", link: "/composables/use-clipboard", section: "Composables" },
{ title: "use-css-variable", link: "/composables/use-css-variable", section: "Composables" },
{ title: "use-debounce", link: "/composables/use-debounce", section: "Composables" },
{ title: "use-download", link: "/composables/use-download", section: "Composables" },
{ title: "use-element-size", link: "/composables/use-element-size", section: "Composables" },
{ title: "use-eye-dropper", link: "/composables/use-eye-dropper", section: "Composables" },
{ title: "use-focus-within", link: "/composables/use-focus-within", section: "Composables" },
{ title: "use-focus", link: "/composables/use-focus", section: "Composables" },
{ title: "use-hash", link: "/composables/use-hash", section: "Composables" },
{ title: "use-hot-key", link: "/composables/use-hot-key", section: "Composables" },
{ title: "use-id", link: "/composables/use-id", section: "Composables" },
{ title: "use-io", link: "/composables/use-io", section: "Composables" },
{ title: "use-lazy", link: "/composables/use-lazy", section: "Composables" },
{ title: "use-lock-scroll", link: "/composables/use-lock-scroll", section: "Composables" },
{ title: "use-long-press", link: "/composables/use-long-press", section: "Composables" },
{ title: "use-mouse-position", link: "/composables/use-mouse-position", section: "Composables" },
{ title: "use-os", link: "/composables/use-os", section: "Composables" },
{ title: "use-page-leave", link: "/composables/use-page-leave", section: "Composables" },
{ title: "use-persistent-tab", link: "/composables/use-persistent-tab", section: "Composables" },
{ title: "use-portal", link: "/composables/use-portal", section: "Composables" },
{ title: "use-raf-fn", link: "/composables/use-raf-fn", section: "Composables" },
{ title: "use-tab-leave", link: "/composables/use-tab-leave", section: "Composables" },
{ title: "use-throttle", link: "/composables/use-throttle", section: "Composables" },
{ title: "use-viewport-size", link: "/composables/use-viewport-size", section: "Composables" },
{ title: "use-web-worker", link: "/composables/use-web-worker", section: "Composables" },
{ title: "Customize Theme", link: "/theming/create-styles", section: "Theming" },
{ title: "Dark Theme", link: "/theming/dark-theme", section: "Theming" },
{ title: "Default Theme", link: "/theming/default-theme", section: "Theming" },
{ title: "Override", link: "/theming/override", section: "Theming" },
{ title: "Server Side Rendering", link: "/theming/ssr", section: "Theming" },
{ title: "SvelteUIProvider", link: "/theming/svelteui-provider", section: "Theming" },
{ title: "Utilities", link: "/theming/utilities", section: "Theming" },

{ title: "ActionIcon", link: "/core/action-icon", section: "Components" },
{ title: "Affix", link: "/core/affix", section: "Components" },
Expand Down Expand Up @@ -103,24 +83,44 @@ export const searchLinks = [
{ title: "TypographyProvider", link: "/core/typography-provider", section: "Components" },
{ title: "UnstyledButton", link: "/core/unstyled-button", section: "Components" },

{ title: "use-browser-context", link: "/composables/use-browser-context", section: "Composables" },
{ title: "use-click-outside", link: "/composables/use-click-outside", section: "Composables" },
{ title: "use-clipboard", link: "/composables/use-clipboard", section: "Composables" },
{ title: "use-css-variable", link: "/composables/use-css-variable", section: "Composables" },
{ title: "use-debounce", link: "/composables/use-debounce", section: "Composables" },
{ title: "use-download", link: "/composables/use-download", section: "Composables" },
{ title: "use-element-size", link: "/composables/use-element-size", section: "Composables" },
{ title: "use-eye-dropper", link: "/composables/use-eye-dropper", section: "Composables" },
{ title: "use-focus-within", link: "/composables/use-focus-within", section: "Composables" },
{ title: "use-focus", link: "/composables/use-focus", section: "Composables" },
{ title: "use-hash", link: "/composables/use-hash", section: "Composables" },
{ title: "use-hot-key", link: "/composables/use-hot-key", section: "Composables" },
{ title: "use-id", link: "/composables/use-id", section: "Composables" },
{ title: "use-io", link: "/composables/use-io", section: "Composables" },
{ title: "use-lazy", link: "/composables/use-lazy", section: "Composables" },
{ title: "use-lock-scroll", link: "/composables/use-lock-scroll", section: "Composables" },
{ title: "use-long-press", link: "/composables/use-long-press", section: "Composables" },
{ title: "use-mouse-position", link: "/composables/use-mouse-position", section: "Composables" },
{ title: "use-os", link: "/composables/use-os", section: "Composables" },
{ title: "use-page-leave", link: "/composables/use-page-leave", section: "Composables" },
{ title: "use-persistent-tab", link: "/composables/use-persistent-tab", section: "Composables" },
{ title: "use-portal", link: "/composables/use-portal", section: "Composables" },
{ title: "use-raf-fn", link: "/composables/use-raf-fn", section: "Composables" },
{ title: "use-tab-leave", link: "/composables/use-tab-leave", section: "Composables" },
{ title: "use-throttle", link: "/composables/use-throttle", section: "Composables" },
{ title: "use-viewport-size", link: "/composables/use-viewport-size", section: "Composables" },
{ title: "use-web-worker", link: "/composables/use-web-worker", section: "Composables" },

{ title: "SvelteUI Dates", link: "dates/getting-started-dates", section: "Dates" },
{ title: "Month", link: "/dates/month", section: "Dates" },

{ title: "SvelteUI Preprocessors", link: "preprocessors/getting-started-preprocessors", section: "Preprocessors"},
{ title: "view-source", link: "/preprocessors/view-source", section: "Preprocessors"},

{ title: "Typewriter", link: "/motion/typewriter", section: "Motion" },
{ title: "Flipboard", link: "/motion/flipboard", section: "Motion" },

{ title: "Prism", link: "/others/prism", section: "Others"},

{ title: "SvelteUI Preprocessors", link: "preprocessors/getting-started-preprocessors", section: "Preprocessors"},
{ title: "view-source", link: "/preprocessors/view-source", section: "Preprocessors"},

{ title: "Customize Theme", link: "/theming/create-styles", section: "Theming" },
{ title: "Dark Theme", link: "/theming/dark-theme", section: "Theming" },
{ title: "Default Theme", link: "/theming/default-theme", section: "Theming" },
{ title: "Override", link: "/theming/override", section: "Theming" },
{ title: "Server Side Rendering", link: "/theming/ssr", section: "Theming" },
{ title: "SvelteUIProvider", link: "/theming/svelteui-provider", section: "Theming" },
{ title: "Utilities", link: "/theming/utilities", section: "Theming" },
]

const links = [
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/lib/theme/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

--white: #ffffff;
--code: #f8f9fa;
--search-item: #8bbeec;
--search-item: #efefef;

--tag: #f4f5f7;
--tag-border: #d2d6dc;
Expand Down
13 changes: 11 additions & 2 deletions apps/docs/src/lib/theme/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,17 @@
transition-timing-function: ease-in !important;
transition-duration: 100ms !important;
}

.searchTerm:hover {
background-color: var(--search-item) !important;
border: 1px solid var(--search-item) !important;
}

.searchLink {
margin: 0;
font-size: 0.87rem
}

.searchBox {
width: 20rem !important;
height: 2.5rem;
Expand All @@ -39,13 +46,15 @@
padding: 0 0.5rem;
display: flex;
align-items: center;
transition-timing-function: ease-in !important;
transition-duration: 100ms !important;
}

.searchBox:hover {
background-color: rgba(227, 227, 227, 1);
}

.recentSearchesTitle {
font-size: 0.9rem;
margin-top: 0.8rem;
}

Expand All @@ -55,7 +64,7 @@
}

.searchItemDescription {
font-size: 0.8rem;
font-size: 0.9rem;
margin: 0
}

Expand Down