robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added copy link and updated styling

Browse Source
This commit is contained in:
robbond
2024-04-09 15:02:47 +01:00
parent 2e812b546d
commit f2e143ab1f
2 changed files with 57 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/footer.js
+32 -19
View File
@@ -23,15 +23,30 @@ export default function Footer(props) {
));
const [showShareState, setShowShareState] = useState(false);
const [copySuccess, setCopySuccess] = useState("");
let shareState = () => {
showShareState == true
? setShowShareState(false)
? (setShowShareState(false), setCopySuccess(""))
: setShowShareState(true);
};
//console.log(router.asPath);
const shareBodyStr = t("common:service-home-url") + router.asPath;
const copyToClipBoard = async (copyMe) => {
try {
await navigator.clipboard.writeText(copyMe);
setCopySuccess(" - done!");
} catch (err) {
setCopySuccess("Failed to copy!");
}
};
const shareBodyStr =
t("common:service-home-url") +
(router.route == "/case" ||
router.route == "/dnsdetails" ||
router.route == "/myportal/case"
? "/case/" + encodeURIComponent(props.ticketnumber)
: router.asPath);
const shareSubjectStr =
t("common:social-shared-from") +
" " +
@@ -110,7 +125,7 @@ export default function Footer(props) {
shareBodyStr +
"&subject=" +
shareSubjectStr
} //</li>https%3A//gov.wales/&amp;subject=Shared%20from%20gov.wales"
}
className="email"
>
<span className="vo_hidden">
@@ -119,6 +134,19 @@ export default function Footer(props) {
Email
</a>
</li>
<li>
<a
onClick={() => {
copyToClipBoard(shareBodyStr);
}}
className="link"
>
<span className="vo_hidden">
Share this page via{" "}
</span>
Copy Link {copySuccess}
</a>
</li>
</ul>
</div>
<div
@@ -244,21 +272,6 @@ export default function Footer(props) {
)}
</Link>
</li>
{/* <li className="govuk-footer__inline-list-item">
<a
href={t(
"common:footer-alternative-languages-link"
)}
id="aTermsConds"
className="govuk-footer__link"
target="_blank"
rel="noreferrer"
>
{t(
"common:footer-alternative-languages-link-label"
)}
</a>
</li> */}
</ul>
</nav>
<div
styles/sass/welshgov/_application.scss
+25
View File
@@ -1496,6 +1496,31 @@ ul#sharePageLinks.active {
background-repeat: no-repeat;
}
.block-share ul li a.link,
.block-share-top ul li a.link,
.page-header__block-share__list ul li a.link,
.page-header__block-share ul li a.link {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%22Layer_1%22 data-name=%22Layer 1%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2217.9%22 height=%2220%22 viewBox=%220 0 17.9 20%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%233b7dc5;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eshare%3C/title%3E%3Cpath class=%22cls-1%22 d=%22M15.4,14.1a3,3,0,0,0-2,.8L6.2,10.7a1.7,1.7,0,0,0,.1-.7,1.7,1.7,0,0,0-.1-.7l7.1-4.1a3,3,0,0,0,5-2.2,3,3,0,0,0-6,0,1.7,1.7,0,0,0,.1.7l-7,4.1a2.79,2.79,0,0,0-2-.8,3,3,0,1,0,0,6,2.79,2.79,0,0,0,2-.8l7.1,4.2c0,.2-.1.4-.1.7a2.9,2.9,0,0,0,5.8,0,2.84,2.84,0,0,0-2.68-3Z%22 transform=%22translate%28-0.4 0%29%22/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.block-share ul li a.link:hover,
.block-share-top ul li a.link:hover,
.page-header__block-share__list ul li a.link:hover,
.page-header__block-share ul li a.link:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%22Layer_1%22 data-name=%22Layer 1%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2217.9%22 height=%2220%22 viewBox=%220 0 17.9 20%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23111;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eshare%3C/title%3E%3Cpath class=%22cls-1%22 d=%22M15.4,14.1a3,3,0,0,0-2,.8L6.2,10.7a1.7,1.7,0,0,0,.1-.7,1.7,1.7,0,0,0-.1-.7l7.1-4.1a3,3,0,0,0,5-2.2,3,3,0,0,0-6,0,1.7,1.7,0,0,0,.1.7l-7,4.1a2.79,2.79,0,0,0-2-.8,3,3,0,1,0,0,6,2.79,2.79,0,0,0,2-.8l7.1,4.2c0,.2-.1.4-.1.7a2.9,2.9,0,0,0,5.8,0,2.84,2.84,0,0,0-2.68-3Z%22 transform=%22translate%28-0.4 0%29%22/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.block-share ul li a.link:focus,
.block-share-top ul li a.link:focus,
.page-header__block-share__list ul li a.link:focus,
.page-header__block-share ul li a.link:focus {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%22Layer_1%22 data-name=%22Layer 1%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2217.9%22 height=%2220%22 viewBox=%220 0 17.9 20%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23111;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eshare%3C/title%3E%3Cpath class=%22cls-1%22 d=%22M15.4,14.1a3,3,0,0,0-2,.8L6.2,10.7a1.7,1.7,0,0,0,.1-.7,1.7,1.7,0,0,0-.1-.7l7.1-4.1a3,3,0,0,0,5-2.2,3,3,0,0,0-6,0,1.7,1.7,0,0,0,.1.7l-7,4.1a2.79,2.79,0,0,0-2-.8,3,3,0,1,0,0,6,2.79,2.79,0,0,0,2-.8l7.1,4.2c0,.2-.1.4-.1.7a2.9,2.9,0,0,0,5.8,0,2.84,2.84,0,0,0-2.68-3Z%22 transform=%22translate%28-0.4 0%29%22/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
//dropzone
.dropzone {