UI update
This commit is contained in:
sairaj mote
parent
2876f0e8f7
commit
7c36d2e043
@ -197,7 +197,9 @@ border: none;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
--width: 100%;
|
||||
--font-size: 1rem;
|
||||
--icon-gap: 0.5rem;
|
||||
--border-radius: 0.3rem;
|
||||
--padding: 0.7rem 1rem;
|
||||
--background: rgba(var(--text-color), 0.06);
|
||||
@ -232,7 +234,7 @@ border: none;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
gap: 0.5rem;
|
||||
gap: var(--icon-gap);
|
||||
padding: var(--padding);
|
||||
border-radius: var(--border-radius);
|
||||
-webkit-transition: opacity 0.3s;
|
||||
@ -282,7 +284,7 @@ border: none;
|
||||
}
|
||||
.outer-container{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
width: var(--width);
|
||||
}
|
||||
.container{
|
||||
width: 100%;
|
||||
|
||||
13
css/main.css
13
css/main.css
@ -138,7 +138,7 @@ sm-textarea {
|
||||
}
|
||||
|
||||
sm-button {
|
||||
--border-radius: 0.2rem;
|
||||
--border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -366,7 +366,14 @@ ul {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 3rem 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#search_torrent {
|
||||
width: min(22rem, 100%);
|
||||
}
|
||||
#search_torrent .icon {
|
||||
height: 1.2rem;
|
||||
fill: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
|
||||
#torrent_container {
|
||||
@ -383,6 +390,7 @@ ul {
|
||||
cursor: pointer;
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.torrent-card__icon {
|
||||
@ -436,6 +444,7 @@ ul {
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
.torrent-card__download-button .icon {
|
||||
height: 1.4rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -121,7 +121,7 @@ sm-textarea{
|
||||
--background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
sm-button{
|
||||
--border-radius: 0.2rem;
|
||||
--border-radius: 0.3rem;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
@ -313,7 +313,13 @@ ul{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 3rem 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
#search_torrent{
|
||||
width: min(22rem, 100%);
|
||||
.icon{
|
||||
height: 1.2rem;
|
||||
fill: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
#torrent_container{
|
||||
@ -329,6 +335,7 @@ ul{
|
||||
cursor: pointer;
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
&__icon{
|
||||
grid-area: icon;
|
||||
@ -380,6 +387,7 @@ ul{
|
||||
justify-content: center;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
.icon{
|
||||
height: 1.4rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
22
index.html
22
index.html
@ -60,14 +60,14 @@
|
||||
<p>Powered by FLO blockchain</p>
|
||||
</footer>
|
||||
<template id="torrent_card_template">
|
||||
<li class="torrent-card">
|
||||
<li class="torrent-card interact">
|
||||
<div class="torrent-card__icon"></div>
|
||||
<h3 class="torrent-card__title"></h3>
|
||||
<span class="torrent-card__tags"></span>
|
||||
<!-- <p class="torrent-card__description"></p> -->
|
||||
<!-- <h5 class="torrent-card__size">1.2GB</h5> -->
|
||||
<button class="torrent-card__download-button">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 20.981a6.5 6.5 0 0 1-2.936-12 8.001 8.001 0 0 1 15.872 0 6.5 6.5 0 0 1-2.936 12V21H7v-.019zM13 12V8h-2v4H8l4 5 4-5h-3z"/></svg>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 2l5 5v14.008a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 21.008V2.992C3 2.444 3.445 2 3.993 2H16zm-3 10V8h-2v4H8l4 4 4-4h-3z"/></svg>
|
||||
Download
|
||||
</button>
|
||||
</li>
|
||||
@ -382,9 +382,10 @@
|
||||
}
|
||||
|
||||
function getTorrentMetafromAPI(txid, i, N) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getResponce(`/api/tx/${txid}`).then(response => {
|
||||
var floData = JSON.parse(JSON.parse(response).floData);
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
let response = await getResponce(`/api/tx/${txid}`)
|
||||
var floData = JSON.parse(response.floData);
|
||||
var percent = Math.round((i / N) * 100);
|
||||
console.log(percent)
|
||||
console.log(i, N, percent, floData.next);
|
||||
@ -397,9 +398,10 @@
|
||||
reject(error);
|
||||
});
|
||||
}
|
||||
}).catch(error => {
|
||||
}
|
||||
catch(error){
|
||||
reject(error);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
async function downloadTorrent(filename, txid, totalChunks) {
|
||||
@ -409,11 +411,11 @@
|
||||
console.log(txid);
|
||||
getTorrentMetafromAPI(txid, 1, totalChunks).then(chunks => {
|
||||
var filedata = chunks.join("");
|
||||
console.log(filedata);
|
||||
// console.log(filedata);
|
||||
download(filename, filedata);
|
||||
}).catch(error => {
|
||||
alert(error);
|
||||
console.log(error);
|
||||
console.error(error);
|
||||
}).finally(_ => {
|
||||
// document.getElementById('downloadBar').style.display = "none";
|
||||
});
|
||||
@ -784,7 +786,7 @@
|
||||
async function showLatestTorrents(){
|
||||
getRef('torrent_container').innerHTML = ``
|
||||
let allTorrents = await getTorrents()
|
||||
allTorrents = allTorrents.reverse().slice(0, 10)
|
||||
allTorrents = allTorrents.reverse().slice(0, 8)
|
||||
getRef('torrent_container').append(renderTorrents(allTorrents))
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user