From eabade8c0b642d3aedc578cdc8481d44aaec574d Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 4 Dec 2023 15:02:46 +0100 Subject: [PATCH 01/53] Discord - New pages (empty) --- src/routes/discord/search/+page.svelte | 78 +++++++++++++++++++++ src/routes/discord/search/item/+page.svelte | 78 +++++++++++++++++++++ 2 files changed, 156 insertions(+) create mode 100644 src/routes/discord/search/+page.svelte create mode 100644 src/routes/discord/search/item/+page.svelte diff --git a/src/routes/discord/search/+page.svelte b/src/routes/discord/search/+page.svelte new file mode 100644 index 0000000000..d11db83c01 --- /dev/null +++ b/src/routes/discord/search/+page.svelte @@ -0,0 +1,78 @@ + + + + + {title} + + + + + + + + + + + + + + +
+ +
+ +
+
+
+
+
+
DISCORD SEARCH PAGE
+
+
+
+
+ + +
+
+
+
diff --git a/src/routes/discord/search/item/+page.svelte b/src/routes/discord/search/item/+page.svelte new file mode 100644 index 0000000000..84149ebf55 --- /dev/null +++ b/src/routes/discord/search/item/+page.svelte @@ -0,0 +1,78 @@ + + + + + {title} + + + + + + + + + + + + + + +
+ +
+ +
+
+
+
+
+
DISCORD Page Item
+
+
+
+
+ + +
+
+
+
From 4a117d220caedc61afa9638494292c5dc3b6f5e8 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Mon, 4 Dec 2023 15:09:56 +0100 Subject: [PATCH 02/53] mock server actions --- src/routes/support-threads/+page.svelte | 42 +++++++++ src/routes/support-threads/+page.ts | 108 ++++++++++++++++++++++++ 2 files changed, 150 insertions(+) create mode 100644 src/routes/support-threads/+page.svelte create mode 100644 src/routes/support-threads/+page.ts diff --git a/src/routes/support-threads/+page.svelte b/src/routes/support-threads/+page.svelte new file mode 100644 index 0000000000..b0df7f2b6f --- /dev/null +++ b/src/routes/support-threads/+page.svelte @@ -0,0 +1,42 @@ + + + + + {title} + + + + + + + + + + + + + + +
+
+
+ +
+

Support Threads

