From 7d9b7dd0bca7b71d3d7a111ac3eb0cdd49062079 Mon Sep 17 00:00:00 2001 From: Nikola Petrov Date: Fri, 26 Jan 2024 22:25:20 +0100 Subject: [PATCH] Remove category selection --- public/assets/main/2_0/css/style.css | 114 +-------------------------- public/assets/main/2_0/js/script.js | 57 -------------- routes/main.js | 13 +-- views/main/2_0.hbs | 42 +--------- 4 files changed, 5 insertions(+), 221 deletions(-) diff --git a/public/assets/main/2_0/css/style.css b/public/assets/main/2_0/css/style.css index 31ffed9..307b1cb 100644 --- a/public/assets/main/2_0/css/style.css +++ b/public/assets/main/2_0/css/style.css @@ -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; } } diff --git a/public/assets/main/2_0/js/script.js b/public/assets/main/2_0/js/script.js index 1d1439d..48383e5 100644 --- a/public/assets/main/2_0/js/script.js +++ b/public/assets/main/2_0/js/script.js @@ -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]"); diff --git a/routes/main.js b/routes/main.js index a897fb5..b4811fc 100644 --- a/routes/main.js +++ b/routes/main.js @@ -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) { diff --git a/views/main/2_0.hbs b/views/main/2_0.hbs index b7161b5..4f30f97 100644 --- a/views/main/2_0.hbs +++ b/views/main/2_0.hbs @@ -365,50 +365,10 @@
- - -
- - - -
    - -
  • - -
    • - {{#each categorys}} -
  • - -
    • - {{/each}} -
- -
-