Dynamic tooltip ui fix

sadanandpai · Jul 15, 2024 · 936fbf2 · 936fbf2
1 parent 9628582
commit 936fbf2
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 101 deletions.
diff --git a/...pt/src/challenges/dynamic-tooltip/img.jpg → ...ss/src/challenges/dynamic-tooltip/img.jpg b/...pt/src/challenges/dynamic-tooltip/img.jpg → ...ss/src/challenges/dynamic-tooltip/img.jpg
diff --git a/apps/css/src/challenges/dynamic-tooltip/index.css b/apps/css/src/challenges/dynamic-tooltip/index.css
@@ -0,0 +1,68 @@
+.avatar {
+  background-image: url(img.jpg);
+  width: min(40vh, 40vw);
+  height: min(40vh, 40vw);
+  border-radius: 50%;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  margin: 0 auto;
+}
+
+.avatar::before {
+  --scale: 0;
+  content: attr(data-tooltip);
+  color: white;
+  background-color: black;
+  position: absolute;
+  padding: 5px;
+  text-align: center;
+  transform: translate(-50%, -100%) scale(var(--scale));
+  transition: 80ms transform;
+  transform-origin: bottom center;
+  top: -0.6rem;
+  left: 50%;
+}
+
+.avatar::after {
+  --scale: 0;
+  content: '';
+  width: 0;
+  height: 0;
+  border: 10px solid transparent;
+  border-top-color: black;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -100%) scale(var(--scale));
+  transition: 80ms transform;
+  transform-origin: top center;
+  top: 0.59rem;
+}
+
+.avatar.left::before {
+  --scale: 0;
+  top: 50%;
+  left: -0.6rem;
+  transform: translate(-100%, 0%) scale(var(--scale));
+  transform-origin: left center;
+}
+
+.avatar.left::after {
+  --scale: 0;
+  top: 50%;
+  left: -0.8rem;
+  border: 10px solid transparent;
+  border-left-color: black;
+  transform: translate(0%, 30%) scale(var(--scale));
+  transition: 80ms transform;
+  transform-origin: right center;
+}
+
+.avatar:hover::before,
+.avatar.left.hover::before {
+  --scale: 1;
+}
+.avatar:hover::after,
+.avatar.left.hover::after {
+  --scale: 1;
+}
diff --git a/apps/css/src/challenges/dynamic-tooltip/index.html b/apps/css/src/challenges/dynamic-tooltip/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="./../../helpers/header.js" type="module"></script>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="avatar left" data-tooltip="Thinking Cat"></div>
+    </div>
+  </body>
+</html>
diff --git a/apps/javascript/src/challenges/dynamic-tooltip/index.css b/apps/javascript/src/challenges/dynamic-tooltip/index.css
diff --git a/apps/javascript/src/challenges/dynamic-tooltip/index.html b/apps/javascript/src/challenges/dynamic-tooltip/index.html
diff --git a/shared/data/content/contributors.ts b/shared/data/content/contributors.ts
@@ -209,4 +209,8 @@ export const contributors = new Map<string, IContributor>([
     'Akshat-Gupta',
     { name: 'Akshat Gupta', pic: 'https://avatars.githubusercontent.com/u/53713926' },
   ],
+  [
+    'officialbidisha',
+    { name: 'Bidisha Das', pic: 'https://avatars.githubusercontent.com/u/49115207' },
+  ],
 ]);
diff --git a/shared/data/content/css-challenges.ts b/shared/data/content/css-challenges.ts
@@ -33,6 +33,17 @@ const challenges: Map<string, IChallenge> = new Map([
       tags: [],
     },
   ],
+  [
+    'dynamic-tooltip',
+    {
+      title: 'Dynamic Tooltip',
+      link: 'dynamic-tooltip/',
+      difficulty: EDifficulty.Easy,
+      developer: 'officialbidisha',
+      tags: [],
+      isNew: true,
+    },
+  ],
   [
     'light-dark-mode',
     {

diff --git a/shared/data/content/js-challenges.ts b/shared/data/content/js-challenges.ts
@@ -34,17 +34,6 @@ const challenges: Map<string, IChallenge> = new Map([
       isNew: true,
     },
   ],
-  [
-    'dynamic-tooltip',
-    {
-      title: 'Dynamic Tooltip',
-      link: 'dynamic-tooltip/',
-      difficulty: EDifficulty.Easy,
-      developer: 'officialbidisha', 
-      tags: [],
-      isNew: true,
-    }
-  ],
   [
     'roll-dice',
     {