+
+ + + +
+
diff --git a/src/routes/support-threads/+page.ts b/src/routes/support-threads/+page.ts new file mode 100644 index 0000000000..ff945fbbe8 --- /dev/null +++ b/src/routes/support-threads/+page.ts @@ -0,0 +1,108 @@ +type MockThread = { + username?: string; + title: string; + text: string; + replies?: MockMessage[]; +}; + +type MockMessage = { + username?: string; + text: string; +}; + +// Mock threads about appwrite support +const MockData: MockThread[] = [ + { + username: 'appwrite', + title: 'Welcome to Appwrite!', + text: 'Welcome to Appwrite! We are glad to have you here. If you have any questions, feel free to ask them here.', + replies: [ + { + username: 'user1', + text: 'Hello! I am new to Appwrite. I am excited to get started.' + }, + { + username: 'user2', + text: 'Hi, I am new too! I am looking forward to learning more about Appwrite.' + }, + { + username: 'user3', + text: 'Welcome! I am happy to help if you have any questions.' + } + ] + }, + { + username: 'user1', + title: 'How do I create a new project?', + text: 'I am trying to create a new project, but I cannot find the option to do so. Can someone help me?', + replies: [ + { + username: 'user2', + text: 'Go to the dashboard and click on the "Create Project" button. You can then enter the name of your project and click "Create".' + }, + { + username: 'user3', + text: 'You can also create a project from the CLI. See the documentation for more information.' + } + ] + }, + { + username: 'user2', + title: 'How do I create a new collection?', + text: 'I am trying to create a new collection, but I cannot find the option to do so. Can someone help me?', + replies: [ + { + username: 'user1', + text: 'Go to the dashboard and click on the "Create Collection" button. You can then enter the name of your collection and click "Create".' + }, + { + username: 'user3', + text: 'You can also create a collection from the CLI.' + } + ] + } +]; + +type SearchResult = { + data: T; + rank: number; // Percentage of query words found, from 0 to 1 +}; + +const mockSearch = >(arr: T[], q: string): SearchResult[] => { + const queryWords = q.toLowerCase().split(/\s+/); + const rankPerWord = 1 / queryWords.length; + const res: SearchResult[] = []; + + arr.forEach((item) => { + Object.values(item).forEach((value) => { + const stringified = JSON.stringify(value); + + let rank = 0; + queryWords.forEach((word) => { + if (stringified.includes(word)) { + rank += rankPerWord; + } + }); + + if (rank === 0) return; + + res.push({ + data: item, + rank + }); + }); + }); + + return res.sort((a, b) => b.rank - a.rank); +}; + +export function load({ url }) { + const query = url.searchParams.get('q'); + if (!query) { + return { threads: MockData }; + } + + return { + threads: mockSearch(MockData, query) + }; +} From 0f28090a3f32911c07b0023e4786de79fc282500 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Mon, 4 Dec 2023 15:39:21 +0100 Subject: [PATCH 03/53] mock design --- src/routes/support-threads/+page.svelte | 51 ++++++++++++++++-- src/routes/support-threads/+page.ts | 67 +----------------------- src/routes/support-threads/Thread.svelte | 43 +++++++++++++++ src/routes/support-threads/data.ts | 53 +++++++++++++++++++ src/routes/support-threads/types.ts | 11 ++++ 5 files changed, 156 insertions(+), 69 deletions(-) create mode 100644 src/routes/support-threads/Thread.svelte create mode 100644 src/routes/support-threads/data.ts create mode 100644 src/routes/support-threads/types.ts diff --git a/src/routes/support-threads/+page.svelte b/src/routes/support-threads/+page.svelte index b0df7f2b6f..632b4b2ede 100644 --- a/src/routes/support-threads/+page.svelte +++ b/src/routes/support-threads/+page.svelte @@ -5,10 +5,13 @@ import FooterNav from '../../lib/components/FooterNav.svelte'; import MainFooter from '../../lib/components/MainFooter.svelte'; + import Thread from './Thread.svelte'; const title = 'Support Threads' + TITLE_SUFFIX; const description = DEFAULT_DESCRIPTION; const ogImage = DEFAULT_HOST + '/images/open-graph/website.png'; + + export let data; @@ -30,13 +33,53 @@
-
+

Support Threads

+ +
+
-
-

Support Threads

-
+

Found {data.threads.length} results.

