diff --git a/src/components/IOBanner.js b/src/components/IOBanner.js index d0a6ec7f0..0220c88f7 100644 --- a/src/components/IOBanner.js +++ b/src/components/IOBanner.js @@ -47,7 +47,7 @@ const BannerHeaderContent = () => ( { const tessen = useTessen(); + const isMobile = useMobileDetect().isMobile(); + const handlePackClick = (quickstartId) => { switch (true) { case quickstartId === RESERVED_QUICKSTART_IDS.GUIDED_INSTALL: @@ -104,37 +107,34 @@ const PackTile = ({ /* List view */ ${isListView() && css` - grid-template-columns: 0.5fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; grid-template-areas: 'logo title title' 'logo summary summary' 'logo tag tag'; grid-template-rows: auto; + `} - /* List view without logo */ - @media screen and (max-width: ${IMAGE_BREAKPOINT}) { - grid-template-columns: 1fr 1fr; - grid-template-rows: auto; - grid-template-areas: - 'title title' - 'summary summary' - 'tag tag'; - } + ${isMobile && + css` + grid-template-areas: + 'logo title title' + 'logo summary summary'; + 'logo summary summary'; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 0.5fr 1fr; + padding: 0.2rem; `} `} onClick={() => handlePackClick(id)} >
{title}{' '} @@ -198,8 +206,9 @@ const PackTile = ({ span { color: var(--color-brand-500); } - grid-area: tag; + + ${isMobile && 'display: none'} `} > {featured && ( diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js index 590deb277..260714db2 100644 --- a/src/pages/instant-observability.js +++ b/src/pages/instant-observability.js @@ -94,6 +94,10 @@ const QuickstartsPage = ({ data, location }) => { const searchParam = params.get('search'); const categoryParam = params.get('category'); + if (isMobile) { + setView(VIEWS.LIST); + } + setSearch(searchParam); setCategory(categoryParam || ''); if (searchParam || categoryParam) { @@ -126,6 +130,8 @@ const QuickstartsPage = ({ data, location }) => { navigate(`?${params.toString()}`); } + + closeCategoriesOverlay(); }; useDebounce( @@ -173,10 +179,10 @@ const QuickstartsPage = ({ data, location }) => { * Finds display name for selected category. * @returns {String} Display name for results found. */ - const getDisplayName = () => { + const getDisplayName = (defaultName = 'All quickstarts') => { const found = CATEGORIES.find((cat) => cat.value === category); - if (!found.value) return 'All quickstarts'; + if (!found.value) return defaultName; return found.displayName; }; @@ -384,13 +390,12 @@ const QuickstartsPage = ({ data, location }) => { color: var(--primary-text-color); font-size: 12px; justify-content: flex-start; - margin: 0.5rem 1rem 0 0; padding: 8px; `} variant={Button.VARIANT.LINK} onClick={() => setIsCategoriesOverlayOpen(true)} > - Filter by category + {getDisplayName('Filter by Category')} { onClick={closeCategoriesOverlay} variant={Button.VARIANT.PRIMARY} > - OK + Cancel
@@ -493,10 +498,12 @@ const QuickstartsPage = ({ data, location }) => { } `} > - - Showing {filteredQuickstarts.length} results for:{' '} - {search || getDisplayName()} - + {!isMobile && ( + + Showing {filteredQuickstarts.length} results for:{' '} + {search || getDisplayName()} + + )}