From 74ab74e364694cea806e8e77faccc3139a83c6c0 Mon Sep 17 00:00:00 2001 From: Victor Jack <67293106+thedon-dev@users.noreply.github.com> Date: Tue, 18 Aug 2026 13:09:05 +0100 Subject: [PATCH] fix: make public courses page filters responsive on mobile (#801) * responsiveness styling * Changed plain text to use the translation * AI comment fixes * Made changes to the Theme * debug --------- Co-authored-by: Rotimi Best --- .../src/lib/utils/translations/da.json | 5 +- .../src/lib/utils/translations/de.json | 5 +- .../src/lib/utils/translations/en.json | 5 +- .../src/lib/utils/translations/es.json | 5 +- .../src/lib/utils/translations/fr.json | 5 +- .../src/lib/utils/translations/hi.json | 5 +- .../src/lib/utils/translations/pl.json | 5 +- .../src/lib/utils/translations/pt.json | 5 +- .../src/lib/utils/translations/ru.json | 5 +- .../src/lib/utils/translations/vi.json | 5 +- .../routes/(org-site)/courses/+page.svelte | 503 +++++++++++------- .../org-landing-page/bold/course.svelte | 9 +- .../custom/org-landing-page/bold/org.svelte | 9 +- .../org-landing-page/classic/course.svelte | 9 +- .../org-landing-page/classic/org.svelte | 9 +- .../org-landing-page/corporate/course.svelte | 9 +- .../org-landing-page/corporate/org.svelte | 9 +- .../org-landing-page/editorial/course.svelte | 9 +- .../org-landing-page/editorial/org.svelte | 9 +- .../ui/src/custom/org-landing-page/index.ts | 1 + .../landing-theme-scope.svelte | 23 + .../org-landing-page/minimal/course.svelte | 9 +- .../org-landing-page/minimal/org.svelte | 9 +- .../org-landing-page/saas/course.svelte | 9 +- .../custom/org-landing-page/saas/org.svelte | 99 ++-- .../org-landing-page/studio/course.svelte | 9 +- .../custom/org-landing-page/studio/org.svelte | 9 +- .../org-landing-page/tech/course.svelte | 9 +- .../custom/org-landing-page/tech/org.svelte | 9 +- .../org-landing-page/terminal/course.svelte | 9 +- .../org-landing-page/terminal/org.svelte | 9 +- .../org-landing-page/vibrant/course.svelte | 9 +- .../org-landing-page/vibrant/org.svelte | 9 +- 33 files changed, 472 insertions(+), 375 deletions(-) create mode 100644 packages/ui/src/custom/org-landing-page/landing-theme-scope.svelte diff --git a/apps/dashboard/src/lib/utils/translations/da.json b/apps/dashboard/src/lib/utils/translations/da.json index 54f13a06..54ffd0b8 100644 --- a/apps/dashboard/src/lib/utils/translations/da.json +++ b/apps/dashboard/src/lib/utils/translations/da.json @@ -3967,9 +3967,12 @@ "tags_title": "Tags", "types_title": "Typer", "search_placeholder": "Søg efter kurser...", + "clear_search": "Ryd søgning", "pricing_title": "Prissætning", "pricing_free": "Gratis", - "pricing_paid": "Betalt" + "pricing_paid": "Betalt", + "selected": "Valgt:", + "save_changes": "Gem ændringer" } }, "tags_admin": { diff --git a/apps/dashboard/src/lib/utils/translations/de.json b/apps/dashboard/src/lib/utils/translations/de.json index d48d7017..10e1114c 100644 --- a/apps/dashboard/src/lib/utils/translations/de.json +++ b/apps/dashboard/src/lib/utils/translations/de.json @@ -3967,9 +3967,12 @@ "tags_title": "Tags", "types_title": "Typen", "search_placeholder": "Kurse suchen...", + "clear_search": "Suche löschen", "pricing_title": "Preise", "pricing_free": "Kostenlos", - "pricing_paid": "Bezahlt" + "pricing_paid": "Bezahlt", + "selected": "Ausgewählt:", + "save_changes": "Änderungen speichern" } }, "tags_admin": { diff --git a/apps/dashboard/src/lib/utils/translations/en.json b/apps/dashboard/src/lib/utils/translations/en.json index fb53d3da..cb56892d 100644 --- a/apps/dashboard/src/lib/utils/translations/en.json +++ b/apps/dashboard/src/lib/utils/translations/en.json @@ -1300,7 +1300,10 @@ "pricing_free": "Free", "pricing_paid": "Paid", "empty": "No tags available yet", - "search_placeholder": "Search courses..." + "search_placeholder": "Search courses...", + "clear_search": "Clear search", + "selected": "Selected:", + "save_changes": "Save Changes" }, "empty": { "title": "No courses found", diff --git a/apps/dashboard/src/lib/utils/translations/es.json b/apps/dashboard/src/lib/utils/translations/es.json index f9534591..f67ca088 100644 --- a/apps/dashboard/src/lib/utils/translations/es.json +++ b/apps/dashboard/src/lib/utils/translations/es.json @@ -3967,9 +3967,12 @@ "tags_title": "Etiquetas", "types_title": "Tipos", "search_placeholder": "Buscar cursos...", + "clear_search": "Borrar búsqueda", "pricing_title": "Precios", "pricing_free": "Gratis", - "pricing_paid": "Pagado" + "pricing_paid": "Pagado", + "selected": "Seleccionado:", + "save_changes": "Guardar cambios" } }, "tags_admin": { diff --git a/apps/dashboard/src/lib/utils/translations/fr.json b/apps/dashboard/src/lib/utils/translations/fr.json index 5b8bbb05..6f6039d6 100644 --- a/apps/dashboard/src/lib/utils/translations/fr.json +++ b/apps/dashboard/src/lib/utils/translations/fr.json @@ -3967,9 +3967,12 @@ "tags_title": "Étiquettes", "types_title": "Espèces", "search_placeholder": "Rechercher des cours...", + "clear_search": "Effacer la recherche", "pricing_title": "Tarifs", "pricing_free": "Gratuit", - "pricing_paid": "Payé" + "pricing_paid": "Prix", + "selected": "Sélectionné :", + "save_changes": "Enregistrer les modifications" } }, "tags_admin": { diff --git a/apps/dashboard/src/lib/utils/translations/hi.json b/apps/dashboard/src/lib/utils/translations/hi.json index ff1734e8..e40df9f3 100644 --- a/apps/dashboard/src/lib/utils/translations/hi.json +++ b/apps/dashboard/src/lib/utils/translations/hi.json @@ -3967,9 +3967,12 @@ "tags_title": "टैग", "types_title": "प्रकार", "search_placeholder": "पाठ्यक्रम खोजें...", + "clear_search": "खोज साफ़ करें", "pricing_title": "मूल्य निर्धारण", "pricing_free": "निःशुल्क", - "pricing_paid": "भुगतान किया गया" + "pricing_paid": "भुगतान किया गया", + "selected": "चयनित:", + "save_changes": "परिवर्तन सहेजें" } }, "tags_admin": { diff --git a/apps/dashboard/src/lib/utils/translations/pl.json b/apps/dashboard/src/lib/utils/translations/pl.json index 4a1e00d7..7d11b5c2 100644 --- a/apps/dashboard/src/lib/utils/translations/pl.json +++ b/apps/dashboard/src/lib/utils/translations/pl.json @@ -3967,9 +3967,12 @@ "tags_title": "Tagi", "types_title": "Typy", "search_placeholder": "Wyszukaj kursy...", + "clear_search": "Wyczyść szukanie", "pricing_title": "Ceny", "pricing_free": "Bezpłatny", - "pricing_paid": "Płatny" + "pricing_paid": "Płatny", + "selected": "Wybrane:", + "save_changes": "Zapisz zmiany" } }, "tags_admin": { diff --git a/apps/dashboard/src/lib/utils/translations/pt.json b/apps/dashboard/src/lib/utils/translations/pt.json index ebea3cc9..5d3dce06 100644 --- a/apps/dashboard/src/lib/utils/translations/pt.json +++ b/apps/dashboard/src/lib/utils/translations/pt.json @@ -3967,9 +3967,12 @@ "tags_title": "Etiquetas", "types_title": "Tipos", "search_placeholder": "Pesquisar cursos...", + "clear_search": "Limpar pesquisa", "pricing_title": "Preços", "pricing_free": "Grátis", - "pricing_paid": "Pago" + "pricing_paid": "Pago", + "selected": "Selecionado:", + "save_changes": "Salvar alterações" } }, "tags_admin": { diff --git a/apps/dashboard/src/lib/utils/translations/ru.json b/apps/dashboard/src/lib/utils/translations/ru.json index bebb681d..a5b7aec8 100644 --- a/apps/dashboard/src/lib/utils/translations/ru.json +++ b/apps/dashboard/src/lib/utils/translations/ru.json @@ -3967,9 +3967,12 @@ "tags_title": "Теги", "types_title": "Типы", "search_placeholder": "Искать курсы...", + "clear_search": "Очистить поиск", "pricing_title": "Цены", "pricing_free": "Бесплатно", - "pricing_paid": "Платный" + "pricing_paid": "Платный", + "selected": "Выбрано:", + "save_changes": "Сохранить изменения" } }, "tags_admin": { diff --git a/apps/dashboard/src/lib/utils/translations/vi.json b/apps/dashboard/src/lib/utils/translations/vi.json index 3f0e204f..18a3f96a 100644 --- a/apps/dashboard/src/lib/utils/translations/vi.json +++ b/apps/dashboard/src/lib/utils/translations/vi.json @@ -3967,9 +3967,12 @@ "tags_title": "Thẻ", "types_title": "Các loại", "search_placeholder": "Tìm kiếm khóa học...", + "clear_search": "Xóa tìm kiếm", "pricing_title": "Định giá", "pricing_free": "miễn phí", - "pricing_paid": "Đã trả tiền" + "pricing_paid": "Đã trả tiền", + "selected": "Đã chọn:", + "save_changes": "Lưu thay đổi" } }, "tags_admin": { diff --git a/apps/dashboard/src/routes/(org-site)/courses/+page.svelte b/apps/dashboard/src/routes/(org-site)/courses/+page.svelte index fd0b5cb5..16f2f4e1 100644 --- a/apps/dashboard/src/routes/(org-site)/courses/+page.svelte +++ b/apps/dashboard/src/routes/(org-site)/courses/+page.svelte @@ -11,20 +11,18 @@ import { PoweredBy } from '$features/ui'; import LibraryBigIcon from '@lucide/svelte/icons/library-big'; import XIcon from '@lucide/svelte/icons/x'; - import { - normalizeLandingPageSettings, - themeHeaderShellClass, - themeStyle, - themeRendersNavInsideHero - } from '$features/org/utils/landing-page'; + import FilterIcon from '@lucide/svelte/icons/filter'; + import { normalizeLandingPageSettings, themeRendersNavInsideHero } from '$features/org/utils/landing-page'; - import { LandingButton, OrgLandingPageFooter } from '@cio/ui/custom/org-landing-page'; + import { LandingButton, LandingThemeScope, OrgLandingPageFooter } from '@cio/ui/custom/org-landing-page'; import { Checkbox } from '@cio/ui/base/checkbox'; import { Input } from '@cio/ui/base/input'; import { Empty } from '@cio/ui/custom/empty'; import { Separator } from '@cio/ui/base/separator'; import * as Pagination from '@cio/ui/base/pagination'; + import * as Sheet from '@cio/ui/base/sheet'; + import { Accordion } from '@cio/ui'; let { data } = $props(); @@ -33,6 +31,10 @@ let activeSearch = $derived(data.activeSearch || ''); let activePricing = $derived<'free' | 'paid' | undefined>(data.activePricing); let searchInput = $state(''); + let filterSheetOpen = $state(false); + type FilterSection = 'types' | 'pricing' | 'tags'; + // let openFilterSection = $state('types'); + let openFilterSection = $state('types'); $effect(() => { searchInput = activeSearch; @@ -59,8 +61,6 @@ } ); - const shellClass = $derived(`ui:min-h-screen ${themeHeaderShellClass(landingSettings.theme)}`); - const shellStyle = $derived(themeStyle(landingSettings.theme)); const navInsideHero = $derived(themeRendersNavInsideHero(landingSettings.theme)); const NavComponent = $derived(data.theme.Nav); @@ -74,6 +74,8 @@ image: '' }); + const activeFilterCount = $derived(selectedTags.length + selectedTypes.length + (activePricing ? 1 : 0)); + async function applyFilters(next: { tags?: string[]; types?: string[]; @@ -102,6 +104,42 @@ }); } + let isDesktop = $state(false); + + let restoreSheetOnMobile = $state(false); + + $effect(() => { + if (typeof window === 'undefined') return; + + const mql = window.matchMedia('(min-width: 1024px)'); + + function syncViewport(matches: boolean) { + isDesktop = matches; + + if (matches) { + openFilterSection = ['types', 'pricing', 'tags']; + + if (filterSheetOpen) { + restoreSheetOnMobile = true; + filterSheetOpen = false; + } + } else { + openFilterSection = 'types'; + + if (restoreSheetOnMobile) { + filterSheetOpen = true; + restoreSheetOnMobile = false; + } + } + } + + syncViewport(mql.matches); + + const onChange = (e: MediaQueryListEvent) => syncViewport(e.matches); + mql.addEventListener('change', onChange); + return () => mql.removeEventListener('change', onChange); + }); + async function goToPage(nextPage: number) { if (nextPage === data.pagination.page) { return; @@ -203,153 +241,107 @@ ); - - -
- {#if navInsideHero} - - {#snippet navigation()} - - {/snippet} - {#snippet children()} -
- onSearchInput(e.currentTarget.value)} - onkeydown={onSearchKeydown} - placeholder={$t('public_courses.filters.search_placeholder')} - class="ui:pr-8" - /> - {#if searchInput} - - {/if} -
- {/snippet} - - {:else} - + onSearchInput(e.currentTarget.value)} + onkeydown={onSearchKeydown} + placeholder={$t('public_courses.filters.search_placeholder')} + class="ui:pr-8" /> - - {#snippet children()} -
- onSearchInput(e.currentTarget.value)} - onkeydown={onSearchKeydown} - placeholder={$t('public_courses.filters.search_placeholder')} - class="ui:pr-8" - /> - {#if searchInput} - - {/if} -
- {/snippet} - + {#if searchInput} + + {/if} + +{/snippet} + +{#snippet filtersContent(showHeader = true)} + {#if showHeader} +
+

{$t('public_courses.filters.title')}

+

{$t('public_courses.filters.help')}

+
+ {/if} -
-
- - {$t('public_courses.clear_filters')} - -
- -
- - -
- {#if data.courses.length === 0} - - {:else} -
- {#each data.courses as course, index (course.id)} - - {/each} -
- - {#if data.pagination.totalPages > 1} - - {#snippet children({ pages, currentPage })} - - - - - {#each pages as pageItem (pageItem.key)} - {#if pageItem.type === 'ellipsis'} - - - - {:else} - - - {pageItem.value} - - - {/if} - {/each} - - - - - {/snippet} - - {/if} + + {/if} -
-
-
+ + {/key} + +{/snippet} - -
+ + + +
+ {#if navInsideHero} + + {#snippet navigation()} + + {/snippet} + {#snippet children()} + {@render searchField()} + {/snippet} + + {:else} + + + {#snippet children()} + {@render searchField()} + {/snippet} + + {/if} + +
+ +
+ +
+ (filterSheetOpen = true)}> + + {$t('public_courses.filters.title')} + {#if activeFilterCount > 0} + + {activeFilterCount} + + {/if} + +
+ +
+ + {$t('public_courses.clear_filters')} + +
+
+ + +
+ + + + +
+ {#if data.courses.length === 0} + + {:else} +
+ {#each data.courses as course, index (course.id)} + + {/each} +
+ + {#if data.pagination.totalPages > 1} + + {#snippet children({ pages, currentPage })} + + + + + {#each pages as pageItem (pageItem.key)} + {#if pageItem.type === 'ellipsis'} + + + + {:else} + + + {pageItem.value} + + + {/if} + {/each} + + + + + {/snippet} + + {/if} + {/if} +
+
+
+ + + + + + {$t('public_courses.filters.title')} + + {$t('public_courses.filters.selected')} + + {activeFilterCount} + + + + +
+ {@render filtersContent(false)} +
+ +
+ + {$t('public_courses.clear_filters')} + + (filterSheetOpen = false)} + >{$t('public_courses.filters.save_changes')} +
+ + + + +
+ diff --git a/packages/ui/src/custom/org-landing-page/bold/course.svelte b/packages/ui/src/custom/org-landing-page/bold/course.svelte index 6250c050..3957ec86 100644 --- a/packages/ui/src/custom/org-landing-page/bold/course.svelte +++ b/packages/ui/src/custom/org-landing-page/bold/course.svelte @@ -11,7 +11,7 @@ import CourseInstructor from '../course-instructor.svelte'; import CourseReviews from '../course-reviews.svelte'; import CoursePricing from '../course-pricing.svelte'; - import { themeStyle } from '../theme-style'; + import LandingThemeScope from '../landing-theme-scope.svelte'; import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers'; let { @@ -37,10 +37,7 @@ ); -
+
@@ -59,4 +56,4 @@
-
+ diff --git a/packages/ui/src/custom/org-landing-page/bold/org.svelte b/packages/ui/src/custom/org-landing-page/bold/org.svelte index b1fed212..603a92fb 100644 --- a/packages/ui/src/custom/org-landing-page/bold/org.svelte +++ b/packages/ui/src/custom/org-landing-page/bold/org.svelte @@ -10,7 +10,7 @@ import OrgLandingPageCoursesEmpty from '../courses-empty.svelte'; import { Button } from '../../../base/button'; import { DotPattern } from '../../animation/dot-pattern'; - import { themeStyle } from '../theme-style'; + import LandingThemeScope from '../landing-theme-scope.svelte'; let { orgName, @@ -30,10 +30,7 @@ }: OrgLandingPageProps = $props(); -
+
@@ -78,4 +75,4 @@ -
+ diff --git a/packages/ui/src/custom/org-landing-page/classic/course.svelte b/packages/ui/src/custom/org-landing-page/classic/course.svelte index 2eb6db3f..678c7af7 100644 --- a/packages/ui/src/custom/org-landing-page/classic/course.svelte +++ b/packages/ui/src/custom/org-landing-page/classic/course.svelte @@ -11,7 +11,7 @@ import CourseInstructor from '../course-instructor.svelte'; import CourseReviews from '../course-reviews.svelte'; import CoursePricing from '../course-pricing.svelte'; - import { themeStyle } from '../theme-style'; + import LandingThemeScope from '../landing-theme-scope.svelte'; import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers'; let { @@ -37,10 +37,7 @@ ); -
+
@@ -59,4 +56,4 @@
-
+ diff --git a/packages/ui/src/custom/org-landing-page/classic/org.svelte b/packages/ui/src/custom/org-landing-page/classic/org.svelte index 05aba5da..362d896b 100644 --- a/packages/ui/src/custom/org-landing-page/classic/org.svelte +++ b/packages/ui/src/custom/org-landing-page/classic/org.svelte @@ -9,7 +9,7 @@ import ClassicCourseCard from './course-card.svelte'; import OrgLandingPageCoursesEmpty from '../courses-empty.svelte'; import { Button } from '../../../base/button'; - import { themeStyle } from '../theme-style'; + import LandingThemeScope from '../landing-theme-scope.svelte'; let { orgName, @@ -29,10 +29,7 @@ }: OrgLandingPageProps = $props(); -
+
@@ -79,4 +76,4 @@ -
+ diff --git a/packages/ui/src/custom/org-landing-page/corporate/course.svelte b/packages/ui/src/custom/org-landing-page/corporate/course.svelte index dee16de2..fd25ea45 100644 --- a/packages/ui/src/custom/org-landing-page/corporate/course.svelte +++ b/packages/ui/src/custom/org-landing-page/corporate/course.svelte @@ -11,7 +11,7 @@ import CourseInstructor from '../course-instructor.svelte'; import CourseReviews from '../course-reviews.svelte'; import CoursePricing from '../course-pricing.svelte'; - import { themeStyle } from '../theme-style'; + import LandingThemeScope from '../landing-theme-scope.svelte'; import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers'; let { @@ -37,10 +37,7 @@ ); -
+
{#snippet navigation()} @@ -61,4 +58,4 @@
-
+ diff --git a/packages/ui/src/custom/org-landing-page/corporate/org.svelte b/packages/ui/src/custom/org-landing-page/corporate/org.svelte index d51048fd..d48badd3 100644 --- a/packages/ui/src/custom/org-landing-page/corporate/org.svelte +++ b/packages/ui/src/custom/org-landing-page/corporate/org.svelte @@ -9,7 +9,7 @@ import CorporateCourseCard from './course-card.svelte'; import OrgLandingPageCoursesEmpty from '../courses-empty.svelte'; import { Button } from '../../../base/button'; - import { themeStyle } from '../theme-style'; + import LandingThemeScope from '../landing-theme-scope.svelte'; let { orgName, @@ -29,10 +29,7 @@ }: OrgLandingPageProps = $props(); -
+
{#snippet navigation()} @@ -85,4 +82,4 @@ -
+ diff --git a/packages/ui/src/custom/org-landing-page/editorial/course.svelte b/packages/ui/src/custom/org-landing-page/editorial/course.svelte index 787180d2..3af22294 100644 --- a/packages/ui/src/custom/org-landing-page/editorial/course.svelte +++ b/packages/ui/src/custom/org-landing-page/editorial/course.svelte @@ -11,7 +11,7 @@ import CourseInstructor from '../course-instructor.svelte'; import CourseReviews from '../course-reviews.svelte'; import CoursePricing from '../course-pricing.svelte'; - import { themeStyle } from '../theme-style'; + import LandingThemeScope from '../landing-theme-scope.svelte'; import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers'; let { @@ -37,10 +37,7 @@ ); -
+
{#snippet navigation()} @@ -61,4 +58,4 @@
-
+ diff --git a/packages/ui/src/custom/org-landing-page/editorial/org.svelte b/packages/ui/src/custom/org-landing-page/editorial/org.svelte index 96dd8ccd..9c68cef1 100644 --- a/packages/ui/src/custom/org-landing-page/editorial/org.svelte +++ b/packages/ui/src/custom/org-landing-page/editorial/org.svelte @@ -8,7 +8,7 @@ import EditorialHero from './hero.svelte'; import EditorialCourseCard from './course-card.svelte'; import OrgLandingPageCoursesEmpty from '../courses-empty.svelte'; - import { themeStyle } from '../theme-style'; + import LandingThemeScope from '../landing-theme-scope.svelte'; import { Button } from '../../../base/button'; import { getCourseTypeLandingMeta } from '../landing-page-utils'; @@ -87,10 +87,7 @@ } -
+
{#snippet navigation()} @@ -185,4 +182,4 @@ -
+ diff --git a/packages/ui/src/custom/org-landing-page/index.ts b/packages/ui/src/custom/org-landing-page/index.ts index be653e00..c5c24320 100644 --- a/packages/ui/src/custom/org-landing-page/index.ts +++ b/packages/ui/src/custom/org-landing-page/index.ts @@ -69,6 +69,7 @@ export { courseCard as VibrantLandingCourseCard } from './vibrant'; +export { default as LandingThemeScope } from './landing-theme-scope.svelte'; export { default as OrgLandingPageCoursesEmpty } from './courses-empty.svelte'; export { default as LandingButton } from './landing-button.svelte'; export { default as OrgLandingPageEmbed } from './embed.svelte'; diff --git a/packages/ui/src/custom/org-landing-page/landing-theme-scope.svelte b/packages/ui/src/custom/org-landing-page/landing-theme-scope.svelte new file mode 100644 index 00000000..dcb3aada --- /dev/null +++ b/packages/ui/src/custom/org-landing-page/landing-theme-scope.svelte @@ -0,0 +1,23 @@ + + +
+ {@render children()} +
diff --git a/packages/ui/src/custom/org-landing-page/minimal/course.svelte b/packages/ui/src/custom/org-landing-page/minimal/course.svelte index 3428ccb7..8e1149cf 100644 --- a/packages/ui/src/custom/org-landing-page/minimal/course.svelte +++ b/packages/ui/src/custom/org-landing-page/minimal/course.svelte @@ -11,7 +11,7 @@ import CourseInstructor from '../course-instructor.svelte'; import CourseReviews from '../course-reviews.svelte'; import CoursePricing from '../course-pricing.svelte'; - import { themeStyle } from '../theme-style'; + import LandingThemeScope from '../landing-theme-scope.svelte'; import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers'; let { @@ -37,10 +37,7 @@ ); -
+
{#snippet navigation()} @@ -61,4 +58,4 @@
-
+ diff --git a/packages/ui/src/custom/org-landing-page/minimal/org.svelte b/packages/ui/src/custom/org-landing-page/minimal/org.svelte index 4c4f2298..07a6a2d9 100644 --- a/packages/ui/src/custom/org-landing-page/minimal/org.svelte +++ b/packages/ui/src/custom/org-landing-page/minimal/org.svelte @@ -9,7 +9,7 @@ import MinimalCourseCard from './course-card.svelte'; import OrgLandingPageCoursesEmpty from '../courses-empty.svelte'; import { Button } from '../../../base/button'; - import { themeStyle } from '../theme-style'; + import LandingThemeScope from '../landing-theme-scope.svelte'; let { orgName, @@ -29,10 +29,7 @@ }: OrgLandingPageProps = $props(); -
+
{#snippet navigation()} @@ -76,4 +73,4 @@ -
+ diff --git a/packages/ui/src/custom/org-landing-page/saas/course.svelte b/packages/ui/src/custom/org-landing-page/saas/course.svelte index b59edd5c..79a6445b 100644 --- a/packages/ui/src/custom/org-landing-page/saas/course.svelte +++ b/packages/ui/src/custom/org-landing-page/saas/course.svelte @@ -11,7 +11,7 @@ import CourseInstructor from '../course-instructor.svelte'; import CourseReviews from '../course-reviews.svelte'; import CoursePricing from '../course-pricing.svelte'; - import { themeStyle } from '../theme-style'; + import LandingThemeScope from '../landing-theme-scope.svelte'; import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers'; let { @@ -37,10 +37,7 @@ ); -
+
{#snippet navigation()} @@ -61,4 +58,4 @@
-
+ diff --git a/packages/ui/src/custom/org-landing-page/saas/org.svelte b/packages/ui/src/custom/org-landing-page/saas/org.svelte index e8c8e9c0..db21c03d 100644 --- a/packages/ui/src/custom/org-landing-page/saas/org.svelte +++ b/packages/ui/src/custom/org-landing-page/saas/org.svelte @@ -9,7 +9,7 @@ import SaasCourseCard from './course-card.svelte'; import OrgLandingPageCoursesEmpty from '../courses-empty.svelte'; import { Button } from '../../../base/button'; - import { themeStyle } from '../theme-style'; + import LandingThemeScope from '../landing-theme-scope.svelte'; let { orgName, @@ -29,57 +29,60 @@ }: OrgLandingPageProps = $props(); -
-
- - {#snippet navigation()} - - {/snippet} - + +
+
+ + {#snippet navigation()} + + {/snippet} + -
+
-
-
-
-
-

- {labels?.catalogEyebrow ?? 'Catalog'} -

-

- {labels?.catalogHeading ?? 'Featured courses.'} -

+
+
+
+
+

+ {labels?.catalogEyebrow ?? 'Catalog'} +

+

+ {labels?.catalogHeading ?? 'Featured courses.'} +

+
+ {#if hasMoreCourses && courses.length > 0} + + {/if}
- {#if hasMoreCourses && courses.length > 0} - + + {#if coursesLoaded && courses.length === 0} + + {:else} +
+ {#each courses as course, index (course.id)} + + {/each} +
{/if}
+
- {#if coursesLoaded && courses.length === 0} - - {:else} -
- {#each courses as course, index (course.id)} - - {/each} -
- {/if} -
-
+ {#if links && links.cards.length > 0} +
+ + {/if} {#if links && links.enabled !== false && links.cards.length > 0}
@@ -96,9 +99,7 @@ {/if}
- - -
+