From 1ccbc2c39104f77e8fbdd1c4a426d8d3128d2920 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <kamilniemczycki@gmail.com>
Date: Tue, 31 Aug 2021 23:22:41 +0200
Subject: [PATCH] Updated project

Added animations
---
 src/components/BaseButton.vue                |  2 +-
 src/components/GhostButton.vue               | 60 ++++++++++++++++++++
 src/components/SelectedProjects.vue          | 16 +++++-
 src/components/sections/FavoriteProjects.vue | 25 +++++++-
 src/views/Projects.vue                       | 55 +++++++++++++++---
 5 files changed, 147 insertions(+), 11 deletions(-)
 create mode 100644 src/components/GhostButton.vue

diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 5c523f3..2079109 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button class="btn" :class="{ reverse: isReverse }">
-    <font-awesome-icon class="icon" if="hasIcon" :icon="icon"/>
+    <font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
     <span><slot></slot></span>
   </button>
 </template>
diff --git a/src/components/GhostButton.vue b/src/components/GhostButton.vue
new file mode 100644
index 0000000..9f078aa
--- /dev/null
+++ b/src/components/GhostButton.vue
@@ -0,0 +1,60 @@
+<template>
+  <button class="btn">
+    <font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
+    <span><slot></slot></span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'GhostButton',
+  props: {
+    hasIcon: {
+      type: Boolean,
+      default: false
+    },
+    icon: String
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$btn-gray-color: #4f4f4f;
+
+.btn {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 10px;
+  background-color: transparent;
+  color: $btn-gray-color;
+  font-size: 1.2em;
+  border: unset;
+
+  .icon {
+    margin-right: 10px;
+    font-size: 1.3em;
+  }
+
+  &:hover {
+    &::after {
+      width: 98%;
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0 auto;
+    width: 30%;
+    height: 2px;
+    background-color: $btn-gray-color;
+    transform: translateY(2px);
+    transition: width .3s linear;
+  }
+}
+</style>
diff --git a/src/components/SelectedProjects.vue b/src/components/SelectedProjects.vue
index 90bd1d9..98e889a 100644
--- a/src/components/SelectedProjects.vue
+++ b/src/components/SelectedProjects.vue
@@ -43,6 +43,7 @@
       background-color: #fafafa;
       border: 1px solid rgba(0, 0, 0, .025);
       border-radius: 5px;
+      animation: load-project 2s forwards;
 
       .project-image {
         grid-area: image;
@@ -86,7 +87,7 @@
       }
     }
 
-    @media screen and (min-width: 901px) {
+    @media screen and (min-width: 900px) {
       .project {
         .more-button {
           display: flex;
@@ -151,7 +152,18 @@
   }
 }
 
-@media screen and (max-width: 500px) {
+@keyframes load-project {
+  from {
+    transform: translateY(20px);
+    opacity: .1;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@media screen and (max-width: 600px) {
   .projects .container {
     grid-template-columns: 1fr;
     padding: 25px;
diff --git a/src/components/sections/FavoriteProjects.vue b/src/components/sections/FavoriteProjects.vue
index 4052491..af2f3dc 100644
--- a/src/components/sections/FavoriteProjects.vue
+++ b/src/components/sections/FavoriteProjects.vue
@@ -6,11 +6,17 @@
         <p>Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.</p>
       </div>
     </projects>
+    <div class="more-button">
+      <GhostButton @click.native="$router.push('projects')">
+        RESZTA PROJEKTÓW
+      </GhostButton>
+    </div>
   </section>
 </template>
 
 <script>
 import Projects from '../SelectedProjects'
+import GhostButton from '../GhostButton'
 
 export default {
   name: 'FavoriteProjects',
@@ -73,16 +79,33 @@ export default {
     ]
   },
   components: {
+    GhostButton,
     Projects
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "scss/default";
 
 .selected-projects {
   background-color: #fdfdfd !important;
+
+  .more-button {
+    margin-bottom: 45px;
+
+    .btn {
+      margin: 0 auto;
+
+      @media screen and (max-width: 600px) {
+        width: 100%;
+      }
+    }
+
+    @media screen and (max-width: 600px) {
+      padding: 0 25px;
+    }
+  }
 }
 .header-container {
   @extend .container;
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index 7e809b8..a426563 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -12,6 +12,9 @@
       </ul>
     </div>
     <projects :projects="projects.active" />
+    <div v-if="projects.active.length === 0" class="loading">
+      <div class="loading-animation"></div>
+    </div>
   </div>
 </template>
 
@@ -26,6 +29,7 @@
       position: relative;
       cursor: pointer;
       margin-right: 25px;
+
       a {
         color: var(--text-color);
         &:hover {
@@ -43,17 +47,51 @@
           left: 0;
           right: 0;
           bottom: 0;
-          width: 100%;
+          width: 0;
           height: 2px;
           background-color: #A2CF00;
           transform: translateY(8px);
+          animation: load-underline 300ms forwards;
         }
       }
+
+      @media screen and (max-width: 450px) {
+        margin-right: 15px;
+      }
     }
   }
 }
 .projects {
   padding-top: 25px;
+  padding-bottom: 25px;
+}
+.loading {
+  height: 300px;
+  .loading-animation {
+    margin: 20px auto;
+    width: 50px;
+    height: 50px;
+    border: 5px solid #f3f3f3;
+    border-top: 10px #A2CF00 solid;
+    border-radius: 50%;
+    animation: loading-animation 1s linear infinite;
+  }
+}
+@keyframes loading-animation {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes load-underline {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
 }
 </style>
 
@@ -172,12 +210,15 @@ export default {
   },
   methods: {
     loadListWhereCategory (category) {
-      if (category !== 'wszystkie') {
-        const projects = this.projects.all.filter(project => project.category === category)
-        this.projects.active = projects
-      } else {
-        this.projects.active = this.projects.all
-      }
+      this.projects.active = []
+      setTimeout(() => {
+        if (category !== 'wszystkie') {
+          const projects = this.projects.all.filter(project => project.category === category)
+          this.projects.active = projects
+        } else {
+          this.projects.active = this.projects.all
+        }
+      }, 1000)
     },
     changeCategory (category) {
       this.categories.active = category