front: add an external link icon to external links
This commit is contained in:
parent
428990dc00
commit
e9db1f4ded
@ -155,7 +155,7 @@ h1 {
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
.icon.feather-external-link { //todo add js
|
||||
.icon.lucide-external-link { //todo add js
|
||||
--icon-size: 16px;
|
||||
margin-left: 4px;
|
||||
margin-top: -3px;
|
||||
|
32
src/assets/views/scripts/ExternalLinkIcons.svelte
Normal file
32
src/assets/views/scripts/ExternalLinkIcons.svelte
Normal file
@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte";
|
||||
import Icon from "../utils/Icon.svelte";
|
||||
|
||||
let iconTemplate: HTMLTemplateElement;
|
||||
|
||||
function addExternalLinkIcons(): void {
|
||||
console.log('Add icons to external links...');
|
||||
|
||||
const iconElement = iconTemplate.childNodes.item(0);
|
||||
|
||||
document.querySelectorAll('a[target="_blank"]').forEach(el => {
|
||||
if (!el.classList.contains('no-icon')) {
|
||||
el.appendChild(iconElement.cloneNode(true));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
addExternalLinkIcons();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div bind:this={iconTemplate}>
|
||||
<Icon name="external-link"/>
|
||||
</div>
|
@ -2,6 +2,7 @@
|
||||
import FlashMessages from "../components/FlashMessages.svelte";
|
||||
import BaseFooter from "./base/BaseFooter.svelte";
|
||||
import BaseHeader from "./base/BaseHeader.svelte";
|
||||
import CommonScripts from "./CommonScripts.svelte";
|
||||
|
||||
export let title: string;
|
||||
export let h1: string = title;
|
||||
@ -9,6 +10,8 @@
|
||||
export let refresh_after: number | undefined = undefined;
|
||||
</script>
|
||||
|
||||
<CommonScripts/>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../scss/vars";
|
||||
@import "../../scss/helpers";
|
||||
|
5
src/assets/views/templates/CommonScripts.svelte
Normal file
5
src/assets/views/templates/CommonScripts.svelte
Normal file
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import ExternalLinkIcons from "../scripts/ExternalLinkIcons.svelte";
|
||||
</script>
|
||||
|
||||
<ExternalLinkIcons/>
|
@ -2,6 +2,7 @@
|
||||
import {locals} from "../../ts/stores.js";
|
||||
import FlashMessages from "../components/FlashMessages.svelte";
|
||||
import Icon from "../utils/Icon.svelte";
|
||||
import CommonScripts from "./CommonScripts.svelte";
|
||||
|
||||
const previousUrl = $locals.getPreviousUrl();
|
||||
|
||||
@ -15,6 +16,8 @@
|
||||
instructions = $locals.error_instructions || instructions;
|
||||
</script>
|
||||
|
||||
<CommonScripts/>
|
||||
|
||||
<svelte:head>
|
||||
<title>{code + ' - ' + message}</title>
|
||||
|
||||
|
@ -23,7 +23,7 @@
|
||||
</h2>
|
||||
<p>Paragraph</p>
|
||||
|
||||
<p>Paragraph, <a href={route('home')}>Link</a></p>
|
||||
<p>Paragraph, <a href={route('home')}>Link</a>, <a href={route('home')} target="_blank">External link</a></p>
|
||||
|
||||
<ul>
|
||||
<li>Unordered</li>
|
||||
|
Loading…
Reference in New Issue
Block a user