tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix for html issue and making the share button move.

This commit is contained in:
Robert McGovern 2020-10-04 12:04:01 +01:00
parent a3ad3f54d6
commit 78e4202963
3 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
FrontendMentor/article-preview-component/css/style.css
View File

@ -86,6 +86,8 @@ body {
padding: 1rem 1.5rem 1rem 1.5rem;
transition: 250ms ease-in-out;
position: relative;
}
.authorImage {
@ -137,7 +139,7 @@ body {
.articleShareButtonTooltip {
display: none;
position: relative;
position: absolute;
justify-content: space-between;
align-items: center;
@ -148,10 +150,9 @@ body {
width: 170px;
padding: 0.75rem 1rem;
bottom: 80px;
left: -104px;
top: -60px;
right: -47px;
overflow: visible;
}
.articleShareButtonTooltip::before {
@ -234,6 +235,7 @@ body {
.articleFooter {
padding: 0rem 1.75rem 1.5rem 1.5rem;
}
}
.attribution { position: absolute; bottom: 0; font-size: 11px; text-align: center; }

4
FrontendMentor/article-preview-component/index.html
View File

@ -48,13 +48,13 @@
<button class="articleShareButton" onclick="toggleTooltip()" >
<!-- <img src="./images/icon-share.svg" alt="Share Icon" class=""> -->
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13"><path fill="currentColor" d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"/></svg>
<div class="articleShareButtonTooltip">
</button>
<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>

16
FrontendMentor/article-preview-component/notes/process.md
View File

@ -70,3 +70,19 @@ Differences from design
![Mobile Final Difference](./mobile-diff-final.png)
![Desktop Final Difference](./desktop-diff-final.png)
---
On subnmission there was an HTML issue:
```
Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
Context:
<div class=`articleShareButtonTooltip`>
```
Fixed it. Moved the div outside of the button. Then set `position:relative;` on `articleFooter`, and `position: absolute;` on `.articleShareButtonTooltip`
Last thing, how to I "fake click the tooltip off the screen' when passing the media query breakpoint?