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-19 19:04:47 +05:30
parent 55f278693e
commit d129a226ff
4 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/main.css
View File

@ -405,7 +405,7 @@ ul {
grid-area: title;
font-size: 1.1rem;
}
.torrent-card__tags {
.torrent-card__tags, .torrent-card__uploader {
grid-area: tags;
overflow: hidden;
white-space: nowrap;
@ -470,7 +470,8 @@ ul {
fill: rgba(var(--text-color), 0.3);
}
#torrent_tags {
#torrent_tags,
#torrent_uploader {
font-size: 0.85rem;
margin-bottom: 0.3rem;
color: rgba(var(--text-color), 0.8);
@ -486,6 +487,16 @@ 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;
}
#torrent_download_button {
color: white;
margin-top: 2rem;
@ -519,8 +530,8 @@ ul {
.torrent-card__title {
font-size: 1rem;
}
.torrent-card__tags {
margin-bottom: 0;
.torrent-card__tags, .torrent-card__uploader {
margin-top: 0.5rem;
font-size: 0.8rem;
}
.torrent-card__description {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

20
css/main.scss
View File

@ -351,7 +351,8 @@ ul{
grid-area: title;
font-size: 1.1rem;
}
&__tags{
&__tags,
&__uploader{
grid-area: tags;
overflow: hidden;
white-space: nowrap;
@ -412,7 +413,8 @@ ul{
fill: rgba(var(--text-color), 0.3);
}
}
#torrent_tags{
#torrent_tags,
#torrent_uploader{
font-size: 0.85rem;
margin-bottom: 0.3rem;
color: rgba(var(--text-color), 0.8);
@ -425,6 +427,15 @@ ul{
font-size: 0.9rem;
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;
}
#torrent_download_button{
color: white;
margin-top: 2rem;
@ -454,8 +465,9 @@ ul{
&__title{
font-size: 1rem;
}
&__tags{
margin-bottom: 0;
&__tags,
&__uploader{
margin-top: 0.5rem;
font-size: 0.8rem;
}
&__description{

10
index.html
View File

@ -36,6 +36,7 @@
<div id="torrent_tags"></div>
<h1 id="torrent_name"></h1>
<p id="torrent_description"></p>
<h5 id="torrent_uploader"></h5>
<button id="torrent_download_button" class="torrent-card__download-button" onclick="downloadTorrent(currentTorrent.filename, currentTorrent.startTx, currentTorrent.chunks)">
<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>
Get torrent
@ -73,7 +74,8 @@
<li class="torrent-card interact">
<div class="torrent-card__icon torrent-type-icon"></div>
<h3 class="torrent-card__title"></h3>
<span class="torrent-card__tags"></span>
<span class="torrent-card__uploader"></span>
<!-- <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">
@ -751,6 +753,7 @@
getRef('torrent_name').textContent = name
getRef('torrent_description').textContent = description
getRef('torrent_tags').textContent = tags.split('/').join('•')
getRef('torrent_uploader').textContent = `Uploaded by ${uploader}`
getRef('torrent_popup').show()
}
})
@ -760,7 +763,8 @@
const card = getRef('torrent_card_template').content.cloneNode(true).firstElementChild
card.id = id
card.querySelector('.torrent-card__title').textContent = name
card.querySelector('.torrent-card__tags').textContent = tags.split('/').join('•')
card.querySelector('.torrent-card__uploader').textContent = `by ${uploader}`
// card.querySelector('.torrent-card__tags').textContent = tags.split('/').join('•')
// card.querySelector('.torrent-card__description').textContent = description
// card.querySelector('.torrent-card__size').textContent = size
card.querySelector('.torrent-card__icon').innerHTML = getIcon(type)
@ -810,7 +814,7 @@
async function showLatestTorrents(){
getRef('torrent_container').innerHTML = ``
let allTorrents = await getTorrents()
allTorrents = allTorrents.reverse().slice(0, 800)
allTorrents = allTorrents.reverse().slice(0, 20)
getRef('torrent_container').append(renderTorrents(allTorrents))
}
</script>