diff --git a/src/index.css b/src/index.css index 01a0b57..bdbbd9c 100644 --- a/src/index.css +++ b/src/index.css @@ -63,24 +63,17 @@ } &__content { - display: block; - padding: 25px; - border-radius: 2px; - box-shadow: 0 0 0 2px #fff; + display: flex; + column-gap: 10px; + padding: 10px; + border-radius: 5px; color: initial !important; text-decoration: none !important; - &::after { - content: ""; - clear: both; - display: table; - } - &--rendered { background: #fff; - border: 1px solid rgba(201, 201, 204, 0.48); - box-shadow: 0 1px 3px rgba(0,0,0, .1); - border-radius: 6px; + border: 1px solid #E9E9E9; + border-radius: 5px; will-change: filter; animation: link-in 450ms 1 cubic-bezier(0.215, 0.61, 0.355, 1); @@ -94,41 +87,42 @@ background-position: center center; background-repeat: no-repeat; background-size: cover; - margin: 0 0 0 30px; - width: 65px; - height: 65px; - border-radius: 3px; - float: right; + min-width: 80px; + height: 80px; + aspect-ratio: 1/1; + border-radius: 5px; + } + + &__infos { + overflow: hidden; + flex: 1; } &__title { - font-size: 17px; + font-size: 15px; font-weight: 600; - line-height: 1.5em; - margin: 0 0 10px 0; - - + ^&__anchor { - margin-top: 25px; - } + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } &__description { - margin: 0 0 20px 0; - font-size: 15px; - line-height: 1.55em; + font-size: 13px; + color: #595959; + line-height: 1.25; + height:2rem; + overflow: hidden; display: -webkit-box; - -webkit-line-clamp: 3; -webkit-box-orient: vertical; - overflow: hidden; + -webkit-line-clamp: 2; } &__anchor { - display: block; - font-size: 15px; - line-height: 1em; - color: #888 !important; - border: 0 !important; - padding: 0 !important; + font-size: 13px; + color: #F44545; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } diff --git a/src/index.js b/src/index.js index 63013ea..4a516dd 100644 --- a/src/index.js +++ b/src/index.js @@ -116,6 +116,7 @@ export default class LinkTool { inputHolder: null, linkContent: null, linkImage: null, + linkInfos: null, linkTitle: null, linkDescription: null, linkText: null, @@ -155,6 +156,7 @@ export default class LinkTool { render() { this.nodes.wrapper = this.make('div', this.CSS.baseClass); this.nodes.container = this.make('div', this.CSS.container); + this.nodes.container = this.make('div', [this.CSS.container, 'not-prose']); this.nodes.inputHolder = this.makeInputHolder(); this.nodes.linkContent = this.prepareLinkPreview(); @@ -239,6 +241,7 @@ export default class LinkTool { linkContent: 'link-tool__content', linkContentRendered: 'link-tool__content--rendered', linkImage: 'link-tool__image', + linkInfos: 'link-tool__infos', linkTitle: 'link-tool__title', linkDescription: 'link-tool__description', linkText: 'link-tool__anchor', @@ -353,6 +356,7 @@ export default class LinkTool { }); this.nodes.linkImage = this.make('div', this.CSS.linkImage); + this.nodes.linkInfos = this.make('div', this.CSS.linkInfos); this.nodes.linkTitle = this.make('div', this.CSS.linkTitle); this.nodes.linkDescription = this.make('p', this.CSS.linkDescription); this.nodes.linkText = this.make('span', this.CSS.linkText); @@ -375,23 +379,20 @@ export default class LinkTool { if (title) { this.nodes.linkTitle.textContent = title; - this.nodes.linkContent.appendChild(this.nodes.linkTitle); + this.nodes.linkInfos.appendChild(this.nodes.linkTitle); } if (description) { this.nodes.linkDescription.textContent = description; - this.nodes.linkContent.appendChild(this.nodes.linkDescription); + this.nodes.linkInfos.appendChild(this.nodes.linkDescription); } + this.nodes.linkText.textContent = this.data.link; + this.nodes.linkInfos.appendChild(this.nodes.linkText); + this.nodes.linkContent.classList.add(this.CSS.linkContentRendered); this.nodes.linkContent.setAttribute('href', this.data.link); - this.nodes.linkContent.appendChild(this.nodes.linkText); - - try { - this.nodes.linkText.textContent = new URL(this.data.link).hostname; - } catch (e) { - this.nodes.linkText.textContent = this.data.link; - } + this.nodes.linkContent.appendChild(this.nodes.linkInfos); } /**