refactor(card): align cards and images, update less variables

eea · Mar 23, 2022 · d47c978 · d47c978
1 parent 01ca26c
commit d47c978
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 39 deletions.
diff --git a/src/ui/Card/Card.stories.js b/src/ui/Card/Card.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Image, Icon, Grid } from 'semantic-ui-react';
+import { Card, Image, Grid } from 'semantic-ui-react';
 
 export default {
   title: 'Components/Card',
@@ -10,7 +10,8 @@ export default {
     },
   },
   argTypes: {
-    imgUrl: 'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+    imgUrl:
+      'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
     hasImage: {
       description: 'true if card contains image',
       table: {
@@ -62,12 +63,7 @@ export default {
 const Template = (args) => (
   <Card fluid={args.fluid}>
     {args.hasImage && (
-      <Image
-        src={args.imgUrl}
-        wrapped
-        ui={false}
-        alt="card image"
-      />
+      <Image src={args.imgUrl} wrapped ui={false} alt="card image" />
     )}
     <Card.Content>
       <Card.Header>{args.title}</Card.Header>
@@ -76,19 +72,16 @@ const Template = (args) => (
     {args.links !== null &&
       args.links.map((item, index) => (
         <Card.Content extra key={index}>
-          <a href="/#">
-            {' '}
-            <Icon name={item.icon} />
-            {item.linkName}
-          </a>
+          <a href="/#">{item.linkName}</a>
         </Card.Content>
       ))}
   </Card>
 );
 
 export const Default = Template.bind({});
 Default.args = {
-  imgUrl: 'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+  imgUrl:
+    'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
   title: 'Lorem Ipsum',
   description:
     'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
@@ -103,12 +96,7 @@ const GridTemplate = (args) => (
       <Grid.Column mobile={12} tablet={6} computer={2}>
         <Card fluid={card.fluid}>
           {card.hasImage && (
-            <Image
-              src={card.imgUrl}
-              wrapped
-              ui={false}
-              alt="card image"
-            />
+            <Image src={card.imgUrl} wrapped ui={false} alt="card image" />
           )}
           <Card.Content>
             <Card.Header>{card.title}</Card.Header>
@@ -117,11 +105,7 @@ const GridTemplate = (args) => (
           {card.links !== null &&
             card.links.map((item, index) => (
               <Card.Content extra key={index}>
-                <a href="/#">
-                  {' '}
-                  <Icon name={item.icon} />
-                  {item.linkName}
-                </a>
+                <a href="/#">{item.linkName}</a>
               </Card.Content>
             ))}
         </Card>
@@ -135,7 +119,8 @@ CardGrid.args = {
   cards: [
     {
       title: 'Lorem Ipsum',
-      imgUrl: 'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       hasImage: true,
@@ -144,7 +129,8 @@ CardGrid.args = {
     },
     {
       title: 'Suspendisse iaculis feugiat',
-      imgUrl: 'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      imgUrl:
+        'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       hasImage: true,

diff --git a/theme/themes/eea/views/card.overrides b/theme/themes/eea/views/card.overrides
@@ -2,28 +2,47 @@
          Theme Overrides
 *******************************/
 
-/* avoid long links from spilling outside of card body area */
+/* Avoid long links from spilling outside of card body area */
 .ui.cards > .card > .extra,
 .ui.card > .extra {
-  word-break: break-all;
+  font-size: @extraLinkFontSize;
+  word-break: @extraLinkWordBreak;
+}
+
+/* Cards must have same height */
+.ui.card {
+  height: 100%;
+}
+
+.ui.cards > .card > .image,
+.ui.card > .image {
+  overflow: @cardImageOverflow;
+  height: @cardImageHeight;
+
+  img {
+    width: @imageWidth;
+    height: @imageHeight;
+    object-fit: @imageObjectFit;
+    object-position: @imageObjectPosition;
+  }
 }
 
 .ui.card .meta > .category {
   font-size: @metaFontSize;
 }
 
+.ui.card .extra.content a {
+  font-weight: @contentLinkFontWeight;
+
+  &:hover {
+    text-decoration: @contentLinkTextDecoration;
+  }
+}
+
 .ui.left.card {
   margin-right: auto;
 }
 
 .ui.right.card {
   margin-left: auto;
 }
-
-.ui.card .extra.content a {
-  font-weight: 700;
-}
-
-.ui.card .extra.content a:hover {
-  text-decoration: underline;
-}
diff --git a/theme/themes/eea/views/card.variables b/theme/themes/eea/views/card.variables
@@ -51,11 +51,17 @@
 
 
 /* Image */
+@cardImageHeight: 200px;
+@cardImageOverflow: hidden;
 @imageBackground: @transparentBlack;
 @imagePadding: 0em;
 @imageBorder: none;
 @imageBoxShadow: none;
 @imageBorder: none;
+@imageHeight: 100%;
+@imageWidth: 100%;
+@imageObjectFit: cover;
+@imageObjectPosition: center;
 
 /* Content */
 @contentDivider: @borderWidth solid @internalBorderColor;
@@ -71,7 +77,7 @@
 /* Header */
 @headerMargin: '';
 @headerFontWeight: @bold;
-@headerFontSize: @relativeBig;
+@headerFontSize: 1.125rem;
 @headerLineHeightOffset: -(@lineHeight - 1em) / 2;
 @headerColor: @white;
 
@@ -94,7 +100,9 @@
 /* Links */
 @contentLinkColor: @white;
 @contentLinkHoverColor: @white;
+@contentLinkFontWeight: @bold;
 @contentLinkTransition: color @defaultDuration @defaultEasing;
+@contentLinkTextDecoration: underline;
 
 @headerLinkColor: @headerColor;
 @headerLinkHoverColor: @linkHoverColor;
@@ -122,7 +130,7 @@
 @dimmerColor: '';
 
 /* Additional Content */
-@extraDivider: 1px solid rgba(0, 0, 0, 0.05);
+@extraDivider: none;
 @extraBackground: none;
 @extraPosition: static;
 @extraWidth: auto;
@@ -137,6 +145,8 @@
 /* Extra Links */
 @extraLinkColor: @white;
 @extraLinkHoverColor: @white;
+@extraLinkWordBreak: break-all;
+@extraLinkFontSize: 0.875rem;
 
 /* Buttons */
 @buttonMargin: 0px -@borderWidth;