kamilniemczycki/kamilcraft.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

updated projects view

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-07-24 15:48:27 +02:00
parent 5de10940d9
commit d0e35a6d40
Signed by: kamilniemczycki
GPG Key ID: 04D4E2012F969213
2 changed files with 27 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/SelectedProjects.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11"> <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10">
<slot /> <slot />
<div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5"> <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
<div <div

80
src/views/ProjectsView.vue
View File

@ -1,38 +1,38 @@
<template> <template>
<div> <SelectedProjects :projects="projects">
<div class="project_categories"> <div class="pb-9">
<ul class="categories"> <ul class="flex justify-center list-none">
<li <li
v-for="category in getCategories" v-for="category in getCategories"
:key="category.slug" :key="category.slug"
class="categories_element" class="relative cursor-pointer mr-3 md:mr-5 last:mr-0 after:translate-y-2"
:class="{ 'categories_element-active': categories.active === category.slug }" :class="{ 'category-active': selectedCategory(category.slug) }"
@click="changeCategory(category.slug)" @click="changeCategory(category.slug)"
> >
<a :title="`Kategoria ${category.name}`">{{ category.name }}</a> <a
class="text-gray-500 hover:text-black"
:title="`Kategoria ${category.name}`"
>{{ category.name }}</a>
</li> </li>
</ul> </ul>
</div> </div>
<SelectedProjects :projects="projects" /> </SelectedProjects>
<div <div
v-if="projects.length === 0" v-if="projects.length === 0"
class="loading" class="loading"
> >
<div class="loading_animation" /> <div class="loading_animation" />
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { reactive, computed, onMounted, onUnmounted } from 'vue' import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import SelectedProjects from '../components/SelectedProjects' import SelectedProjects from '../components/SelectedProjects'
const store = useStore() const store = useStore()
const categories = reactive({ const activeCategory = ref('all')
active: 'all'
})
const projects = reactive([]) const projects = reactive([])
const getCategories = computed(() => store.getters.getCategories) const getCategories = computed(() => store.getters.getCategories)
@ -72,65 +72,23 @@ function loadListWhereCategory(category) {
} }
function changeCategory(category) { function changeCategory(category) {
categories.active = category activeCategory.value = category
loadListWhereCategory(category) loadListWhereCategory(category)
} }
function selectedCategory(categorySlug) {
return activeCategory.value === categorySlug
}
</script> </script>
<style lang="scss"> <style lang="scss">
@import "scss/media"; @import "scss/media";
.project_categories { .category-active::after {
padding-top: 45px; @apply absolute mx-auto left-0 right-0 bottom-0 h-0.5;
.categories {
display: flex;
justify-content: center;
list-style: none;
.categories_element {
position: relative;
cursor: pointer;
margin-right: 25px;
a {
color: var(--text-color);
&:hover {
color: black;
}
}
&:last-child {
margin-right: 0;
}
&-active {
&::after {
content: '';
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: #A2CF00; background-color: #A2CF00;
transform: translateY(8px);
animation: load-underline 300ms forwards; animation: load-underline 300ms forwards;
} }
}
@include media-mobile {
margin-right: 15px;
}
}
}
}
.projects {
padding-top: 25px;
padding-bottom: 25px;
}
@keyframes loading-animation { @keyframes loading-animation {
0% { 0% {