+ +
+ {#each data.threads as thread} + + {/each} +
+ + diff --git a/src/routes/support-threads/+page.ts b/src/routes/support-threads/+page.ts index ff945fbbe8..3303720214 100644 --- a/src/routes/support-threads/+page.ts +++ b/src/routes/support-threads/+page.ts @@ -1,67 +1,4 @@ -type MockThread = { - username?: string; - title: string; - text: string; - replies?: MockMessage[]; -}; - -type MockMessage = { - username?: string; - text: string; -}; - -// Mock threads about appwrite support -const MockData: MockThread[] = [ - { - username: 'appwrite', - title: 'Welcome to Appwrite!', - text: 'Welcome to Appwrite! We are glad to have you here. If you have any questions, feel free to ask them here.', - replies: [ - { - username: 'user1', - text: 'Hello! I am new to Appwrite. I am excited to get started.' - }, - { - username: 'user2', - text: 'Hi, I am new too! I am looking forward to learning more about Appwrite.' - }, - { - username: 'user3', - text: 'Welcome! I am happy to help if you have any questions.' - } - ] - }, - { - username: 'user1', - title: 'How do I create a new project?', - text: 'I am trying to create a new project, but I cannot find the option to do so. Can someone help me?', - replies: [ - { - username: 'user2', - text: 'Go to the dashboard and click on the "Create Project" button. You can then enter the name of your project and click "Create".' - }, - { - username: 'user3', - text: 'You can also create a project from the CLI. See the documentation for more information.' - } - ] - }, - { - username: 'user2', - title: 'How do I create a new collection?', - text: 'I am trying to create a new collection, but I cannot find the option to do so. Can someone help me?', - replies: [ - { - username: 'user1', - text: 'Go to the dashboard and click on the "Create Collection" button. You can then enter the name of your collection and click "Create".' - }, - { - username: 'user3', - text: 'You can also create a collection from the CLI.' - } - ] - } -]; +import { MockData } from './data.js'; type SearchResult = { data: T; @@ -103,6 +40,6 @@ export function load({ url }) { } return { - threads: mockSearch(MockData, query) + threads: mockSearch(MockData, query).map((result) => result.data) }; } diff --git a/src/routes/support-threads/Thread.svelte b/src/routes/support-threads/Thread.svelte new file mode 100644 index 0000000000..2b1a938382 --- /dev/null +++ b/src/routes/support-threads/Thread.svelte @@ -0,0 +1,43 @@ + + +
+

{thread.title}

+

{thread.text}

+ +

Replies

+
+ {#each thread.replies as reply} +
+

{reply.text}

+
+ {/each} +
+
+ + diff --git a/src/routes/support-threads/data.ts b/src/routes/support-threads/data.ts new file mode 100644 index 0000000000..1de4bc66eb --- /dev/null +++ b/src/routes/support-threads/data.ts @@ -0,0 +1,53 @@ +import type { MockThread } from './types'; + +export const MockData: MockThread[] = [ + { + username: 'appwrite', + title: 'Welcome to Appwrite!', + text: 'Welcome to Appwrite! We are glad to have you here. If you have any questions, feel free to ask them here.', + replies: [ + { + username: 'user1', + text: 'Hello! I am new to Appwrite. I am excited to get started.' + }, + { + username: 'user2', + text: 'Hi, I am new too! I am looking forward to learning more about Appwrite.' + }, + { + username: 'user3', + text: 'Welcome! I am happy to help if you have any questions.' + } + ] + }, + { + username: 'user1', + title: 'How do I create a new project?', + text: 'I am trying to create a new project, but I cannot find the option to do so. Can someone help me?', + replies: [ + { + username: 'user2', + text: 'Go to the dashboard and click on the "Create Project" button. You can then enter the name of your project and click "Create".' + }, + { + username: 'user3', + text: 'You can also create a project from the CLI. See the documentation for more information.' + } + ] + }, + { + username: 'user2', + title: 'How do I create a new collection?', + text: 'I am trying to create a new collection, but I cannot find the option to do so. Can someone help me?', + replies: [ + { + username: 'user1', + text: 'Go to the dashboard and click on the "Create Collection" button. You can then enter the name of your collection and click "Create".' + }, + { + username: 'user3', + text: 'You can also create a collection from the CLI.' + } + ] + } +]; diff --git a/src/routes/support-threads/types.ts b/src/routes/support-threads/types.ts new file mode 100644 index 0000000000..8a77ec6a43 --- /dev/null +++ b/src/routes/support-threads/types.ts @@ -0,0 +1,11 @@ +export type MockThread = { + username?: string; + title: string; + text: string; + replies: MockMessage[]; +}; + +export type MockMessage = { + username?: string; + text: string; +}; From 22911c1526ad4cc48134a77bbc8adc72b0c996b9 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Mon, 4 Dec 2023 15:53:11 +0100 Subject: [PATCH 04/53] mock search --- src/lib/utils/debounce.ts | 7 +++++ src/routes/support-threads/+page.svelte | 23 ++++++++++++++ src/routes/support-threads/+page.ts | 34 +-------------------- src/routes/support-threads/Thread.svelte | 25 ++++++++++++++-- src/routes/support-threads/data.ts | 4 +++ src/routes/support-threads/helpers.ts | 38 ++++++++++++++++++++++++ src/routes/support-threads/types.ts | 1 + 7 files changed, 96 insertions(+), 36 deletions(-) create mode 100644 src/lib/utils/debounce.ts create mode 100644 src/routes/support-threads/helpers.ts diff --git a/src/lib/utils/debounce.ts b/src/lib/utils/debounce.ts new file mode 100644 index 0000000000..de9584818d --- /dev/null +++ b/src/lib/utils/debounce.ts @@ -0,0 +1,7 @@ +export function createDebounce(delay = 500) { + let timeout: NodeJS.Timeout; + return (callback: () => void) => { + clearTimeout(timeout); + timeout = setTimeout(callback, delay); + }; +} diff --git a/src/routes/support-threads/+page.svelte b/src/routes/support-threads/+page.svelte index 632b4b2ede..061c9e4e32 100644 --- a/src/routes/support-threads/+page.svelte +++ b/src/routes/support-threads/+page.svelte @@ -1,5 +1,7 @@ @@ -47,6 +69,7 @@ id="search" placeholder="Search for threads" data-hit="-1" + use:search /> diff --git a/src/routes/support-threads/+page.ts b/src/routes/support-threads/+page.ts index 3303720214..ccbfbfb163 100644 --- a/src/routes/support-threads/+page.ts +++ b/src/routes/support-threads/+page.ts @@ -1,37 +1,5 @@ import { MockData } from './data.js'; - -type SearchResult = { - data: T; - rank: number; // Percentage of query words found, from 0 to 1 -}; - -const mockSearch = >(arr: T[], q: string): SearchResult[] => { - const queryWords = q.toLowerCase().split(/\s+/); - const rankPerWord = 1 / queryWords.length; - const res: SearchResult[] = []; - - arr.forEach((item) => { - Object.values(item).forEach((value) => { - const stringified = JSON.stringify(value); - - let rank = 0; - queryWords.forEach((word) => { - if (stringified.includes(word)) { - rank += rankPerWord; - } - }); - - if (rank === 0) return; - - res.push({ - data: item, - rank - }); - }); - }); - - return res.sort((a, b) => b.rank - a.rank); -}; +import { mockSearch } from './helpers.js'; export function load({ url }) { const query = url.searchParams.get('q'); diff --git a/src/routes/support-threads/Thread.svelte b/src/routes/support-threads/Thread.svelte index 2b1a938382..678fd72a9e 100644 --- a/src/routes/support-threads/Thread.svelte +++ b/src/routes/support-threads/Thread.svelte @@ -11,14 +11,22 @@

Replies

{#each thread.replies as reply} -
+

{reply.text}

{/each}
+ + + +
diff --git a/src/routes/support-threads/data.ts b/src/routes/support-threads/data.ts index 1de4bc66eb..533a63a884 100644 --- a/src/routes/support-threads/data.ts +++ b/src/routes/support-threads/data.ts @@ -2,6 +2,7 @@ import type { MockThread } from './types'; export const MockData: MockThread[] = [ { + id: '1', username: 'appwrite', title: 'Welcome to Appwrite!', text: 'Welcome to Appwrite! We are glad to have you here. If you have any questions, feel free to ask them here.', @@ -21,6 +22,8 @@ export const MockData: MockThread[] = [ ] }, { + id: '2', + username: 'user1', title: 'How do I create a new project?', text: 'I am trying to create a new project, but I cannot find the option to do so. Can someone help me?', @@ -36,6 +39,7 @@ export const MockData: MockThread[] = [ ] }, { + id: '3', username: 'user2', title: 'How do I create a new collection?', text: 'I am trying to create a new collection, but I cannot find the option to do so. Can someone help me?', diff --git a/src/routes/support-threads/helpers.ts b/src/routes/support-threads/helpers.ts new file mode 100644 index 0000000000..ede32093cc --- /dev/null +++ b/src/routes/support-threads/helpers.ts @@ -0,0 +1,38 @@ +export type SearchResult = { + data: T; + rank: number; // Percentage of query words found, from 0 to 1 +}; + +export const mockSearch = >( + arr: T[], + q: string +): SearchResult[] => { + const queryWords = q.toLowerCase().split(/\s+/); + const rankPerWord = 1 / queryWords.length; + const res: SearchResult[] = []; + + arr.forEach((item) => { + const foundWords = new Set(); + + Object.values(item).forEach((value) => { + const stringified = JSON.stringify(value).toLowerCase(); + + queryWords.forEach((word) => { + if (stringified.includes(word)) { + foundWords.add(word); + } + }); + }); + + const rank = foundWords.size * rankPerWord; + + if (rank > 0) { + res.push({ + data: item, + rank + }); + } + }); + + return res.sort((a, b) => b.rank - a.rank); +}; diff --git a/src/routes/support-threads/types.ts b/src/routes/support-threads/types.ts index 8a77ec6a43..a9a6679fe7 100644 --- a/src/routes/support-threads/types.ts +++ b/src/routes/support-threads/types.ts @@ -1,4 +1,5 @@ export type MockThread = { + id: string; username?: string; title: string; text: string; From 14f8f71688a5a0261cbee96ad4de1c1569e20698 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Mon, 4 Dec 2023 15:55:44 +0100 Subject: [PATCH 05/53] better ux --- src/lib/utils/debounce.ts | 13 ++++++++++--- src/routes/support-threads/+page.svelte | 13 ++++++++++++- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/lib/utils/debounce.ts b/src/lib/utils/debounce.ts index de9584818d..37bb1586fa 100644 --- a/src/lib/utils/debounce.ts +++ b/src/lib/utils/debounce.ts @@ -1,7 +1,14 @@ export function createDebounce(delay = 500) { let timeout: NodeJS.Timeout; - return (callback: () => void) => { - clearTimeout(timeout); - timeout = setTimeout(callback, delay); + return { + debounce: (callback: () => void) => { + clearTimeout(timeout); + timeout = setTimeout(callback, delay); + }, + reset: () => clearTimeout(timeout), + immediate: (callback: () => void) => { + clearTimeout(timeout); + callback(); + } }; } diff --git a/src/routes/support-threads/+page.svelte b/src/routes/support-threads/+page.svelte index 061c9e4e32..90d5e7f39e 100644 --- a/src/routes/support-threads/+page.svelte +++ b/src/routes/support-threads/+page.svelte @@ -15,7 +15,7 @@ export let data; - const debounce = createDebounce(); + const { debounce, reset } = createDebounce(); const search = (node: HTMLInputElement) => { const inputHandler = () => { @@ -26,11 +26,22 @@ }); }; + const keydownHandler = (event: KeyboardEvent) => { + if (event.key === 'Enter') { + const value = node.value.toLowerCase(); + + reset(); + goto(`/support-threads/?q=${value}`, { replaceState: true, keepFocus: true }); + } + }; + node.addEventListener('input', inputHandler); + node.addEventListener('keydown', keydownHandler); return { destroy() { node.removeEventListener('input', inputHandler); + node.removeEventListener('keydown', keydownHandler); } }; }; From b2d837777222c727fc8e505e3d7ee184777b36bb Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Mon, 4 Dec 2023 16:13:32 +0100 Subject: [PATCH 06/53] stuff --- src/lib/actions/highlight.ts | 6 ++++ src/lib/stores/searchParams.ts | 33 +++++++++++++++++ src/routes/support-threads/Thread.svelte | 46 +++++++++++++++--------- 3 files changed, 69 insertions(+), 16 deletions(-) create mode 100644 src/lib/actions/highlight.ts create mode 100644 src/lib/stores/searchParams.ts diff --git a/src/lib/actions/highlight.ts b/src/lib/actions/highlight.ts new file mode 100644 index 0000000000..8055de859a --- /dev/null +++ b/src/lib/actions/highlight.ts @@ -0,0 +1,6 @@ +export const highlight = (node: HTMLElement, text: string[]) => { + text.forEach((word) => { + const regex = new RegExp(`(${word})`, 'gi'); + node.innerHTML = node.innerHTML.replace(regex, '$1'); + }); +}; diff --git a/src/lib/stores/searchParams.ts b/src/lib/stores/searchParams.ts new file mode 100644 index 0000000000..aac0f8c67d --- /dev/null +++ b/src/lib/stores/searchParams.ts @@ -0,0 +1,33 @@ +import { afterNavigate } from '$app/navigation'; +import { onMount } from 'svelte'; +import { writable } from 'svelte/store'; + +export const createSearchParams = () => { + const store = writable(new URLSearchParams()); + + onMount(() => { + store.set(new URLSearchParams(window.location.search)); + }); + + afterNavigate(() => { + store.set(new URLSearchParams(window.location.search)); + }); + + const update = (callback: (value: URLSearchParams) => URLSearchParams) => { + store.update((prev) => { + const newV = callback(prev); + window.history.pushState(null, '', `?${newV.toString()}`); + return newV; + }); + }; + + const set = (value: URLSearchParams) => { + update(() => value); + }; + + return { + ...store, + set, + update + }; +}; diff --git a/src/routes/support-threads/Thread.svelte b/src/routes/support-threads/Thread.svelte index 678fd72a9e..80fc498c0c 100644 --- a/src/routes/support-threads/Thread.svelte +++ b/src/routes/support-threads/Thread.svelte @@ -1,26 +1,40 @@ -
-

{thread.title}

-

{thread.text}

- -

Replies

-
- {#each thread.replies as reply} -
-

{reply.text}

-
- {/each} -
+{$searchParams} - - - -
+{#key highlightTerms} +
+

+ {thread.title} +

+

{thread.text}

+ +

Replies

+
+ {#each thread.replies as reply} +
+

{reply.text}

+
+ {/each} +
+ + + + +
+{/key} From 0da00eb249045c29445248c14001c4bb9363ac21 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Tue, 5 Dec 2023 11:57:28 +0100 Subject: [PATCH 08/53] delete pages --- src/routes/discord/+page.server.js | 5 -- src/routes/discord/search/+page.svelte | 78 --------------------- src/routes/discord/search/item/+page.svelte | 78 --------------------- 3 files changed, 161 deletions(-) delete mode 100644 src/routes/discord/+page.server.js delete mode 100644 src/routes/discord/search/+page.svelte delete mode 100644 src/routes/discord/search/item/+page.svelte diff --git a/src/routes/discord/+page.server.js b/src/routes/discord/+page.server.js deleted file mode 100644 index 58cfac3705..0000000000 --- a/src/routes/discord/+page.server.js +++ /dev/null @@ -1,5 +0,0 @@ -import { redirect } from '@sveltejs/kit'; - -export function load() { - throw redirect(301, 'https://discord.gg/GSeTUeA'); -} \ No newline at end of file diff --git a/src/routes/discord/search/+page.svelte b/src/routes/discord/search/+page.svelte deleted file mode 100644 index d11db83c01..0000000000 --- a/src/routes/discord/search/+page.svelte +++ /dev/null @@ -1,78 +0,0 @@ - - - - - {title} - - - - - - - - - - - - - - -
- -
- -
-
-
-
-
-
DISCORD SEARCH PAGE
-
-
-
-
- - -
-
-
-
diff --git a/src/routes/discord/search/item/+page.svelte b/src/routes/discord/search/item/+page.svelte deleted file mode 100644 index 84149ebf55..0000000000 --- a/src/routes/discord/search/item/+page.svelte +++ /dev/null @@ -1,78 +0,0 @@ - - - - - {title} - - - - - - - - - - - - - - -
- -
- -
-
-
-
-
-
DISCORD Page Item
-
-
-
-
- - -
-
-
-
From 1fd353224962fb4c8fa9765f93c938386b2b3e17 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Tue, 5 Dec 2023 12:06:07 +0100 Subject: [PATCH 09/53] Support Threads - add header section --- src/routes/support-threads/+page.svelte | 29 ++++++++++++++++++++++++- src/scss/_10-utilities.scss | 1 + 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/src/routes/support-threads/+page.svelte b/src/routes/support-threads/+page.svelte index b582348407..923da677af 100644 --- a/src/routes/support-threads/+page.svelte +++ b/src/routes/support-threads/+page.svelte @@ -65,8 +65,35 @@
+ + +
+
+ + + + + + + + + + + + + + + +
+
+
+

Support threads

+ +
+
+
+
-

Support Threads

Date: Tue, 5 Dec 2023 12:20:06 +0100 Subject: [PATCH 10/53] Support Threads - update main styles & layout --- src/routes/support-threads/+page.svelte | 72 ++++++++++++++----------- 1 file changed, 40 insertions(+), 32 deletions(-) diff --git a/src/routes/support-threads/+page.svelte b/src/routes/support-threads/+page.svelte index 923da677af..f093fb83bd 100644 --- a/src/routes/support-threads/+page.svelte +++ b/src/routes/support-threads/+page.svelte @@ -95,25 +95,50 @@
-
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
-

Found {data.threads.length} results.

-
+

Found {data.threads.length} results.

+ +
{#each data.threads as thread} {/each} @@ -125,22 +150,5 @@
From 3db26daeb9caa56c8736df0171678b2e3a773e69 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Tue, 5 Dec 2023 12:32:01 +0100 Subject: [PATCH 11/53] Support Threads - update main styles & layout --- src/routes/support-threads/Thread.svelte | 18 +-- src/routes/support-threads/[id]/+page.svelte | 120 +------------------ 2 files changed, 10 insertions(+), 128 deletions(-) diff --git a/src/routes/support-threads/Thread.svelte b/src/routes/support-threads/Thread.svelte index 7d85b937d7..bfcbeb686b 100644 --- a/src/routes/support-threads/Thread.svelte +++ b/src/routes/support-threads/Thread.svelte @@ -13,10 +13,14 @@ {#key highlightTerms} -
-

- {thread.title} -

+ +
+

+ {thread.title} +

+ +
+

{thread.text}

Replies

@@ -27,11 +31,7 @@
{/each} - - - - - + {/key} +hi \ No newline at end of file From dd3e0cd21d19a6f00622fa6e6acb4dc569456b90 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Tue, 5 Dec 2023 14:46:35 +0100 Subject: [PATCH 12/53] Support Threads - update main styles & layout --- src/routes/support-threads/Thread.svelte | 56 ++++++++++++++++-------- src/scss/6-elements/_icon-button.scss | 18 +++++--- 2 files changed, 50 insertions(+), 24 deletions(-) diff --git a/src/routes/support-threads/Thread.svelte b/src/routes/support-threads/Thread.svelte index bfcbeb686b..831f2c4236 100644 --- a/src/routes/support-threads/Thread.svelte +++ b/src/routes/support-threads/Thread.svelte @@ -21,16 +21,44 @@ -

{thread.text}

- -

Replies

-
- {#each thread.replies as reply} -
-

{reply.text}

-
- {/each} +

{thread.text}

+ +
+
    +
  • +
    Flutter
    +
    • +
  • +
    Self hosted
    +
    • +
+ +
    +
  • +
    + + 4 +
    +
    • +
  • +
    + + 4 +
    +
    • +
+ + {/key} @@ -65,14 +93,4 @@ border-inline-start: 1px solid hsl(var(--aw-color-greyscale-500)); margin-inline-start: 0.5rem; } - - a { - position: absolute; - right: 1rem; - top: 1rem; - - &:hover { - opacity: 0.5; - } - } diff --git a/src/scss/6-elements/_icon-button.scss b/src/scss/6-elements/_icon-button.scss index 1df9e90f20..7fab354b85 100644 --- a/src/scss/6-elements/_icon-button.scss +++ b/src/scss/6-elements/_icon-button.scss @@ -1,7 +1,8 @@ @use '../abstract' as *; .#{$p}-icon-button { - display: block; + display: flex; + gap: pxToRem(4); position: relative; block-size:pxToRem(28); inline-size:pxToRem(28); @@ -10,10 +11,17 @@ border-radius: pxToRem(8); > [class*='icon'] { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + position: relative; + &::before { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + &.is-more-content { + inline-size:fit-content; padding:pxToRem(4); line-height:pxToRem(18); + > [class*='icon'] { inline-size:pxToRem(16); } } From 8771d1d1dabfe1e151f844c3029211b4714ba1f9 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Tue, 5 Dec 2023 14:48:18 +0100 Subject: [PATCH 13/53] Support Threads - update main styles & layout --- src/routes/support-threads/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/support-threads/+page.svelte b/src/routes/support-threads/+page.svelte index f093fb83bd..382bc97421 100644 --- a/src/routes/support-threads/+page.svelte +++ b/src/routes/support-threads/+page.svelte @@ -118,7 +118,7 @@ -
+