diff --git a/src/css/document-blocked.css b/src/css/document-blocked.css index e0504230a..75fa392f0 100644 --- a/src/css/document-blocked.css +++ b/src/css/document-blocked.css @@ -68,6 +68,14 @@ a { position: relative; z-index: 10; } +#theURL > p > span:first-of-type { + display: block; + max-height: 6lh; + overflow-y: auto; + } +:root.mobile #theURL > p > span:first-of-type { + max-height: 3lh; + } #theURL #toggleParse { background-color: transparent; top: 100%; @@ -132,9 +140,11 @@ body[dir="rtl"] #toggleParse { #urlskip a { display: block; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; + overflow-y: auto; + word-break: break-all; + } +:root.mobile #urlskip a { + max-height: 3lh; } #actionContainer { diff --git a/src/js/document-blocked.js b/src/js/document-blocked.js index 82511436c..0bccb06a2 100644 --- a/src/js/document-blocked.js +++ b/src/js/document-blocked.js @@ -75,7 +75,25 @@ let details = {}; /******************************************************************************/ -dom.text('#theURL > p > span:first-of-type', details.url); +const urlToFragment = raw => { + try { + const fragment = new DocumentFragment(); + const url = new URL(raw); + const hn = url.hostname; + const i = raw.indexOf(hn); + const b = document.createElement('b'); + b.append(hn); + fragment.append(raw.slice(0,i), b, raw.slice(i+hn.length)); + return fragment; + } catch(_) { + } + return raw; +}; + +/******************************************************************************/ + +dom.clear('#theURL > p > span:first-of-type'); +qs$('#theURL > p > span:first-of-type').append(urlToFragment(details.url)); dom.text('#why', details.fs); if ( typeof details.to === 'string' && details.to.length !== 0 ) { @@ -85,7 +103,9 @@ if ( typeof details.to === 'string' && details.to.length !== 0 ) { let pos = text.indexOf(linkPlaceholder); if ( pos !== -1 ) { const link = document.createElement('a'); - link.href = link.textContent = details.to; + link.href = details.to; + dom.cl.add(link, 'code'); + link.append(urlToFragment(details.to)); fragment.append( text.slice(0, pos), link,