tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
rmcg.dev/projects/FrontendMentor/newbie/article-preview-component/js/challenge.js

38 lines
1.6 KiB
JavaScript
Raw Normal View History

Sharing working, desktop and mobile are close. Haven't matched design for sharing.
2020-10-04 01:34:27 +02:00
let isTooltipVisible = false;
function toggleTooltip() {
const articleFooter = document.querySelector(".articleFooter");
const articleImage = document.querySelector(".authorImage");
const articleAuthorAndDate = document.querySelector(".nameAndDate");
const articleShareButton = document.querySelector(".articleShareButton");
const articleShareTooltip = document.querySelector(".articleShareButtonTooltip");
const articleShareSection = document.querySelector(".articleShareSection");
Final styling tweaks. Moved share svg inline so I could color it, although better would be to edit the external svg to use fill="currentColor" Some final notes
2020-10-04 11:56:44 +02:00
if (window.innerWidth <= 650) {
Sharing working, desktop and mobile are close. Haven't matched design for sharing.
2020-10-04 01:34:27 +02:00
if (isTooltipVisible) {
articleFooter.classList.remove("backgroundDark");
articleShareButton.classList.remove("buttonDark");
articleShareSection.style.display = "none";
articleImage.style.display = "block";
articleAuthorAndDate.style.display = "block";
isTooltipVisible = false;
} else {
articleFooter.classList.add("backgroundDark");
articleShareButton.classList.add("buttonDark");
articleShareSection.style.display = "flex";
articleImage.style.display = "none";
articleAuthorAndDate.style.display = "none";
isTooltipVisible = true;
}
} else {
if (isTooltipVisible) {
articleShareButton.classList.remove("buttonDark");
articleShareTooltip.style.display = "none";
isTooltipVisible = false;
} else {
articleShareButton.classList.add("buttonDark");
articleShareTooltip.style.display = "flex";
isTooltipVisible = true;
}
}
}