feat: clean up image styling

newrelic · Jan 4, 2022 · 07cbb19 · 07cbb19
1 parent be2ac53
commit 07cbb19
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 35 deletions.
diff --git a/src/components/PackImg.js b/src/components/PackImg.js
@@ -24,7 +24,8 @@ const PackImg = ({ className, logoUrl, packName }) => {
       <img
         css={css`
           display: block;
-          width: 100%;
+          max-width: 100%;
+          max-height: 100%;
         `}
         src={logoUrl}
         alt={packName}

diff --git a/src/components/PackTile.js b/src/components/PackTile.js
@@ -16,6 +16,8 @@ import {
 } from '../data/constants';
 import PackImg from './PackImg';
 
+const IMAGE_BREAKPOINT = 1080;
+
 const VIEWS = {
   GRID: 'Grid view',
   LIST: 'List view',
@@ -74,15 +76,17 @@ const PackTile = ({
       interactive
       css={css`
         overflow: hidden;
-        display: flex;
-        flex-direction: column;
-
+        //display: flex;
+        //flex-direction: column;
+        display: grid;
+        grid-template-rows: 1fr 3.5fr 0.5fr;
         ${view === VIEWS.LIST &&
         css`
           margin-bottom: 1em;
           display: grid;
           grid-template-columns: 1fr 3.5fr 0.5fr;
-          flex-direction: row;
+          @media (max-width: 1080px) {
+            grid-template-columns: 4.5fr 0.5fr;
         `}
 
         @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
@@ -91,36 +95,38 @@ const PackTile = ({
       `}
       onClick={() => handlePackClick(id)}
     >
-      <PackImg
-        logoUrl={logoUrl}
-        packName={title || name}
+      <div
         css={css`
-          height: 100px;
-          object-fit: scale-down;
-          width: 100%;
-          padding: 5% 5%;
-          margin: 0 auto 10px;
+          height: 130px;
+        `}
+      >
+        <PackImg
+          logoUrl={logoUrl}
+          packName={title || name}
+          css={css`
+            object-fit: scale-down;
+            padding: 5% 5%;
+            margin: 0 auto 10px;
 
-          .dark-mode & {
-            background-color: white;
-          }
+            .dark-mode & {
+              background-color: white;
+            }
 
-          ${view === VIEWS.LIST &&
-          css`
-            max-height: 150px;
-            height: 100%;
+            ${view === VIEWS.LIST &&
+            css`
+              max-height: 150px;
+              height: 100%;
 
-            flex: 0 0 auto;
-            @media (max-width: 1080px) {
+              @media (max-width: ${IMAGE_BREAKPOINT}px) {
+                display: none;
+              }
+            `}
+            @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
               display: none;
             }
           `}
-
-          @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
-            display: none;
-          }
-        `}
-      />
+        />
+      </div>
       <div
         css={css`
           padding: 1em;
@@ -130,7 +136,7 @@ const PackTile = ({
           css`
             width: 100%;
             flex: 1 1 auto;
-            @media (max-width: 1080px) {
+            @media (max-width: ${IMAGE_BREAKPOINT}px) {
               width: 100%;
             }
           `}

diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js
@@ -506,13 +506,16 @@ const QuickstartsPage = ({ data, location }) => {
                 287px
               );
 
-              @media (max-width: 1350px) {
-                grid-template-columns: repeat(3, 1fr);
-              }
+              ${view === VIEWS.GRID &&
+              css`
+                @media (max-width: 1350px) {
+                  grid-template-columns: repeat(3, 1fr);
+                }
 
-              @media (max-width: 1180px) {
-                grid-template-columns: repeat(1, 1fr);
-              }
+                @media (max-width: 1180px) {
+                  grid-template-columns: repeat(1, 1fr);
+                }
+              `}
 
               ${view === VIEWS.LIST &&
               css`