Merge pull request #92 from JessamineCodes/stop-dashboard-squirrel-in…

…ifnite-bounce bounce in to squirrel on dashboard
JessamineCodes · Mar 16, 2023 · f4bd9db · f4bd9db
2 parents d2a5ac8 + b16f36d
commit f4bd9db
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 21 deletions.
diff --git a/app/assets/stylesheets/pages/_dashboard.scss b/app/assets/stylesheets/pages/_dashboard.scss
@@ -84,23 +84,31 @@ object-fit: contain;
 
 }
 
-.squirrel-img{
-width: 35%;
-bottom: auto;
-position: absolute;
-left: 950px;
-top: 30%;
-animation: bounce 2s ease;
-
-img {
-  width: 100%;
-  height: 510px;
-  object-fit: contain;
-}
 
-@keyframes bounce {
-	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
-	40% {transform: translateY(-30px);}
-	60% {transform: translateY(-15px);}
-};
+.squirrel-img-dashboard {
+  width: 35%;
+  bottom: auto;
+  position: absolute;
+  left: 950px;
+  top: 30%;
+  animation: bounce-in-right 2s ease;
+
+  img {
+    width: 100%;
+    height: 510px;
+    object-fit: contain;
+  }
+
+  @keyframes bounce-in-right {
+    0% {
+      opacity: 0;
+      transform: translateX(2000px);
+    }
+    60% {
+      opacity: 1;
+      transform: translateX(-30px);
+    }
+    80% { transform: translateX(10px); }
+    100% { transform: translateX(0); }
+  }
 }
diff --git a/app/assets/stylesheets/pages/_graduation.scss b/app/assets/stylesheets/pages/_graduation.scss
@@ -125,7 +125,13 @@
   animation-delay: -2.5s;
   background-color: #f9c4ea;
 }
-.squirrel {
+.squirrel-graduation {
   z-index:10;
   animation: bounce 1.5s infinite;
+
+  @keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+    40% {transform: translateY(-30px);}
+    60% {transform: translateY(-15px);}
+  };
 }
diff --git a/app/views/pages/dashboard.html.erb b/app/views/pages/dashboard.html.erb
@@ -47,7 +47,7 @@
       </div>
     </div>
 
-  <div class="squirrel-img">
+  <div class="squirrel-img-dashboard">
    <% if current_user.level == 0 %>
       <%= image_tag  "Original Sammy.png", class:"squirrel" %>
     <% elsif current_user.level== 1%>

diff --git a/app/views/pages/graduation.html.erb b/app/views/pages/graduation.html.erb
@@ -23,7 +23,7 @@
   <div>
     <h1>Congratulations, <%= current_user.first_name %>!</h1>
   </div>
-    <%= link_to dashboard_path, class: "w-25 squirrel" do %>
+    <%= link_to dashboard_path, class: "w-25 squirrel-graduation" do %>
       <%= image_tag "Sammy Chal 3.png" , class:"w-100" %>
     <% end %>
     <h2 class="mt-4">You've graduated spy school!</h2>