Add support hover bg support

ekaterinburgdev · Sep 17, 2023 · 0f62fae · 0f62fae · ekbdev · Sep 17, 2023
1 parent 5fb4d97
commit 0f62fae
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 32 deletions.
diff --git a/client/components/MainPage/Card/Card.module.css b/client/components/MainPage/Card/Card.module.css
@@ -1,6 +1,7 @@
 .Card {
-    --CardTitleBgrColor: transparent;
+    --CardTitleBgColor: transparent;
     --CardBgImage: none;
+    --CardBgImageHover: var(--CardBgImage, none);
 
     position: relative;
     z-index: 1;
@@ -19,10 +20,22 @@
     background-position: 100% 100%;
     color: white;
     background-image: var(--CardBgImage);
-    transition: .15s ease background-color;
+    transition: .15s ease background-color, .15s ease background-image, .15s ease filter;
     overflow: hidden;
 }
 
+@media (hover: hover) {
+    .Card:hover {
+        background-image: var(--CardBgImageHover, var(--CardBgImage));
+    }
+
+    /* Preload hover images */
+    .Card:before {
+        content: '';
+        background-image: var(--CardBgImageHover);
+    }
+}
+
 .Card_Public {
     background-color: var(--cards-public-bg);
     color: var(--cards-public-text);
@@ -79,14 +92,8 @@
     color: white;
 }
 
-@media (hover: hover) {
-    .Card:hover {
-        filter: brightness(0.98);
-    }
-}
-
 .Card:active {
-    filter: brightness(0.9);
+    filter: brightness(0.95);
 }
 
 .CardTitle {
@@ -95,13 +102,23 @@
     font-weight: 500;
     line-height: 1.05;
     margin-bottom: 8px;
-    background-color: var(--CardTitleBgrColor);
+    background-color: var(--CardTitleBgColor);
     text-decoration: underline;
     text-decoration-color: rgba(255, 255, 255, 0.2);
     text-underline-offset: 3px;
     transition: .15s ease color, .15s ease text-decoration;
 }
 
+.CardTitle.CardTitle_Bg {
+    color: white;
+    padding: .5em .75em;
+    text-decoration-color: rgba(255, 255, 255, 0.3);
+}
+
+.Card:active .CardTitle.CardTitle_Bg {
+    text-decoration-color: rgba(255, 255, 255, 0.8);
+}
+
 .CardDynamic {
     width: 100%;
     margin-top: auto;
@@ -113,10 +130,6 @@
     margin-bottom: 0;
 }
 
-.CardTitle_Bg {
-    padding: .5em .75em;
-}
-
 .Card:hover .CardTitle {
     text-decoration-color: rgba(255, 255, 255, 0.6);
 }

diff --git a/client/components/MainPage/Card/Card.tsx b/client/components/MainPage/Card/Card.tsx
@@ -1,44 +1,43 @@
 import classNames from 'classnames/bind';
 import { CardProps } from './Card.types';
-import styles from './Card.module.css';
 import t from 'utils/typograph';
-import React, { ReactElement } from "react";
+import React from "react";
+
+import { STRAPI_URL } from 'transport-common/strapi/constants';
+
+import styles from './Card.module.css';
 
 const cn = classNames.bind(styles);
 
 export function Card({
     title,
+    titleBackgroundColor,
     type,
     url,
     backgroundImage,
+    backgroundImageHover,
     dynamicContent,
     headerCaption,
     footerCaption
 }: CardProps) {
-    const getStylesByType = (type: CardProps["type"]) => {
-        switch (type) {
-            case "public":
-                return cn(styles.Card, styles.Card_Public)
-            case "car":
-                return cn(styles.Card, styles.Card_Car)
-            case "other":
-                return cn(styles.Card, styles.Card_Other)
-            case "pedestrian":
-                return cn(styles.Card, styles.Card_Pedestrian)
-            default:
-                return cn(styles.Card)
-        }
+    const cardStyle = {
+        "public": styles.Card_Public,
+        "car": styles.Card_Car,
+        "other": styles.Card_Other,
+        "pedestrian": styles.Card_Pedestrian
     }
 
     return (
         <a
-            className={getStylesByType(type)}
+            className={cn(styles.Card, cardStyle[type])}
             href={url}
             style={{
-                "--CardBgImage": backgroundImage && `url(https://transport-cms.ekaterinburg.city${backgroundImage})`,
+                "--CardTitleBgColor": titleBackgroundColor,
+                "--CardBgImage": backgroundImage && `url(${STRAPI_URL}${backgroundImage})`,
+                "--CardBgImageHover": backgroundImageHover && `url(${STRAPI_URL}${backgroundImageHover})`,
             } as React.CSSProperties}
         >
-            {title && <div className={cn(styles.CardTitle)}>
+            {title && <div className={cn(styles.CardTitle, { [styles.CardTitle_Bg]: titleBackgroundColor })}>
                 {t(title)}
             </div>}
             {headerCaption && <p className={cn(styles.CardHeaderCaption)}>

diff --git a/client/components/MainPage/MainPage.tsx b/client/components/MainPage/MainPage.tsx
@@ -42,8 +42,10 @@ export function MainPage({ cards, cardsDynamicData, marqueeItems }: MainPageType
                             return <Card
                                 type={attributes.type}
                                 title={attributes.title}
+                                titleBackgroundColor={attributes.titleBackgroundColor}
                                 url={attributes.url}
                                 backgroundImage={attributes?.backgroundImage?.data?.attributes?.url}
+                                backgroundImageHover={attributes?.backgroundImageHover?.data?.attributes?.url}
                                 headerCaption={attributes.headerCaption}
                                 footerCaption={attributes.footerCaption}
                                 dynamicContent={getDynamicContent(attributes.dynamicId)}