RanchiMall/flotorrent
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI update

Browse Source 
fixed search suggestion highlighting
This commit is contained in:
sairaj mote 2021-06-25 23:14:46 +05:30
parent 0fb36b6334
commit f8c5792763
4 changed files with 33 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/main.css
View File

@ -383,7 +383,7 @@ ul {
} }
.page { .page {
padding-bottom: 2rem; padding-bottom: 3rem;
} }
.page__title { .page__title {
@ -444,7 +444,7 @@ ul {
padding: 0.5rem 0; padding: 0.5rem 0;
} }
a.search-suggestion { .search-suggestion {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
font-weight: 700; font-weight: 700;
@ -453,16 +453,19 @@ a.search-suggestion {
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
outline: none; outline: none;
} }
a.search-suggestion:focus, a.search-suggestion:active { .search-suggestion:focus, .search-suggestion:active {
outline: none; outline: none;
border: 0; border: 0;
} }
a.search-suggestion:focus-visible { .search-suggestion:focus-visible {
outline: transparent; outline: transparent;
background-color: rgba(var(--text-color), 0.1); background-color: rgba(var(--text-color), 0.1);
} }
a.search-suggestion span { .search-suggestion span {
font-weight: 500; font-weight: 450;
}
.search-suggestion pre {
white-space: pre-wrap;
} }
.torrent-container { .torrent-container {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
css/main.scss
View File

@ -329,7 +329,7 @@ ul{
} }
.page{ .page{
padding-bottom: 2rem; padding-bottom: 3rem;
} }
.page__title{ .page__title{
font-size: 2rem; font-size: 2rem;
@ -382,7 +382,7 @@ ul{
padding: 0.5rem 0; padding: 0.5rem 0;
} }
} }
a.search-suggestion{ .search-suggestion{
display: flex; display: flex;
cursor: pointer; cursor: pointer;
font-weight: 700; font-weight: 700;
@ -400,7 +400,10 @@ a.search-suggestion{
background-color: rgba(var(--text-color), 0.1); background-color: rgba(var(--text-color), 0.1);
} }
span{ span{
font-weight: 500; font-weight: 450;
}
pre{
white-space: pre-wrap;
} }
} }

21
index.html
View File

@ -908,7 +908,14 @@
return torrentsFrag return torrentsFrag
} }
async function showLatestTorrents() { async function showLatestTorrents() {
let allTorrents = await getTorrents() // load data from IDB first
let allTorrents = await getDataFromIDB()
allTorrents = allTorrents.reverse().slice(0, 8)
getRef('torrent_container').innerHTML = ``
getRef('torrent_container').append(renderTorrents(allTorrents))
// render latest torrent when available
allTorrents = await getTorrents()
allTorrents = allTorrents.reverse().slice(0, 8) allTorrents = allTorrents.reverse().slice(0, 8)
getRef('torrent_container').innerHTML = `` getRef('torrent_container').innerHTML = ``
getRef('torrent_container').append(renderTorrents(allTorrents)) getRef('torrent_container').append(renderTorrents(allTorrents))
@ -945,8 +952,10 @@
} }
}) })
getRef('search_torrent').addEventListener('input', async e => { getRef('search_torrent').addEventListener('input', async e => {
const searchKey = getRef('search_torrent').value.trim() throttle(() => {
renderSearchSuggestions(searchKey) const searchKey = getRef('search_torrent').value.trim()
renderSearchSuggestions(searchKey)
}, 100)
}) })
getRef('advance_torrent_search').addEventListener('keyup', async e => { getRef('advance_torrent_search').addEventListener('keyup', async e => {
if (e.target.value.trim() !== '' && e.key === 'Enter') { if (e.target.value.trim() !== '' && e.key === 'Enter') {
@ -1046,6 +1055,7 @@
break; break;
default: default:
page = 'homepage' page = 'homepage'
history.replaceState(null, null, ' ')
showLatestTorrents() showLatestTorrents()
} }
document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely') document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely')
@ -1153,8 +1163,11 @@
const regEx = new RegExp(`(${searchKey})`, 'gi') const regEx = new RegExp(`(${searchKey})`, 'gi')
const suggestion = create('a', { const suggestion = create('a', {
className: 'search-suggestion', className: 'search-suggestion',
innerHTML: elem.name.replace(regEx, `<span>${searchKey}</span>`),
}) })
const pre = create('pre', {
innerHTML: elem.name.replace(regEx, `<span>$&</span>`),
})
suggestion.append(pre)
suggestion.href = `?id=${elem.id}#torrent` suggestion.href = `?id=${elem.id}#torrent`
suggestionsFrag.append(suggestion) suggestionsFrag.append(suggestion)
}) })