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

UI update

Browse Source
This commit is contained in:
sairaj mote 2021-06-26 16:23:03 +05:30
parent 235a92b1e8
commit 1356acbe3e
5 changed files with 58 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components.js
View File

@ -1640,16 +1640,16 @@ stripSelect.innerHTML = `
.cover{
position: absolute;
z-index: 1;
width: 4rem;
width: 5rem;
height: 100%;
pointer-events: none;
}
.cover--left{
background: linear-gradient(90deg, var(--background-color), transparent);
background: linear-gradient(90deg, var(--background-color) 60%, transparent);
}
.cover--right{
right: 0;
background: linear-gradient(90deg, transparent, var(--background-color));
background: linear-gradient(90deg, transparent 0%, var(--background-color) 40%);
}
.nav-button--right::before{
background-color: red;

18
css/main.css
View File

@ -403,6 +403,24 @@ ul {
width: 3rem;
}
.app-icon-loader {
fill: none;
stroke-width: 2;
justify-self: center;
stroke-dasharray: 202;
margin: 2rem 0;
stroke: rgba(var(--text-color), 1);
animation: stroke-anim 2s infinite alternate;
}
@keyframes stroke-anim {
0% {
stroke-dashoffset: 202;
}
100% {
stroke-dashoffset: 0;
}
}
.app-name {
font-weight: 500;
margin-bottom: 1rem;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

18
css/main.scss
View File

@ -346,6 +346,24 @@ ul{
height: 3rem;
width: 3rem;
}
.app-icon-loader{
fill: none;
stroke-width: 2;
justify-self: center;
stroke-dasharray: 202;
margin: 2rem 0;
stroke: rgba(var(--text-color), 1);
animation: stroke-anim 2s infinite alternate;
}
@keyframes stroke-anim {
0%{
stroke-dashoffset: 202;
}
100%{
stroke-dashoffset: 0;
}
}
.app-name{
font-weight: 500;
margin-bottom: 1rem;

30
index.html
View File

@ -82,7 +82,14 @@
Browse
</a>
</div>
<section id="torrent_container" class="torrent-container"></section>
<section id="torrent_container" class="torrent-container">
<svg class="app-icon icon app-icon-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M54.69,14.28l8.83-8.83a1.62,1.62,0,0,0-1.14-2.77H21.15A1.63,1.63,0,0,0,19.53,4.3V59.7a1.62,1.62,0,0,0,2.78,1.13l8.83-9a1.62,1.62,0,0,0,.46-1.14V38.06a1.58,1.58,0,0,1,.48-1.14l8.81-8.83a1.62,1.62,0,0,0-1.15-2.77H33.22A1.62,1.62,0,0,1,31.6,23.7V16.37a1.63,1.63,0,0,1,1.62-1.62H53.55A1.63,1.63,0,0,0,54.69,14.28Z" />
<path
d="M1.62,14.75H12.36A1.62,1.62,0,0,0,14,13.13V4.3a1.63,1.63,0,0,0-1.62-1.62H7.47a1.6,1.6,0,0,0-1.35.73L.27,12.24A1.62,1.62,0,0,0,1.62,14.75Z" />
</svg>
</section>
</section>
</section>
<section id="torrent" class="page hide-completely page-layout">
@ -896,18 +903,17 @@
})
return torrentsFrag
}
async function showLatestTorrents() {
// 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))
function showLatestTorrents() {
// render latest torrent when available
allTorrents = await getTorrents()
allTorrents = allTorrents.reverse().slice(0, 8)
getRef('torrent_container').innerHTML = ``
getRef('torrent_container').append(renderTorrents(allTorrents))
getTorrents().then(allTorrents => {
allTorrents = allTorrents.reverse().slice(0, 8)
getRef('torrent_container').innerHTML = ``
getRef('torrent_container').append(renderTorrents(allTorrents))
})
.catch(err => {
console.log(err)
})
}
function getSearchParams() {