Merge pull request #6 from salino3/fix-image-rotate-01

Fix image rotate 01
salino3 · Jun 21, 2024 · 641bc26 · 641bc26
2 parents fa1e10a + 2075a3c
commit 641bc26
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 37 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -1,28 +1,28 @@
-# name: Build and Deploy
+name: Build and Deploy
 
-# on:
-#   push:
-#     branches:
-#       - master
+on:
+  push:
+    branches:
+      - master
 
-# jobs:
-#   build-and-deploy:
-#     runs-on: ubuntu-latest
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
 
-#     steps:
-#       - name: Checkout repository
-#         uses: actions/checkout@v2
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
 
-#       - name: Install dependencies
-#         run: npm install
+      - name: Install dependencies
+        run: npm install
 
-#       - name: Start JSON server
-#         run: npm run json-server &
+      - name: Start JSON server
+        run: npm run json-server &
 
-#       - name: Build
-#         run: npm run build
+      - name: Build
+        run: npm run build
 
-#       - name: Deploy
-#         run: npm run deploy
-#         env:
-#           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Deploy
+        run: npm run deploy
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/src/pods/home/components/image-rotate/rotate-image.styles.scss b/src/pods/home/components/image-rotate/rotate-image.styles.scss
@@ -1,13 +1,24 @@
-@keyframes slideDown {
-  from {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
+// @keyframes slideDown {
+//   from {
+//     transform: translateY(-100%);
+//     opacity: 0;
+//   }
+//   to {
+//     transform: translateY(0);
+//     opacity: 1;
+//   }
+// }
+
+// @keyframes slideUp {
+//   from {
+//     transform: translateY(0);
+//     opacity: 1;
+//   }
+//   to {
+//     transform: translateY(-100%);
+//     opacity: 0;
+//   }
+// }
 
 .rootRotateImage {
   display: flex;
@@ -30,7 +41,8 @@
     box-sizing: border-box;
 
     .containerIcon {
-      display: none;
+      display: flex;
+      opacity: 0;
       flex-direction: column;
       justify-content: center;
       align-items: center;
@@ -43,6 +55,7 @@
       top: 0;
       border-radius: 12px 12px 0 0;
       z-index: 10;
+      transition: opacity 1s, transform 1s;
 
       .iconImg {
         cursor: pointer;
@@ -51,8 +64,13 @@
     }
 
     &:hover .containerIcon {
-      display: flex;
-      animation: slideDown 1s forwards;
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &:not(:hover) .containerIcon {
+      opacity: 0;
+      transform: translateY(-100%);
     }
 
     img {
@@ -67,6 +85,7 @@
   .rootRotateImage {
     .container {
       max-width: 280px;
+
       .containerIcon {
         max-width: 280px;
       }

diff --git a/src/pods/home/home.component.tsx b/src/pods/home/home.component.tsx
@@ -7,19 +7,19 @@ export const HomePage: React.FC = () => {
     <div className="rootHomePage">
       <div className="containerHome">
         <h1>Home Page</h1>
-        <details>
+        <details open name="details">
           <summary>Rotate Image</summary>
           <div className="containerRotate">
             <RotateImage />
           </div>
         </details>
-        <details>
+        <details name="details">
           <summary>Custom Text Input Styles</summary>
           <div className="containerInput">
             <CustomInputText />
           </div>
         </details>
-        <details>
+        <details name="details">
           <summary>Custom Tooltip</summary>
           <div className="containerInput">
             <CustomTooltip />