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
This commit is contained in:
Robert McGovern 2020-10-04 10:56:44 +01:00
parent faad2f4c1d
commit a3ad3f54d6
8 changed files with 41 additions and 25 deletions

View File

@ -48,11 +48,6 @@ body {
overflow: hidden;
}
/*
* image size is: 660x528
* sketch: 327x200
* currently: 326.25x200.5
*/
.previewImage > img {
width: 100%;
margin:-5% 0 -14.5% 0%;
@ -118,6 +113,7 @@ body {
.articleShareButton {
background-color: var(--lightGrayishBlue);
color: #6E8098;
width: 30px;
height: 30px;
@ -135,11 +131,8 @@ body {
}
.buttonDark {
background-color: var(--veryDarkGrayishBlue);
}
.buttonDark img svg path {
background-color: white;
background-color: var(--desaturatedDarkBlue);
color: var(--lightGrayishBlue);
}
.articleShareButtonTooltip {
@ -193,10 +186,8 @@ body {
font-size: 13px;
}
.attribution { position: absolute; bottom: 0; font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
@media screen and (min-width: 500px) {
@media screen and (min-width: 650px) {
body {
align-content: center;
align-items: center;
@ -206,17 +197,14 @@ body {
flex-direction: row;
width: 50%;
min-width: 600px;
overflow: visible;
}
.previewImage {
width: 100%;
border-radius: var(--cornerRadius) 0 0px var(--cornerRadius);
}
/*
* sketch: 285x280
* at present: 237x269
* 201x290 using it as a background image
*/
.previewImage > img {
margin:0;
height: 105%;
@ -225,12 +213,12 @@ body {
}
.previewBody {
margin-top: 0.5rem;
margin-top: 0.65rem;
margin-left: 0.25rem;
}
.articleSummary {
padding: 1rem 1.5rem 1rem 1.5rem;
padding: 1rem 1.75rem 1rem 1.5rem;
}
.articleTitle {
@ -244,6 +232,9 @@ body {
}
.articleFooter {
padding: 0rem 1.5rem 1.5rem 1.5rem;
padding: 0rem 1.75rem 1.5rem 1.5rem;
}
}
.attribution { position: absolute; bottom: 0; font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }

View File

@ -46,7 +46,8 @@
<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="">
<!-- <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">
<p>SHARE</p>
<img src="./images/icon-facebook.svg" alt="Facebook Icon" class="articleShareIcon">

View File

@ -8,7 +8,7 @@ function toggleTooltip() {
const articleShareTooltip = document.querySelector(".articleShareButtonTooltip");
const articleShareSection = document.querySelector(".articleShareSection");
if (window.innerWidth <= 500) {
if (window.innerWidth <= 650) {
if (isTooltipVisible) {
articleFooter.classList.remove("backgroundDark");
articleShareButton.classList.remove("buttonDark");

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

View File

@ -45,4 +45,28 @@ 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.~~~
~~Broke the desktop version while adding the share stuff. Not entirely sure how.~~
---
Notes before submission.
Had to disable overflow in articlePreview on desktop to show full callout/tooltip. That meant I had to put code previewImage for border-radius.
Don't get why the svg img is pushed upwards when pressing the share button.
Had to change buttonDark to a lighter shade because I couldn't colour the svg. I've since searched on google and found this q/a with a bunch of options
https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css
I have inlined the svg and used fill="currentColor" rather than edit the supplied svg.
So this is where I leave it
![Mobile Final](./mobile-final.jpg)
![Desktop Final](./desktop-final.jpg)
Differences from design
![Mobile Final Difference](./mobile-diff-final.png)
![Desktop Final Difference](./desktop-diff-final.png)