-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #40 from Torehirth/17-create-description-modal
17 create extended description
- Loading branch information
Showing
16 changed files
with
639 additions
and
181 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
8 changes: 8 additions & 0 deletions
8
src/assets/icons/programming-languages/woocommerce-icon-svgrepo-com.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| export const toggleProjectDescription = () => { | ||
| document.addEventListener("click", (e) => { | ||
| // If clicking the "Read more" button (e.target = read more button) | ||
| if (e.target.classList.contains("read-more-btn")) { | ||
| // Selecting the related/closest container with the closest() method. | ||
| const projectWrapper = e.target.closest(".project-wrapper"); | ||
| const descriptionWrapper = projectWrapper.querySelector(".description-wrapper"); | ||
| const readLessBtn = projectWrapper.querySelector(".read-less-btn"); | ||
|
|
||
| // Display the extended description and update buttons styling | ||
| descriptionWrapper.classList.add("is-active"); | ||
| e.target.style.display = "none"; | ||
| readLessBtn.style.display = "block"; | ||
|
|
||
| // Scroll to the extended container when clicking read more button | ||
| descriptionWrapper.scrollIntoView({ | ||
| behavior: "smooth", | ||
| block: "start", | ||
| }); | ||
| } | ||
|
|
||
| // If clicking the "Read less" button (e.target = read less button) | ||
| if (e.target.classList.contains("read-less-btn")) { | ||
| // Selecting the related/closest container with the closest() method. | ||
| const projectWrapper = e.target.closest(".project-wrapper"); | ||
| const descriptionWrapper = projectWrapper.querySelector(".description-wrapper"); | ||
| const readMoreBtn = projectWrapper.querySelector(".read-more-btn"); | ||
|
|
||
| // Hide the extended description and update buttons styling | ||
| descriptionWrapper.classList.remove("is-active"); | ||
| e.target.style.display = "none"; | ||
| readMoreBtn.style.display = "block"; | ||
|
|
||
| // Scroll to the parent container of the project when clicking read less button | ||
| projectWrapper.scrollIntoView({ | ||
| behavior: "smooth", | ||
| block: "start", | ||
| }); | ||
| } | ||
| }); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| // Scroll to HTML ID by click event | ||
| export const scrollToSectionOnClick = (button, sectionId) => { | ||
| button.addEventListener("click", () => { | ||
| sectionId.scrollIntoView({ | ||
| behavior: "smooth", | ||
| block: "start", | ||
| }); | ||
| }); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,13 @@ | ||
| import { mobileNavEventListeners } from "../components/navigation/mobileNavEventListeners.mjs"; | ||
| import { renderSkillElements } from "../components/skills/renderSkillElements.mjs"; | ||
| import { displayHeaderOnScrollUp } from "../ui/displayHeaderOnScrollUp.mjs"; | ||
| import { toggleProjectDescription } from "../ui/toggleProjectDescription.mjs"; | ||
|
|
||
| // Open/close the mobile nav | ||
| mobileNavEventListeners(); | ||
| // Render Skill elements | ||
| renderSkillElements(); | ||
| // Display nav bar on scroll up | ||
| displayHeaderOnScrollUp(); | ||
| // Open and Close project description | ||
| toggleProjectDescription(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| @use "./variables"; | ||
|
|
||
| // Focus state style | ||
| @mixin focus-styles { | ||
| border: 1px solid variables.$main-text-colour; | ||
| padding: 2px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| @use "../abstracts/variables"; | ||
|
|
||
| .description-btn { | ||
| align-self: flex-start; | ||
| font-size: 1rem; | ||
| font-style: italic; | ||
| border-bottom: variables.$main-border; | ||
| padding: 2px 5px; | ||
| transition: all variables.$transition; | ||
|
|
||
| &:hover { | ||
| filter: opacity(variables.$opacity); | ||
| } | ||
| &:active { | ||
| border-bottom: 1px solid variables.$main-text-colour; | ||
| } | ||
| } | ||
|
|
||
| .description-wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 2rem; | ||
| //transition effects | ||
| position: relative; | ||
| top: -100%; | ||
| transition: all variables.$transition; | ||
| height: 0; | ||
| opacity: 0; | ||
| margin-bottom: -2rem; | ||
|
|
||
| ul { | ||
| list-style: disc; | ||
| padding-left: 1.125rem; | ||
| } | ||
| li, | ||
| p { | ||
| font-weight: 300; | ||
| } | ||
| // displaying content through JS | ||
| &.is-active { | ||
| top: 0; | ||
| height: 100%; | ||
| opacity: 1; | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
|
|
||
| .tech-wrapper { | ||
| display: flex; | ||
| align-items: center; | ||
| flex-wrap: wrap; | ||
| gap: 0.5rem; | ||
|
|
||
| img { | ||
| width: 3rem; | ||
| } | ||
| } | ||
|
|
||
| .project-description-underline { | ||
| display: inline-block; | ||
| border-bottom: 1px solid variables.$sub-bg-colour; | ||
| width: 50%; | ||
| align-self: start; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.