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

Fixing over-styling in search-results.css

Browse Source 
* Right-padding to account for scrollbar when showing search results.
* No 'max-width' anymore -- width adjusts to popup width.
* Description uses ellilpsis on overflow.
  * Still needs info/expando (and need to remove title-text)
* Screenshots have 'object-fit:cover' to fill the space.

Unrelated: Hack for search category 'userstyles' (should be userstyles.org)
This commit is contained in:
derv82 2017-12-04 00:30:06 -08:00
parent 58f003392a
commit 4919cf0817
2 changed files with 29 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
popup/search-results.css
View File

@ -1,6 +1,7 @@
body.search-results-shown {
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
#disable-all-wrapper {
@ -8,11 +9,6 @@ body.search-results-shown {
margin-bottom: 5px;
}
#searchResults,
#find-styles {
display: block;
}
.hidden {
display: none !important;
}
@ -25,11 +21,6 @@ body.search-results-shown {
margin-right: 20px;
}
#searchResults, #searchResults-list {
max-width: 200px;
overflow: hidden;
}
.searchResult {
padding: 5px;
}
@ -37,17 +28,14 @@ body.search-results-shown {
background-color: rgba(50, 150, 255, 0.5);
}
.searchResult.loading {
background-color: rgba(90, 90, 90, 0.5);
opacity: 0.5;
}
.searchResult img {
display: block;
max-width: 180px;
max-height: 180px;
}
.searchResult-screenshot.no-screenshot {
width: 180px;
height: 40px;
.searchResult-screenshot {
max-height: 120px;
width: 100%;
object-fit: cover;
}
.searchResult-title {
@ -56,13 +44,9 @@ body.search-results-shown {
}
.searchResult-description {
overflow: hidden;
font-style: italic;
}
.searchResult > * {
overflow-x: hidden;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.searchResult-author {
@ -76,6 +60,7 @@ body.search-results-shown {
.searchResult-metaRating, .searchResult-metaInstallCount {
display: table-cell;
text-align: center;
}
.searchResult-rating {
@ -96,6 +81,10 @@ body.search-results-shown {
background-color: #333;
}
.searchResult-installCount {
font-weight: 600;
}
.searchResult-install {
width: 100%;
}
@ -122,9 +111,3 @@ body.search-results-shown {
#searchResultsNav button {
text-align: center;
}
#searchResultsNav-prev[disabled],
#searchResultsNav-next[disabled] {
cursor: not-allowed;
background-image: linear-gradient(rgba(90, 90, 90, 0.5), rgba(90, 90, 90, 0.5));
}

25
popup/search-results.js
View File

@ -14,12 +14,8 @@
$('#find-styles-inline').checked = false;
const searchResults = searchResultsController();
$('#searchResultsNav-prev').onclick = searchResults.prev;
$('#searchResultsNav-next').onclick = searchResults.next;
searchResults.init();
searchResults.load();
document.body.classList.add('search-results-shown');
window.scrollTo(0, 0);
// Avoid propagating click to anchor/href
event.preventDefault();
@ -43,13 +39,21 @@
const unprocessedResults = []; // Search results not yet processed.
const processedResults = []; // Search results that are not installed and apply ot the page (includes 'json' field with full style).
const BLANK_PIXEL_DATA = 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAA' +
'C1HAwCAAAAC0lEQVR42mOcXQ8AAbsBHLLDr5MAAAAASUVORK5CYII=';
'C1HAwCAAAAC0lEQVR42mOcXQ8AAbsBHLLDr5MAAAAASUVORK5CYII=';
let loading = false;
let tabURL; // The active tab's URL.
let category; // Category for the active tab's URL.
let currentDisplayedPage = 1; // Current page number in popup.html
return {load, next, prev};
return {init, load, next, prev};
function init() {
$('#searchResultsNav-prev').onclick = prev;
$('#searchResultsNav-next').onclick = next;
document.body.classList.add('search-results-shown');
window.scrollTo(0, 0);
load();
}
function render() {
$('#searchResults-list').textContent = ''; // Clear search results
@ -440,8 +444,11 @@ function searchUserstyles() {
return 'STYLUS'; // Stylus page
} else {
// Website address, strip TLD & subdomain
const domainRegex = /^www\.|(\.com?)?\.\w+$/g;
return u.hostname.replace(domainRegex, '').split('.').pop();
let domain = u.hostname.replace(/^www\.|(\.com?)?\.\w+$/g, '').split('.').pop();
if (domain === 'userstyles') {
domain = 'userstyles.org';
}
return domain;
}
}