feat: get I/O mobile view to look correct to the designs

newrelic · Jan 7, 2022 · 542f7a2 · 542f7a2
1 parent 9c3183b
commit 542f7a2
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 27 deletions.
diff --git a/src/components/IOBanner.js b/src/components/IOBanner.js
@@ -47,7 +47,7 @@ const BannerHeaderContent = () => (
     <body
       css={css`
         background: none;
-        color: var(--color-brand-300);
+        color: var(--color-brand-100);
 
         @media (max-width: ${MOBILE_BREAKPOINT}) {
           font-size: 12px;

diff --git a/src/components/PackTile.js b/src/components/PackTile.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import useMobileDetect from 'use-mobile-detect-hook';
 
 import { css } from '@emotion/react';
 import {
@@ -34,6 +35,8 @@ const PackTile = ({
 }) => {
   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)}
     >
       <div
         css={css`
-          display: flex;
           align-items: center;
+          display: flex;
+          height: 100%;
           justify-content: center;
           margin-bottom: 1rem;
-          height: 100%;
-
-          @media screen and (max-width: ${IMAGE_BREAKPOINT}) {
-            display: none;
-          }
 
           ${isListView() &&
           css`
@@ -164,6 +164,14 @@ const PackTile = ({
       <h4
         css={css`
           grid-area: title;
+
+          ${isMobile &&
+          css`
+            align-self: end;
+            font-size: 14px;
+            font-weight: 300;
+            margin: 0;
+          `}
         `}
       >
         {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
@@ -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')}
               </Button>
               <Overlay
                 isOpen={isCategoriesOverlayOpen}
@@ -466,7 +471,7 @@ const QuickstartsPage = ({ data, location }) => {
                       onClick={closeCategoriesOverlay}
                       variant={Button.VARIANT.PRIMARY}
                     >
-                      OK
+                      Cancel
                     </Button>
                   </div>
                 </div>
@@ -493,10 +498,12 @@ const QuickstartsPage = ({ data, location }) => {
               }
             `}
           >
-            <span>
-              Showing {filteredQuickstarts.length} results for:{' '}
-              <strong>{search || getDisplayName()}</strong>
-            </span>
+            {!isMobile && (
+              <span>
+                Showing {filteredQuickstarts.length} results for:{' '}
+                <strong>{search || getDisplayName()}</strong>
+              </span>
+            )}
           </div>
           <div
             css={css`