Sharing working, desktop and mobile are close.
Haven't matched design for sharing.
This commit is contained in:
parent
26ceffebd0
commit
4eab3313a1
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
<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/style.css">
|
||||
<script src="./js/challenge.js"></script>
|
||||
|
||||
<title>Frontend Mentor | Article preview component</title>
|
||||
|
||||
|
|
@ -35,7 +36,7 @@
|
|||
to help you make any room feel complete.
|
||||
</p>
|
||||
</div>
|
||||
<div class="articleAuthor">
|
||||
<div class="articleFooter">
|
||||
<img src="./images/avatar-michelle.jpg" alt="Author Picture" class="authorImage">
|
||||
<div class="nameAndDate">
|
||||
<p class="authorName">Michelle Appleton</p>
|
||||
|
|
@ -43,7 +44,21 @@
|
|||
</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 -->
|
||||
<!-- <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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -32,3 +32,17 @@ 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)
|
||||
|
||||
---
|
||||
|
||||
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.
|
||||
Reference in New Issue