Skip to content

Commit

Permalink
🔥 불필요한 toggle 버튼 삭제
Browse files Browse the repository at this point in the history
  • Loading branch information
@padosum
padosum committed Dec 31, 2022
1 parent 87229dc commit 82f3e3a
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 37 deletions.
16 changes: 8 additions & 8 deletions src/client/App.js
View file
Expand Up @@ -43,25 +43,25 @@ function App() {
}
};

window.addEventListener('scroll', activeAnchor);
window.addEventListener('resize', activeAnchor);

function resizeGridItem(item) {
const resizeGridItem = item => {
const grid = item.parentElement;
const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
const contentHeight = item.querySelector('dl').getBoundingClientRect().height + rowGap;
const rowSpan = Math.ceil(contentHeight / (rowHeight + rowGap));
item.style.gridRowEnd = 'span ' + rowSpan;
}
};

function resizeAllGridItems() {
const resizeAllGridItems = () => {
const allItems = [...document.querySelectorAll('.achievement-wrapper')];
allItems.forEach(item => resizeGridItem(item));
}
};

resizeAllGridItems();
window.addEventListener('scroll', activeAnchor);
window.addEventListener('resize', activeAnchor);
window.addEventListener('resize', resizeAllGridItems);

resizeAllGridItems();
}

App();
Expand Down
37 changes: 17 additions & 20 deletions src/client/index.html
View file
Expand Up @@ -36,19 +36,19 @@
<ul class="sub-category">
<li class="sub-category-item">
<a href="#trip">
<i class="bx bxs-map-alt sub-category-item-icon"></i>
<i class="bx bxs-map-alt sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">여행</span>
</a>
</li>
<li class="sub-category-item">
<a href="#food">
<i class="bx bxs-bowl-rice sub-category-item-icon"></i>
<i class="bx bxs-bowl-rice sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">음식</span>
</a>
</li>
<li class="sub-category-item">
<a href="#rest-etc">
<i class="bx bxs-bed sub-category-item-icon"></i>
<i class="bx bxs-bed sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">기타</span>
</a>
</li>
Expand All @@ -59,31 +59,31 @@
<ul class="sub-category">
<li class="sub-category-item">
<a href="#making">
<i class="bx bxs-wrench sub-category-item-icon"></i>
<i class="bx bxs-wrench sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">제작</span>
</a>
</li>
<li class="sub-category-item">
<a href="#computer">
<i class="bx bx-desktop sub-category-item-icon"></i>
<i class="bx bx-desktop sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">컴퓨터</span>
</a>
</li>
<li class="sub-category-item">
<a href="#art">
<i class="bx bxs-palette sub-category-item-icon"></i>
<i class="bx bxs-palette sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">예술</span>
</a>
</li>
<li class="sub-category-item">
<a href="#community">
<i class="bx bxs-group sub-category-item-icon"></i>
<i class="bx bxs-group sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">커뮤니티</span>
</a>
</li>
<li class="sub-category-item">
<a href="#hobby-etc">
<i class="bx bxs-joystick sub-category-item-icon"></i>
<i class="bx bxs-joystick sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">기타</span>
</a>
</li>
Expand All @@ -94,25 +94,25 @@
<ul class="sub-category">
<li class="sub-category-item">
<a href="#survival">
<i class="bx bxs-compass sub-category-item-icon"></i>
<i class="bx bxs-compass sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">생존</span>
</a>
</li>
<li class="sub-category-item">
<a href="#outdoor">
<i class="bx bx-run sub-category-item-icon"></i>
<i class="bx bx-run sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">야외운동</span>
</a>
</li>
<li class="sub-category-item">
<a href="#indoor">
<i class="bx bx-dumbbell sub-category-item-icon"></i>
<i class="bx bx-dumbbell sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">실내운동</span>
</a>
</li>
<li class="sub-category-item">
<a href="#health-etc">
<i class="bx bxs-heart sub-category-item-icon"></i>
<i class="bx bxs-heart sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">기타</span>
</a>
</li>
Expand All @@ -123,19 +123,19 @@
<ul class="sub-category">
<li class="sub-category-item">
<a href="#education">
<i class="bx bxs-graduation sub-category-item-icon"></i>
<i class="bx bxs-graduation sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">고등교육</span>
</a>
</li>
<li class="sub-category-item">
<a href="#certificate">
<i class="bx bxs-certification sub-category-item-icon"></i>
<i class="bx bxs-certification sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">자격</span>
</a>
</li>
<li class="sub-category-item">
<a href="#language">
<i class="bx bxs-book sub-category-item-icon"></i>
<i class="bx bxs-book sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">언어</span>
</a>
</li>
Expand All @@ -146,13 +146,13 @@
<ul class="sub-category">
<li class="sub-category-item">
<a href="#work">
<i class="bx bxs-briefcase-alt-2 sub-category-item-icon"></i>
<i class="bx bxs-briefcase-alt-2 sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">직업</span>
</a>
</li>
<li class="sub-category-item">
<a href="#possession">
<i class="bx bxs-box sub-category-item-icon"></i>
<i class="bx bxs-box sub-category-item-icon bx-fw"></i>
<span class="sub-category-item-text">소유</span>
<span class="tooltip">소유</span>
</a>
Expand Down Expand Up @@ -183,9 +183,6 @@
<i class="bx bxs-error-alt filter-list-item-icon"></i><span class="filter-list-item-text">실패</span>
</li>
</ul>
<button class="sub-header-layout-toggle-btn">
<i class="bx bxs-layout filter-list-item-icon"></i>
</button>
</section>
<article class="achievements-wrapper">
<div class="achievements-dashboard">
Expand Down
9 changes: 0 additions & 9 deletions src/client/styles/global.css
View file
Expand Up @@ -263,10 +263,6 @@ header nav ul > li {
font-size: 2rem;
}

.sub-header-layout-toggle-btn {
display: none;
}

@media (min-width: 992px) {
.side-bar.collapse + .sub-header {
width: calc(100% - 6.4rem);
Expand Down Expand Up @@ -295,11 +291,6 @@ header nav ul > li {
.filter-list-item-text {
display: block;
}

.sub-header-layout-toggle-btn {
padding: 2rem 4rem;
display: flex;
}
}

h1.category-title {
Expand Down

0 comments on commit 82f3e3a

Please sign in to comment.