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);