UI update
-- Added fuzzy search functionality
This commit is contained in:
sairaj mote
parent
1ebda6b1a8
commit
d6f74f2a0d
32
css/main.css
32
css/main.css
@ -394,12 +394,15 @@ ul {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.torrent-card .torrent-type-icon {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
.torrent-card__icon {
|
||||
grid-area: icon;
|
||||
}
|
||||
.torrent-card__icon .icon {
|
||||
height: 1.6rem;
|
||||
width: 1.6rem;
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
}
|
||||
.torrent-card__title {
|
||||
grid-area: title;
|
||||
@ -443,6 +446,12 @@ ul {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.torrent-preview__info-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.torrent-type-icon {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
@ -490,23 +499,24 @@ ul {
|
||||
}
|
||||
|
||||
#torrent_uploader {
|
||||
display: inline-flex;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 1.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.7;
|
||||
margin-top: 1rem;
|
||||
width: auto;
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.3rem 0.8rem;
|
||||
align-self: flex-start;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
#torrent_download_button {
|
||||
color: white;
|
||||
margin-top: 2rem;
|
||||
background-color: var(--accent-color);
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 0.7rem;
|
||||
flex-shrink: 0;
|
||||
padding: 0.7rem;
|
||||
margin-top: 2rem;
|
||||
justify-content: center;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
#torrent_download_button .icon {
|
||||
fill: white;
|
||||
@ -519,7 +529,7 @@ ul {
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.popup__header {
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 1.5rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.torrent-card {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -340,11 +340,14 @@ ul{
|
||||
border-radius: 0.3rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
.torrent-type-icon{
|
||||
padding: 0.8rem;
|
||||
}
|
||||
&__icon{
|
||||
grid-area: icon;
|
||||
.icon{
|
||||
height: 1.6rem;
|
||||
width: 1.6rem;
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
}
|
||||
}
|
||||
&__title{
|
||||
@ -388,6 +391,11 @@ ul{
|
||||
.torrent-preview{
|
||||
display: grid;
|
||||
}
|
||||
.torrent-preview__info-section{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.torrent-type-icon{
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
@ -430,22 +438,23 @@ ul{
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
#torrent_uploader{
|
||||
display: inline-flex;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 1.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.7;
|
||||
margin-top: 1rem;
|
||||
width: auto;
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.3rem 0.8rem;
|
||||
align-self: flex-start;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
#torrent_download_button{
|
||||
color: white;
|
||||
margin-top: 2rem;
|
||||
background-color: var(--accent-color);
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 0.7rem;
|
||||
flex-shrink: 0;
|
||||
padding: 0.7rem;
|
||||
margin-top: 2rem;
|
||||
justify-content: center;
|
||||
background-color: var(--accent-color);
|
||||
.icon{
|
||||
fill: white;
|
||||
}
|
||||
@ -456,7 +465,7 @@ ul{
|
||||
}
|
||||
@media only screen and (max-width: 640px) {
|
||||
.popup__header{
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 1.5rem 0 0.5rem;
|
||||
}
|
||||
.torrent-card{
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
20
index.html
20
index.html
@ -32,7 +32,7 @@
|
||||
</header>
|
||||
<section class="torrent-preview">
|
||||
<div id="torrent_type_icon" class="torrent-type-icon"></div>
|
||||
<div>
|
||||
<div class="torrent-preview__info-section">
|
||||
<div id="torrent_tags"></div>
|
||||
<h1 id="torrent_name"></h1>
|
||||
<p id="torrent_description"></p>
|
||||
@ -85,6 +85,7 @@
|
||||
</li>
|
||||
</template>
|
||||
<script src="components.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6"></script>
|
||||
<script>
|
||||
const cryptocoin = "FLO";
|
||||
const mainnet = `https://flosight.duckdns.org/`;
|
||||
@ -738,10 +739,12 @@
|
||||
|
||||
let currentTorrent
|
||||
getRef('torrent_container').addEventListener('click', async e => {
|
||||
console.log(e.target)
|
||||
if(e.target.closest('.torrent-card__download-button')){
|
||||
const _target = e.target.closest('.torrent-card__download-button')
|
||||
const card = _target.closest('.torrent-card')
|
||||
const cardId = parseInt(card.id)
|
||||
const {id, name, description, tags, type = 'misc', size, uploader, startTx, filename, chunks} = await getDataFromIDB(cardId)
|
||||
downloadTorrent(filename, startTx, chunks)
|
||||
}
|
||||
else if(e.target.closest('.torrent-card')){
|
||||
@ -817,6 +820,21 @@
|
||||
allTorrents = allTorrents.reverse().slice(0, 20)
|
||||
getRef('torrent_container').append(renderTorrents(allTorrents))
|
||||
}
|
||||
|
||||
getRef('search_torrent').addEventListener('keyup', async e => {
|
||||
if(e.key === 'Enter'){
|
||||
const torrents = await getDataFromIDB()
|
||||
const searchKey = getRef('search_torrent').value
|
||||
const options = {
|
||||
keys: ['name', 'filename'],
|
||||
threshold: 0.3,
|
||||
}
|
||||
const fuseSearch = new Fuse(torrents, options)
|
||||
let result = fuseSearch.search(searchKey).map(elem => elem.item)
|
||||
getRef('torrent_container').innerHTML = ``
|
||||
getRef('torrent_container').append(renderTorrents(result))
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user