open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Popup doesn't overflow-x anymore. Formatting seems... okay.

Browse Source
This commit is contained in:
derv82 2017-11-18 13:45:32 -08:00
parent f35271f6de
commit f1830c3768
4 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
popup.html
View File

@ -132,13 +132,13 @@
<h3>Search Results for <span id="searchResults-terms">-</span></h3> <h3>Search Results for <span id="searchResults-terms">-</span></h3>
<div id="searchResults"></div> <div id="searchResults"></div>
<div id="searchResultsNav"> <div id="searchResultsNav">
<button id="searchResultsNav-prev" title="Previous page" disabled>&lt;</button> <button id="searchResultsNav-prev" title="Previous page" disabled>Prev</button>
<label> <label>
<span id="searchResultsNav-currentPage" title="Current page">-</span> <span id="searchResultsNav-currentPage" title="Current page">-</span>
/ /
<span id="searchResultsNav-totalPages" title="Total pages of search results">-</span> <span id="searchResultsNav-totalPages" title="Total pages of search results">-</span>
</label> </label>
<button id="searchResultsNav-next" title="Next page" disabled>&gt;</button> <button id="searchResultsNav-next" title="Next page" disabled>Next</button>
</div> </div>
</div> </div>
<div class="left-gutter"></div> <div class="left-gutter"></div>

2
popup/popup.css
View File

@ -1,5 +1,7 @@
html, body { html, body {
height: min-content; height: min-content;
overflow-y: auto;
overflow-x: hidden;
} }
body { body {

15
popup/remoteStyles.css
View File

@ -21,11 +21,13 @@
} }
.searchResult img { .searchResult img {
width: 50px; display: block;
height: 40px; max-width: 180px;
max-height: 180px;
} }
.searchResult-title { .searchResult-title {
display: block;
font-weight: bold; font-weight: bold;
} }
@ -35,25 +37,24 @@
} }
.searchResult > * { .searchResult > * {
max-width: 108px; overflow-x: hidden;
overflow-x: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
#searchResultsNav { #searchResultsNav {
display: flex;
flex-direction: row; flex-direction: row;
text-align: center; text-align: center;
word-break: keep-all;
} }
#searchResultsNav label { #searchResultsNav label {
width: 20px; width: 40px;
display: inline-block; display: inline-block;
word-break: keep-all;
} }
#searchResultsNav button { #searchResultsNav button {
text-align: center; text-align: center;
width: 10px;
} }
#searchResultsNav-prev[disabled], #searchResultsNav-prev[disabled],

12
popup/remoteStyles.js
View File

@ -16,7 +16,6 @@ function fetchSearchResults(queryParams) {
'Accept': '*/*' 'Accept': '*/*'
}; };
const url = 'https://userstyles.org/api/v1/styles/search?' + queryParams; const url = 'https://userstyles.org/api/v1/styles/search?' + queryParams;
console.log('fetchSearchResults url:', url);
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.timeout = TIMEOUT; xhr.timeout = TIMEOUT;
xhr.onload = () => (xhr.status === 200 || url.protocol === 'file:' 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) { function createSearchResultElement(searchResult) {
/* /*
searchResult format: searchResult format:
@ -45,14 +48,11 @@ function createSearchResultElement(searchResult) {
} }
} }
*/ */
console.log('createSearchResultElement searchResult:', searchResult);
const entry = template.searchResult.cloneNode(true); const entry = template.searchResult.cloneNode(true);
Object.assign(entry, { Object.assign(entry, {
id: ENTRY_ID_PREFIX_RAW + searchResult.id, id: ENTRY_ID_PREFIX_RAW + searchResult.id,
styleId: searchResult.id styleId: searchResult.id
}); });
console.log('createSearchResultElement entry:', entry);
const title = $('.searchResult-title', entry); const title = $('.searchResult-title', entry);
Object.assign(title, { Object.assign(title, {
@ -69,14 +69,14 @@ function createSearchResultElement(searchResult) {
} }
Object.assign(screenshot, { Object.assign(screenshot, {
src: ss_url, src: ss_url,
title: 'Screenshot of ' + searchResult.name title: searchResult.name
}); });
// TODO: Expand/collapse description // TODO: Expand/collapse description
const description = $('.searchResult-description', entry); const description = $('.searchResult-description', entry);
Object.assign(description, { Object.assign(description, {
textContent: searchResult.description.replace(/<.*?>/g, ""), textContent: searchResult.description.replace(/<.*?>/g, ""),
title: searchResult.description.replace(/<.*?>/g, ""), title: searchResult.description.replace(/<.*?>/g, "")
}); });
const authorLink = $('.searchResult-authorLink', entry); const authorLink = $('.searchResult-authorLink', entry);