UI update
This commit is contained in:
sairaj mote
parent
a340f1c703
commit
55f278693e
39
css/main.css
39
css/main.css
@ -70,7 +70,7 @@ body[data-theme=dark] {
|
||||
|
||||
p {
|
||||
font-size: 0.8;
|
||||
max-width: 70ch;
|
||||
max-width: 60ch;
|
||||
line-height: 1.5;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
@ -436,7 +436,11 @@ ul {
|
||||
}
|
||||
|
||||
#torrent_popup {
|
||||
--width: min(42rem, 100%);
|
||||
--width: min(56rem, 100%);
|
||||
}
|
||||
|
||||
.torrent-preview {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.torrent-type-icon {
|
||||
@ -455,12 +459,15 @@ ul {
|
||||
}
|
||||
|
||||
#torrent_type_icon {
|
||||
grid-area: icon;
|
||||
margin-bottom: 1rem;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
padding: 2rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
#torrent_type_icon .icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
fill: rgba(var(--text-color), 0.3);
|
||||
}
|
||||
|
||||
#torrent_tags {
|
||||
@ -486,6 +493,7 @@ ul {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 0.7rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#torrent_download_button .icon {
|
||||
fill: white;
|
||||
@ -513,7 +521,7 @@ ul {
|
||||
}
|
||||
.torrent-card__tags {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.torrent-card__description {
|
||||
display: none;
|
||||
@ -522,8 +530,12 @@ ul {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#torrent_type_icon {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
#torrent_tags {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
@ -542,10 +554,19 @@ ul {
|
||||
.torrent-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#torrent_popup {
|
||||
--min-height: 80vh;
|
||||
}
|
||||
|
||||
.torrent-preview {
|
||||
gap: 3rem;
|
||||
grid-template-columns: 22rem 1fr;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.page-layout {
|
||||
grid-template-columns: 1fr 90vw 1fr;
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
|
||||
.multi-form {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -61,7 +61,7 @@ body[data-theme='dark']{
|
||||
|
||||
p {
|
||||
font-size: 0.8;
|
||||
max-width: 70ch;
|
||||
max-width: 60ch;
|
||||
line-height: 1.5;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
@ -382,7 +382,10 @@ ul{
|
||||
}
|
||||
}
|
||||
#torrent_popup{
|
||||
--width: min(42rem, 100%);
|
||||
--width: min(56rem, 100%);
|
||||
}
|
||||
.torrent-preview{
|
||||
display: grid;
|
||||
}
|
||||
.torrent-type-icon{
|
||||
display: flex;
|
||||
@ -399,11 +402,14 @@ ul{
|
||||
}
|
||||
}
|
||||
#torrent_type_icon{
|
||||
grid-area: icon;
|
||||
margin-bottom: 1rem;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
padding: 2rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
.icon{
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
fill: rgba(var(--text-color), 0.3);
|
||||
}
|
||||
}
|
||||
#torrent_tags{
|
||||
@ -426,6 +432,7 @@ ul{
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 0.7rem;
|
||||
flex-shrink: 0;
|
||||
.icon{
|
||||
fill: white;
|
||||
}
|
||||
@ -449,7 +456,7 @@ ul{
|
||||
}
|
||||
&__tags{
|
||||
margin-bottom: 0;
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
&__description{
|
||||
display: none;
|
||||
@ -458,8 +465,11 @@ ul{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
#torrent_type_icon{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
#torrent_tags{
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
@ -475,10 +485,17 @@ ul{
|
||||
.torrent-card{
|
||||
padding: 1.5rem;
|
||||
}
|
||||
#torrent_popup{
|
||||
--min-height: 80vh;
|
||||
}
|
||||
.torrent-preview{
|
||||
gap: 3rem;
|
||||
grid-template-columns: 22rem 1fr;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.page-layout{
|
||||
grid-template-columns: 1fr 90vw 1fr;
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
.multi-form{
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
22
index.html
22
index.html
@ -30,14 +30,18 @@
|
||||
<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.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div id="torrent_type_icon" class="torrent-type-icon"></div>
|
||||
<div id="torrent_tags"></div>
|
||||
<h1 id="torrent_name"></h1>
|
||||
<p id="torrent_description"></p>
|
||||
<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
|
||||
</button>
|
||||
<section class="torrent-preview">
|
||||
<div id="torrent_type_icon" class="torrent-type-icon"></div>
|
||||
<div>
|
||||
<div id="torrent_tags"></div>
|
||||
<h1 id="torrent_name"></h1>
|
||||
<p id="torrent_description"></p>
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</sm-popup>
|
||||
<header id="main_header">
|
||||
<div class="flex align-center">
|
||||
@ -806,7 +810,7 @@
|
||||
async function showLatestTorrents(){
|
||||
getRef('torrent_container').innerHTML = ``
|
||||
let allTorrents = await getTorrents()
|
||||
allTorrents = allTorrents.reverse().slice(0, 50)
|
||||
allTorrents = allTorrents.reverse().slice(0, 800)
|
||||
getRef('torrent_container').append(renderTorrents(allTorrents))
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user