maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a link icon to Mod Center to open article in new tab/window (#20672)

Browse source 
* add link icon to open article in new tab/window

* add label to icon

* add label to icon
This commit is contained in:
Philip How 2024-03-05 20:16:20 +00:00 • committed by GitHub
parent fc6dcf9040
commit 7a873bd14c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/assets/stylesheets/views/mod-center.scss
View file

@ -55,6 +55,15 @@
content: '';
}
.link-icon {
width: var(--su-7);
height: auto;
&:hover {
color: var(--link-branded-color);
}
}
.article-details-container {
cursor: pointer;
display: grid;
@ -65,7 +74,7 @@
padding: var(--su-4);
@media (min-width: $breakpoint-m) {
grid-template-columns: 4fr 2fr 1fr;
grid-template-columns: 0.25fr 4fr 2fr 1fr;
grid-row-gap: 0;
grid-template-rows: 1fr;
}

4
app/javascript/modCenter/singleArticle/index.jsx
View file

@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import { h, Fragment } from 'preact';
import { formatDate } from './util';
import ExternalLinkIcon from '@images/external-link.svg';
export const SingleArticle = ({
id,
@ -41,6 +42,9 @@ export const SingleArticle = ({
>
<summary>
<div className="article-details-container">
<a href={path}>
<ExternalLinkIcon aria-label="Open in new tab" className="link-icon" />
</a>
<span className="article-title">
<header>
<h3 className="fs-base fw-bold lh-tight article-title-heading">