diff --git a/popup.html b/popup.html index 756c127c..36bb84ca 100644 --- a/popup.html +++ b/popup.html @@ -132,13 +132,13 @@

Search Results for -

- + - +
diff --git a/popup/popup.css b/popup/popup.css index 21482997..1b1b9a39 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -1,5 +1,7 @@ html, body { height: min-content; + overflow-y: auto; + overflow-x: hidden; } body { diff --git a/popup/remoteStyles.css b/popup/remoteStyles.css index c94be8aa..a94d8531 100755 --- a/popup/remoteStyles.css +++ b/popup/remoteStyles.css @@ -21,11 +21,13 @@ } .searchResult img { - width: 50px; - height: 40px; + display: block; + max-width: 180px; + max-height: 180px; } .searchResult-title { + display: block; font-weight: bold; } @@ -35,25 +37,24 @@ } .searchResult > * { - max-width: 108px; - overflow-x: ellipsis; + overflow-x: hidden; white-space: nowrap; } #searchResultsNav { - display: flex; flex-direction: row; text-align: center; + word-break: keep-all; } #searchResultsNav label { - width: 20px; + width: 40px; display: inline-block; + word-break: keep-all; } #searchResultsNav button { text-align: center; - width: 10px; } #searchResultsNav-prev[disabled], diff --git a/popup/remoteStyles.js b/popup/remoteStyles.js index cc9b4eb3..24145e4c 100755 --- a/popup/remoteStyles.js +++ b/popup/remoteStyles.js @@ -16,7 +16,6 @@ function fetchSearchResults(queryParams) { 'Accept': '*/*' }; const url = 'https://userstyles.org/api/v1/styles/search?' + queryParams; - console.log('fetchSearchResults url:', url); const xhr = new XMLHttpRequest(); xhr.timeout = TIMEOUT; xhr.onload = () => (xhr.status === 200 || url.protocol === 'file:' @@ -31,6 +30,10 @@ function fetchSearchResults(queryParams) { }); } +/** + * + * @param {Object} searchResult The JSON object from userstyles.org representing a search result. + */ function createSearchResultElement(searchResult) { /* searchResult format: @@ -45,14 +48,11 @@ function createSearchResultElement(searchResult) { } } */ - console.log('createSearchResultElement searchResult:', searchResult); - const entry = template.searchResult.cloneNode(true); Object.assign(entry, { id: ENTRY_ID_PREFIX_RAW + searchResult.id, styleId: searchResult.id }); - console.log('createSearchResultElement entry:', entry); const title = $('.searchResult-title', entry); Object.assign(title, { @@ -69,14 +69,14 @@ function createSearchResultElement(searchResult) { } Object.assign(screenshot, { src: ss_url, - title: 'Screenshot of ' + searchResult.name + title: searchResult.name }); // TODO: Expand/collapse description const description = $('.searchResult-description', entry); Object.assign(description, { textContent: searchResult.description.replace(/<.*?>/g, ""), - title: searchResult.description.replace(/<.*?>/g, ""), + title: searchResult.description.replace(/<.*?>/g, "") }); const authorLink = $('.searchResult-authorLink', entry);