Remove category selection
This commit is contained in:
Nikola Petrov
parent
2b7caccad4
commit
7d9b7dd0bc
@ -668,69 +668,6 @@ main {
|
||||
#PORTFOLIO
|
||||
\*-----------------------------------*/
|
||||
|
||||
.filter-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-select-box {
|
||||
position: relative;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
background: var(--eerie-black-2);
|
||||
color: var(--light-gray);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--jet);
|
||||
border-radius: 14px;
|
||||
font-size: var(--fs-6);
|
||||
font-weight: var(--fw-300);
|
||||
}
|
||||
|
||||
.filter-select.active .select-icon {
|
||||
transform: rotate(0.5turn);
|
||||
}
|
||||
|
||||
.select-list {
|
||||
background: var(--eerie-black-2);
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--jet);
|
||||
border-radius: 14px;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.filter-select.active+.select-list {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.select-item button {
|
||||
background: var(--eerie-black-2);
|
||||
color: var(--light-gray);
|
||||
font-size: var(--fs-6);
|
||||
font-weight: var(--fw-300);
|
||||
text-transform: capitalize;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.select-item button:hover {
|
||||
--eerie-black-2: hsl(240, 2%, 20%);
|
||||
}
|
||||
|
||||
.project-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
@ -856,8 +793,7 @@ main {
|
||||
* #PORTFOLIO, BLOG
|
||||
*/
|
||||
|
||||
.project-img,
|
||||
.blog-banner-box {
|
||||
.project-img {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@ -1058,18 +994,9 @@ main {
|
||||
* #PORTFOLIO
|
||||
*/
|
||||
|
||||
.project-img,
|
||||
.blog-banner-box {
|
||||
.project-img {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.blog-posts-list {
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.blog-content {
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1108,45 +1035,10 @@ main {
|
||||
--fs-8: 15px;
|
||||
}
|
||||
|
||||
/**
|
||||
* PORTFOLIO
|
||||
*/
|
||||
|
||||
.article-title {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-select-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-list {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.filter-item button {
|
||||
color: var(--light-gray);
|
||||
font-size: var(--fs-5);
|
||||
transition: var(--transition-1);
|
||||
}
|
||||
|
||||
.filter-item button:hover {
|
||||
color: var(--light-gray-70);
|
||||
}
|
||||
|
||||
.filter-item button.active {
|
||||
color: var(--orange-yellow-crayola);
|
||||
}
|
||||
|
||||
/* portfolio and blog grid */
|
||||
|
||||
.project-list,
|
||||
.blog-posts-list {
|
||||
.project-list {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,63 +15,6 @@ const sidebarBtn = document.querySelector("[data-sidebar-btn]");
|
||||
sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
|
||||
|
||||
|
||||
// custom select variables
|
||||
const select = document.querySelector("[data-select]");
|
||||
const selectItems = document.querySelectorAll("[data-select-item]");
|
||||
const selectValue = document.querySelector("[data-select-value]");
|
||||
const filterBtn = document.querySelectorAll("[data-filter-btn]");
|
||||
|
||||
select.addEventListener("click", function () { elementToggleFunc(this); });
|
||||
|
||||
// add event in all select items
|
||||
for (let i = 0; i < selectItems.length; i++) {
|
||||
selectItems[i].addEventListener("click", function () {
|
||||
|
||||
let selectedValue = this.innerText.toLowerCase();
|
||||
selectValue.innerText = this.innerText;
|
||||
elementToggleFunc(select);
|
||||
filterFunc(selectedValue);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// filter variables
|
||||
const filterItems = document.querySelectorAll("[data-filter-item]");
|
||||
|
||||
const filterFunc = function (selectedValue) {
|
||||
|
||||
for (let i = 0; i < filterItems.length; i++) {
|
||||
|
||||
if (selectedValue === "all") {
|
||||
filterItems[i].classList.add("active");
|
||||
} else if (selectedValue === filterItems[i].dataset.category) {
|
||||
filterItems[i].classList.add("active");
|
||||
} else {
|
||||
filterItems[i].classList.remove("active");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// add event in all filter button items for large screen
|
||||
let lastClickedBtn = filterBtn[0];
|
||||
|
||||
for (let i = 0; i < filterBtn.length; i++) {
|
||||
|
||||
filterBtn[i].addEventListener("click", function () {
|
||||
|
||||
let selectedValue = this.innerText.toLowerCase();
|
||||
selectValue.innerText = this.innerText;
|
||||
filterFunc(selectedValue);
|
||||
|
||||
lastClickedBtn.classList.remove("active");
|
||||
this.classList.add("active");
|
||||
lastClickedBtn = this;
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// page navigation variables
|
||||
const navigationLinks = document.querySelectorAll("[data-nav-link]");
|
||||
|
||||
@ -3,61 +3,50 @@ var router = express.Router();
|
||||
|
||||
/* GET home page. */
|
||||
router.get('/', function (req, res, next) {
|
||||
|
||||
const categorys = ["cpp", "games", "js", "cs"];
|
||||
|
||||
const entry = [
|
||||
{
|
||||
category: categorys[0],
|
||||
img: "/images/projects/Advent_Of_Code_Logo.jpg",
|
||||
title: "Advent of code",
|
||||
des: "My solutions for AOC",
|
||||
link: "https://gitlab.com/homep/advent_of_code"
|
||||
},
|
||||
{
|
||||
category: categorys[1],
|
||||
img: "/images/projects/password_manager.jpeg",
|
||||
title: "Password manager",
|
||||
des: "CLI app",
|
||||
link: "https://gitlab.com/homep/password_manager"
|
||||
},
|
||||
{
|
||||
category: categorys[3],
|
||||
img: "/images/projects/media_player.jpeg",
|
||||
title: "Media player",
|
||||
des: "WPF",
|
||||
link: "https://gitlab.com/school221/semester_3/uporabniski_vmesniki"
|
||||
},
|
||||
{
|
||||
category: categorys[3],
|
||||
img: "/images/logo.png",
|
||||
title: "Server",
|
||||
des: "Everything running on my server",
|
||||
link: "https://gitlab.com/homep/server"
|
||||
},
|
||||
{
|
||||
category: categorys[3],
|
||||
img: "/images/projects/projektna_naloga.jpeg",
|
||||
title: "Highway Tracker",
|
||||
des: "School project",
|
||||
link: "https://gitlab.com/school221/projektna_naloga"
|
||||
},
|
||||
{
|
||||
category: categorys[3],
|
||||
img: "/images/projects/bitshift.jpeg",
|
||||
title: "BitShifters",
|
||||
des: "unity",
|
||||
link: "https://gitlab.com/school221/semester_4/razvoj_programskih_sistemov/bitshifters"
|
||||
},
|
||||
{
|
||||
category: categorys[3],
|
||||
img: "/images/projects/tetris.jpeg",
|
||||
title: "Tetris",
|
||||
des: "WPF",
|
||||
link: "https://gitlab.com/school221/semester_4/razvoj_programskih_sistemov/tetrisrps"
|
||||
},
|
||||
{
|
||||
category: categorys[3],
|
||||
img: "/images/projects/games.jpeg",
|
||||
title: "Games",
|
||||
des: "java",
|
||||
@ -65,7 +54,7 @@ router.get('/', function (req, res, next) {
|
||||
}
|
||||
];
|
||||
|
||||
res.render('main/2_0', { title: 'Nikola Petrov', disableBootStrap: true, categorys, entry });
|
||||
res.render('main/2_0', { title: 'Nikola Petrov', disableBootStrap: true, entry });
|
||||
});
|
||||
|
||||
router.get('/old', function (req, res, next) {
|
||||
|
||||
@ -365,50 +365,10 @@
|
||||
|
||||
<section class="projects">
|
||||
|
||||
<ul class="filter-list">
|
||||
|
||||
<li class="filter-item">
|
||||
<button class="active" data-filter-btn>All</button>
|
||||
</li>
|
||||
|
||||
{{#each categorys}}
|
||||
<li class="filter-item">
|
||||
<button data-filter-btn>{{this}}</button>
|
||||
</li>
|
||||
{{/each}}
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="filter-select-box">
|
||||
|
||||
<button class="filter-select" data-select>
|
||||
|
||||
<div class="select-value" data-select-value>Select category</div>
|
||||
|
||||
<div class="select-icon">
|
||||
<ion-icon name="chevron-down"></ion-icon>
|
||||
</div>
|
||||
|
||||
</button>
|
||||
|
||||
<ul class="select-list">
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>All</button>
|
||||
</li>
|
||||
{{#each categorys}}
|
||||
<li class="select-item">
|
||||
<button data-select-item>{{this}}</button>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<ul class="project-list">
|
||||
|
||||
{{#each entry}}
|
||||
<li class="project-item active" data-filter-item data-category="{{category}}">
|
||||
<li class="project-item active">
|
||||
<a href="{{link}}">
|
||||
|
||||
<figure class="project-img">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user