From 4eab3313a10296965b9bf21864d23d9469ef3c6a Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Sun, 4 Oct 2020 00:34:27 +0100 Subject: [PATCH] Sharing working, desktop and mobile are close. Haven't matched design for sharing. --- .../article-preview-component/css/style.css | 108 +++++++++++++++--- .../article-preview-component/index.html | 19 ++- .../article-preview-component/js/challenge.js | 38 ++++++ .../notes/process.md | 16 ++- 4 files changed, 164 insertions(+), 17 deletions(-) diff --git a/FrontendMentor/article-preview-component/css/style.css b/FrontendMentor/article-preview-component/css/style.css index b51389b..f5ca448 100644 --- a/FrontendMentor/article-preview-component/css/style.css +++ b/FrontendMentor/article-preview-component/css/style.css @@ -39,6 +39,7 @@ body { flex-direction: column; border-radius: var(--cornerRadius); + overflow: hidden; background-color: white; width: 87%; margin: 0 auto; @@ -49,7 +50,6 @@ body { .previewImage { flex: 1 45%; overflow: hidden; - border-radius: var(--cornerRadius) var(--cornerRadius) 0 0; } /* @@ -65,10 +65,10 @@ body { .previewBody { flex: 1 60%; margin-top: 0.85rem; - padding: 1rem 1.75rem 1rem 1.5rem; } .articleSummary { + padding: 1rem 1.75rem 1rem 1.5rem; } .articleTitle { @@ -88,11 +88,14 @@ body { line-height: 20px; } -.articleAuthor { - margin-top: 1.5rem; +.articleFooter { + /* margin-top: 1.5rem; */ display: flex; flex-direction: row; justify-content: flex-start; + padding: 1rem 1.5rem 1rem 1.5rem; + + transition: 250ms ease-in-out; } .authorImage { @@ -118,16 +121,90 @@ body { font-weight: 500; } -.articleShareIcon { - width: 20px; - height: 20px; +.articleShareButton { background-color: var(--lightGrayishBlue); + + width: 30px; + height: 30px; + + border: none; + border-radius: 50%; + + cursor: pointer; + margin-left: auto; margin-top: auto; margin-bottom: auto; - /* not the right way to put a circle around the icon */ - border-radius: 50%; + + + transition: 250ms ease-in-out; + + } + +.articleShareButton > .articleShareIcon { +} + +.buttonDark { + background-color: var(--veryDarkGrayishBlue); +} + +.buttonDark img svg path { + background-color: white; +} + +.articleShareButtonTooltip { + display: none; + position: relative; + justify-content: space-between; + align-items: center; + + border-radius: 0.5rem; + + background: var(--veryDarkGrayishBlue); + box-shadow: 0px 10px 10px rgba(201, 213, 225, 0.503415); + + width: 170px; + padding: 0.75rem 1rem; + bottom: 80px; + left: -104px; + + overflow: visible; +} + +.articleShareButtonTooltip::before { + content: ""; + width: 0px; + height: 0px; + border: 0.8rem solid transparent; + position: absolute; + + left: 45%; + bottom: -25px; + border-top: 10px solid var(--veryDarkGrayishBlue); +} + +.articleShareSection { + display: none; + align-items: center; + justify-content: space-around; + + width: 80%; + height: 2rem; +} + +.backgroundDark { + background: var(--veryDarkGrayishBlue); +} + +.articleShareButtonTooltip > p, .articleShareSection > p { + letter-spacing: 5px; + color: var(--grayishBlue); + font-weight: 500; + font-size: 13px; + +} + .attribution { } @@ -144,7 +221,7 @@ body { .previewImage { width: 100%; - border-radius: var(--cornerRadius) 0 0 var(--cornerRadius); + /* border-radius: var(--cornerRadius) 0 0 var(--cornerRadius); */ } /* @@ -161,8 +238,11 @@ body { .previewBody { margin-top: 0.5rem; - padding: 1.2rem 2.3rem 1.6rem 0rem; - margin-left: 2.45rem; + margin-left: 0.25rem; + } + + .articleSummary { + padding: 1rem 1.5rem 1rem 1.5rem; } .articleTitle { @@ -175,8 +255,8 @@ body { margin-top: 0.5rem; } - .articleAuthor { - margin-top: 1rem; + .articleFooter { + padding: 0rem 1.5rem 1.5rem 1.5rem; } } \ No newline at end of file diff --git a/FrontendMentor/article-preview-component/index.html b/FrontendMentor/article-preview-component/index.html index 2c56635..4522199 100644 --- a/FrontendMentor/article-preview-component/index.html +++ b/FrontendMentor/article-preview-component/index.html @@ -7,6 +7,7 @@ + Frontend Mentor | Article preview component @@ -35,7 +36,7 @@ to help you make any room feel complete.

-
+
Author Picture

Michelle Appleton

@@ -43,7 +44,21 @@
- Share Icon +
+

SHARE

+ Facebook Icon + Twitter Icon + Pinterest Icon +
+
diff --git a/FrontendMentor/article-preview-component/js/challenge.js b/FrontendMentor/article-preview-component/js/challenge.js index e69de29..6c2d4fa 100644 --- a/FrontendMentor/article-preview-component/js/challenge.js +++ b/FrontendMentor/article-preview-component/js/challenge.js @@ -0,0 +1,38 @@ +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"); + + if (window.innerWidth <= 500) { + 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; + } + } +} \ No newline at end of file diff --git a/FrontendMentor/article-preview-component/notes/process.md b/FrontendMentor/article-preview-component/notes/process.md index 4aaf135..a525e30 100644 --- a/FrontendMentor/article-preview-component/notes/process.md +++ b/FrontendMentor/article-preview-component/notes/process.md @@ -31,4 +31,18 @@ Still trying to eyeball what I can but I find myself wanting to look (for line a Did use it for the shadow, because I wasn't going to guess that color. Sheesh 🤯 -Picking this up on the 3rd. The mobile version is nearly properly positioned. Its off by a bit (whole component is a little shorter), but everything else is close. (Except still not sorted the thing around the share icon) \ No newline at end of file +Picking this up on the 3rd. The mobile version is nearly properly positioned. Its off by a bit (whole component is a little shorter), but everything else is close. (Except still not sorted the thing around the share icon) + +--- + +Can't figure out how to properly portion to get the desktop image a bit bigger. Playing with flex portions changes too much. Grid better? I want to say the pic is 40% of the size, and body is 60% of the size. + +--- + +Picked up hours later. + +Used this https://cssdeck.com/labs/bv45bh6p for the callout/tooltip + +Don't understand why the img/svg inside the button shifts up when tooltip appears. + +Broke the desktop version while adding the share stuff. Not entirely sure how. \ No newline at end of file