Updated project

Added animations

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>

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>

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;

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;

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) {
+      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