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

Search result only shows title & thumbnail, more info on hover.

Browse Source 
Clicking search result thumbnail (overlay) installs it. So does clicking "install" button.
Fixed author link installing the sytle.
Removed bg-color change on hover.
This commit is contained in:
derv82 2017-12-07 00:06:12 -08:00
parent 5db0cc65ee
commit 34ab1abd11
3 changed files with 73 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
popup.html
View File

@ -85,8 +85,20 @@
<template data-id="searchResult">
<div class="search-result">
<h3 class="search-result-title"></h3>
<a class="search-result-title"></a>
<div class="search-result-info">
<img class="search-result-screenshot" />
<div class="search-result-overlay">
<div class="actions">
<button class="search-result-install" i18n-text="installButton"></button>
<button class="search-result-customize hidden"
i18n-text="searchResultCustomize"
i18n-title="searchResultCustomizeTooltip"></button>
</div>
<div class="search-result-author">
<label i18n-text="author"></label>:
<a class="search-result-author-link" target="_blank"></a>
</div>
<div class="search-result-description-group">
<div class="search-result-description"></div>
<div class="search-result-description-info">
@ -95,10 +107,6 @@
</svg>
</div>
</div>
<div class="search-result-author">
<label i18n-text="author"></label>:
<a class="search-result-author-link" target="_blank"></a>
</div>
<div class="search-result-meta">
<div class="search-result-meta-rating">
<span i18n-text="searchResultRating"></span>:
@ -109,11 +117,7 @@
<span class="search-result-install-count"></span>
</div>
</div>
<div class="actions">
<button class="search-result-install" i18n-text="installButton"></button>
<button class="search-result-customize hidden"
i18n-text="searchResultCustomize"
i18n-title="searchResultCustomizeTooltip"></button>
</div>
</div>
</div>
</template>

38
popup/search-results.css
View File

@ -24,19 +24,43 @@ body.search-results-shown {
.search-result {
padding: 5px;
}
.search-result:hover {
background-color: rgba(50, 150, 255, 0.5);
}
.search-result-screenshot {
max-height: 120px;
height: 140px;
width: 100%;
object-fit: cover;
}
.search-result-title {
padding: 3px;
margin: 0;
font-size: 1.2em;
font-weight: 600;
}
.search-result-info {
position: relative;
}
.search-result-overlay {
width: 100%;
height: 140px;
position: absolute;
top: 0;
opacity: 0;
background-color: rgba(255, 255, 255, 0.6);
transition: opacity linear 0.2s;
}
.search-result-info:hover .search-result-overlay {
opacity: 1;
}
.search-result-overlay > .actions {
margin-top: 10px;
margin-bottom: 10px;
}
.search-result-overlay > :not(.actions) {
margin: 0 10px 0 10px;
}
.search-result-author-link {
@ -53,8 +77,10 @@ body.search-results-shown {
.search-result-description.expanded {
width: 100%;
max-height: 100%;
white-space: pre-wrap;
overflow: auto;
overflow-x: auto;
overflow-y: hidden;
text-overflow: unset;
display: block;
}

12
popup/search-results.js
View File

@ -292,13 +292,14 @@
id: 'search-result-' + userstyleSearchResult.id,
onclick: handleEvent.openURLandHide
});
entry.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url;
$('#search-results-list').appendChild(entry);
const searchResultName = userstyleSearchResult.name;
const title = $('.search-result-title', entry);
Object.assign(title, {
textContent: searchResultName
textContent: searchResultName,
onclick: handleEvent.openURLandHide,
href: searchAPI.BASE_URL + userstyleSearchResult.url
});
const screenshot = $('.search-result-screenshot', entry);
@ -314,6 +315,8 @@
title: searchResultName
});
$('.search-result-overlay', entry).onclick = install;
const description = $('.search-result-description', entry);
Object.assign(description, {
textContent: userstyleSearchResult.description.replace(/<.*?>/g, '').replace(/(\r\n?)\r\n?/g, '$1')
@ -332,7 +335,10 @@
textContent: userstyleSearchResult.user.name,
title: userstyleSearchResult.user.name,
href: searchAPI.BASE_URL + '/users/' + userstyleSearchResult.user.id,
onclick: handleEvent.openURLandHide
onclick: event => {
event.stopPropagation();
handleEvent.openURLandHide.call(authorLink, event);
}
});
const rating = $('.search-result-rating', entry);