Sharing working, desktop and mobile are close.

Haven't matched design for sharing.
This commit is contained in:
Robert McGovern 2020-10-04 00:34:27 +01:00
parent 26ceffebd0
commit 4eab3313a1
4 changed files with 164 additions and 17 deletions

View File

@ -39,6 +39,7 @@ body {
flex-direction: column; flex-direction: column;
border-radius: var(--cornerRadius); border-radius: var(--cornerRadius);
overflow: hidden;
background-color: white; background-color: white;
width: 87%; width: 87%;
margin: 0 auto; margin: 0 auto;
@ -49,7 +50,6 @@ body {
.previewImage { .previewImage {
flex: 1 45%; flex: 1 45%;
overflow: hidden; overflow: hidden;
border-radius: var(--cornerRadius) var(--cornerRadius) 0 0;
} }
/* /*
@ -65,10 +65,10 @@ body {
.previewBody { .previewBody {
flex: 1 60%; flex: 1 60%;
margin-top: 0.85rem; margin-top: 0.85rem;
padding: 1rem 1.75rem 1rem 1.5rem;
} }
.articleSummary { .articleSummary {
padding: 1rem 1.75rem 1rem 1.5rem;
} }
.articleTitle { .articleTitle {
@ -88,11 +88,14 @@ body {
line-height: 20px; line-height: 20px;
} }
.articleAuthor { .articleFooter {
margin-top: 1.5rem; /* margin-top: 1.5rem; */
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
padding: 1rem 1.5rem 1rem 1.5rem;
transition: 250ms ease-in-out;
} }
.authorImage { .authorImage {
@ -118,16 +121,90 @@ body {
font-weight: 500; font-weight: 500;
} }
.articleShareIcon { .articleShareButton {
width: 20px;
height: 20px;
background-color: var(--lightGrayishBlue); background-color: var(--lightGrayishBlue);
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
cursor: pointer;
margin-left: auto; margin-left: auto;
margin-top: auto; margin-top: auto;
margin-bottom: 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 { .attribution {
} }
@ -144,7 +221,7 @@ body {
.previewImage { .previewImage {
width: 100%; width: 100%;
border-radius: var(--cornerRadius) 0 0 var(--cornerRadius); /* border-radius: var(--cornerRadius) 0 0 var(--cornerRadius); */
} }
/* /*
@ -161,8 +238,11 @@ body {
.previewBody { .previewBody {
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 1.2rem 2.3rem 1.6rem 0rem; margin-left: 0.25rem;
margin-left: 2.45rem; }
.articleSummary {
padding: 1rem 1.5rem 1rem 1.5rem;
} }
.articleTitle { .articleTitle {
@ -175,8 +255,8 @@ body {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.articleAuthor { .articleFooter {
margin-top: 1rem; padding: 0rem 1.5rem 1.5rem 1.5rem;
} }
} }

View File

@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<script src="./js/challenge.js"></script>
<title>Frontend Mentor | Article preview component</title> <title>Frontend Mentor | Article preview component</title>
@ -35,7 +36,7 @@
to help you make any room feel complete. to help you make any room feel complete.
</p> </p>
</div> </div>
<div class="articleAuthor"> <div class="articleFooter">
<img src="./images/avatar-michelle.jpg" alt="Author Picture" class="authorImage"> <img src="./images/avatar-michelle.jpg" alt="Author Picture" class="authorImage">
<div class="nameAndDate"> <div class="nameAndDate">
<p class="authorName">Michelle Appleton</p> <p class="authorName">Michelle Appleton</p>
@ -43,7 +44,21 @@
</div> </div>
<!-- look up what to do with this. I know I've seen it. What it there for screenreader, but off the side of the screen --> <!-- look up what to do with this. I know I've seen it. What it there for screenreader, but off the side of the screen -->
<!-- <section>Share</section> --> <!-- <section>Share</section> -->
<img src="./images/icon-share.svg" alt="Share Icon" class="articleShareIcon"> <div class="articleShareSection">
<p>SHARE</p>
<img src="./images/icon-facebook.svg" alt="Facebook Icon" class="articleShareIcon">
<img src="./images/icon-twitter.svg" alt="Twitter Icon" class="articleShareIcon">
<img src="./images/icon-pinterest.svg" alt="Pinterest Icon" class="articleShareIcon">
</div>
<button class="articleShareButton" onclick="toggleTooltip()" >
<img src="./images/icon-share.svg" alt="Share Icon" class="">
<div class="articleShareButtonTooltip">
<p>SHARE</p>
<img src="./images/icon-facebook.svg" alt="Facebook Icon" class="articleShareIcon">
<img src="./images/icon-twitter.svg" alt="Twitter Icon" class="articleShareIcon">
<img src="./images/icon-pinterest.svg" alt="Pinterest Icon" class="articleShareIcon">
</div>
</button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -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;
}
}
}

View File

@ -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 🤯 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) 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.