[#563] add highlight to interactive items

GermanZero-de · Sep 16, 2024 · e8addcf · e8addcf
1 parent df528ab
commit e8addcf
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 7 deletions.
diff --git a/frontend/app/common.scss b/frontend/app/common.scss
@@ -4,3 +4,16 @@ $gz-background-color: #fff9e5;
 
 $gz-checked: #9bd300;
 $gz-unchecked: grey;
+
+@mixin highlight(){
+    transform-style: preserve-3d;
+    transition:
+      .4s ease-in-out transform,
+      .4s ease-in-out filter;
+
+  &:hover{
+    transform: translate3d(0px, -5px, 0px);
+    filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.2));
+
+  }
+}
diff --git a/frontend/app/components/CallToActionTile.tsx b/frontend/app/components/CallToActionTile.tsx
@@ -15,11 +15,13 @@ interface NavigationTileProps {
 const CallToActionTile: React.FC<NavigationTileProps> = ({ title, text, link, type }) => {
   const colorStyle = type === "contact" ? styles.yellow : styles.green;
   return (
+    <div className={styles.wrapper}>
     <a
       href={link}
       target="_blank"
       className={`${styles.tile} ${colorStyle}`}
     >
+
       <Image
         className={styles.arrow}
         width={15}
@@ -48,7 +50,9 @@ const CallToActionTile: React.FC<NavigationTileProps> = ({ title, text, link, ty
         <h4 className={styles.title}>{title}</h4>
         {text && <h5 className={styles.text}>{text}</h5>}
       </div>
+
     </a>
+    </div>
   );
 };
 

diff --git a/frontend/app/components/LinkMeasureCard.tsx b/frontend/app/components/LinkMeasureCard.tsx
@@ -32,7 +32,7 @@ const LinkMeasureCard: React.FC<LinkMeasureCardProps> = ({ title, slugs, taskSta
 
         <ExecutionStatusIcon taskStatus={taskStatus}></ExecutionStatusIcon>
         {title}
-        <div className={styles.toggle}>
+        <div className={styles.toggle} title="mehr über die Massnahme">
           <Image
             src={ArrowRight}
             alt="Zeige mehr über die Massnahme"

diff --git a/frontend/app/components/styles/CallToActionTile.module.scss b/frontend/app/components/styles/CallToActionTile.module.scss
@@ -8,15 +8,21 @@
   background-color: common.$gz-checked;
 }
 
-.tile {
-  text-decoration: none;
+.wrapper{
   position: relative;
+
+  @include common.highlight();
+}
+.tile {
   padding: 5px;
-  color: black;
   width: 280px;
   height: 140px;
+  color: black;
+  text-decoration: none;
+  display: block;
   -webkit-clip-path: polygon(0 0, 0 100%, calc(100% - 2rem) 100%, 100% calc(100% - 2rem), 100% 0);
   clip-path: polygon(0 0, 0 100%, calc(100% - 2rem) 100%, 100% calc(100% - 2rem), 100% 0);
+
 }
 
 .content {

diff --git a/frontend/app/components/styles/NavigationTile.module.scss b/frontend/app/components/styles/NavigationTile.module.scss
@@ -7,11 +7,13 @@
   min-width: 20rem;
   cursor: pointer;
   text-decoration: none;
+  @include common.highlight();
+
 }
 
 .bigcard {
   border-color: common.$gz-color;
-
+  @include common.highlight();
   .header {
     background-color: transparent;
     padding: 0;

diff --git a/frontend/app/components/styles/SecondaryMeasureCard.module.scss b/frontend/app/components/styles/SecondaryMeasureCard.module.scss
@@ -12,8 +12,13 @@
   -webkit-clip-path: polygon(0 0, 0 100%, calc(100% - 2rem) 100%, 100% calc(100% - 2rem), 100% 0);
   clip-path: polygon(0 0, 0 100%, calc(100% - 2rem) 100%, 100% calc(100% - 2rem), 100% 0);
   border-bottom: none;
+  transition: transform 0.3s ease-in-out;
   cursor: pointer;
 
+  &:hover{
+    transform: translate(5px, 0);
+    background-color: rgba(230, 230, 230, 1);
+  }
   &.noicon {
     padding-left: 3.1rem;
   }
@@ -39,7 +44,6 @@
 .toggle {
   margin-left: auto;
   margin-right: 1rem;
-
   img {
     max-width: 1.5rem;
     height: auto;

diff --git a/frontend/app/components/styles/Tile.module.scss b/frontend/app/components/styles/Tile.module.scss
@@ -1,11 +1,13 @@
+@use "../../common.scss";
+
 .wrapper {
 
   margin-bottom: 30px;
   margin-right: 15px;
   position:relative;
   width: 300px;
   height: 180px;
-
+  @include common.highlight();
 }
 
 .background{