Continue Lining Up Columns

This commit is contained in:
Leo Herzog
2020-11-09 17:02:10 -05:00
parent 9365ab1338
commit a7ac84adf0
5 changed files with 111 additions and 60 deletions

View File

@@ -33819,14 +33819,15 @@ function display() {
tracker.addEventListener('input', propertyChange); tracker.addEventListener('input', propertyChange);
row.appendChild(tracker); row.appendChild(tracker);
let remove = document.createElement('a'); let remove = document.createElement('a');
remove.className = 'remove';
remove.dataset.index = i; remove.dataset.index = i;
remove.innerHTML = '<span class="far fa-trash"></span>'; remove.innerHTML = '<span class="far fa-trash"></span>';
remove.addEventListener('click', removeRow); remove.addEventListener('click', removeRow);
row.appendChild(remove); row.appendChild(remove);
announce.appendChild(row); announce.appendChild(row);
} }
} else { // } else {
announce.innerHTML = "<em>No trackers specified in the URL/File provided</em>"; // announce.innerHTML = "<em>No trackers specified in the URL/File provided</em>";
} }
urlList.innerHTML = ""; urlList.innerHTML = "";
@@ -33842,15 +33843,16 @@ function display() {
webseed.dataset.group = 'urlList'; webseed.dataset.group = 'urlList';
webseed.addEventListener('input', propertyChange); webseed.addEventListener('input', propertyChange);
row.appendChild(webseed); row.appendChild(webseed);
let remove = document.createElement('button'); let remove = document.createElement('a');
remove.className = 'remove';
remove.dataset.index = i; remove.dataset.index = i;
remove.innerHTML = '<span class="fas fa-minus"></span>'; remove.innerHTML = '<span class="far fa-trash"></span>';
remove.addEventListener('click', removeRow); remove.addEventListener('click', removeRow);
row.appendChild(remove); row.appendChild(remove);
urlList.appendChild(row); urlList.appendChild(row);
} }
} else { // } else {
urlList.innerHTML = "<em>No webseed URLs in the URL/File provided</em>"; // urlList.innerHTML = "<em>No webseed URLs in the URL/File provided</em>";
} }
files.innerHTML = ""; files.innerHTML = "";
@@ -33866,9 +33868,9 @@ function display() {
} else { } else {
getFiles.style.display = "block"; getFiles.style.display = "block";
if (client.torrents.length > 0) { if (client.torrents.length > 0) {
files.innerHTML = "<em>Attempting fetching files from Webtorrent...</em>"; files.innerHTML = '<input type="text" placeholder="Attempting fetching files from Webtorrent..." disabled>';
} else { } else {
files.innerHTML = "<em>Files information isn't included in the URL/File provided</em>"; files.innerHTML = '<input type="text" placeholder="Not included in the URL/File provided" disabled>';
} }
downloadTorrent.removeEventListener('click', saveTorrent); downloadTorrent.removeEventListener('click', saveTorrent);
downloadTorrent.disabled = true; downloadTorrent.disabled = true;

2
bundle.min.js vendored

File diff suppressed because one or more lines are too long

View File

@@ -29,14 +29,14 @@
<header> <header>
<h1 id="logo">Torrent<span class="fad fa-magnet fa-fw"></span>Parts</h1> <h1 id="logo">Torrent<span class="fad fa-magnet fa-fw"></span>Parts</h1>
<iframe src="https://ghbtns.com/github-btn.html?user=leoherzog&repo=TorrentParts&type=star&count=true" frameborder="0" scrolling="0" width="90" height="20" title="GitHub"></iframe> <iframe src="https://ghbtns.com/github-btn.html?user=leoherzog&repo=TorrentParts&type=star&count=true" frameborder="0" scrolling="0" width="100" height="20" title="GitHub"></iframe>
</header> </header>
<div id="startButtons"> <div id="startButtons">
<input id="magnet" type="text" placeholder="Enter Magnet URL" /> <input id="magnet" type="text" placeholder="Enter Magnet URL" />
<input id="torrent" type="file" /> <input id="torrent" type="file" />
<label for="torrent"> <label for="torrent">
<span class="fas fa-cloud-upload"></span> Upload Torrent <span class="fas fa-cloud-upload"></span> Select Torrent File
</label> </label>
</div> </div>
@@ -44,34 +44,44 @@
<div id="properties" style="display:none"> <div id="properties" style="display:none">
<button id="reset"> <button id="reset">
<span class="far fa-times fa-fw"></span> <span class="far fa-times"></span>
</button> </button>
<div id="download"> <div id="download">
<button id="copyURL"> <button id="copyURL">
<span class="fas fa-share-alt fa-fw fa-2x" data-fa-transform="left-1"></span> <span class="fas fa-share-alt fa-2x" data-fa-transform="left-1"></span>
</button> </button>
<button id="copyMagnet"> <button id="copyMagnet">
<span class="fas fa-magnet fa-fw fa-2x" data-fa-transform="down-1"></span> <span class="fas fa-magnet fa-2x" data-fa-transform="down-1"></span>
</button> </button>
<button id="downloadTorrent"> <button id="downloadTorrent">
<span class="fas fa-file-download fa-fw fa-2x"></span> <span class="fas fa-file-download fa-2x"></span>
</button> </button>
</div> </div>
<div class="property"> <div class="property">
<div class="labels">
<label for="hash">Unique Hash</label> <label for="hash">Unique Hash</label>
</div>
<div class="content">
<input id="hash" type="text" placeholder="" disabled/> <input id="hash" type="text" placeholder="" disabled/>
</div> </div>
<div class="property">
<label for="name"><span id="originalSourceIcon"></span>Torrent Name</label>
<input id="name" type="text" placeholder="Unspecified" />
</div> </div>
<div class="property"> <div class="property">
<div class="labels">
<label for="name"><span id="originalSourceIcon"></span>Torrent Name</label>
</div>
<div class="content">
<input id="name" type="text" placeholder="Unspecified" />
</div>
</div>
<div class="property">
<div class="labels">
<label for="created">Created</label> <label for="created">Created</label>
<div> </div>
<div class="content">
<input id="created" type="text" placeholder="Time unspecified" disabled /> <input id="created" type="text" placeholder="Time unspecified" disabled />
<br /> <br />
<input id="createdBy" type="text" placeholder="Client unspecified" disabled /> <input id="createdBy" type="text" placeholder="Client unspecified" disabled />
@@ -79,19 +89,21 @@
</div> </div>
<div class="property"> <div class="property">
<div class="labels">
<label for="comment">Comment</label> <label for="comment">Comment</label>
</div>
<div class="content">
<input id="comment" type="text" placeholder="Unspecified" /> <input id="comment" type="text" placeholder="Unspecified" />
</div> </div>
</div>
<div class="property"> <div class="property">
<div> <div class="labels">
<label for="announce">Tracker URLs</label> <label for="announce">Tracker URLs</label>
<br />
<a id="addTrackers">Add Known Working Trackers</a> <a id="addTrackers">Add Known Working Trackers</a>
<br />
<a id="removeTrackers">Remove All</a> <a id="removeTrackers">Remove All</a>
</div> </div>
<div> <div class="content">
<button id="addTracker" data-type="announce"> <button id="addTracker" data-type="announce">
<span class="far fa-plus-circle"></span> Add Tracker <span class="far fa-plus-circle"></span> Add Tracker
</button> </button>
@@ -100,12 +112,11 @@
</div> </div>
<div class="property"> <div class="property">
<div> <div class="labels">
<label for="urlList">Webseed URLs</label> <label for="urlList">Webseed URLs</label>
<br />
<a id="removeWebseeds">Remove All</a> <a id="removeWebseeds">Remove All</a>
</div> </div>
<div> <div class="content">
<button id="addWebseed" data-type="urlList"> <button id="addWebseed" data-type="urlList">
<span class="far fa-plus-circle"></span> Add Webseed <span class="far fa-plus-circle"></span> Add Webseed
</button> </button>
@@ -114,9 +125,9 @@
</div> </div>
<div class="property"> <div class="property">
<div> <div class="labels">
<label for="files">Files</label> <label for="files">Files</label>
<a id="getFiles">Attempt to Fetch Files from WebTorrent</a> <a id="getFiles">Fetch Files List from WebTorrent</a>
</div> </div>
<table id="files"> <table id="files">
<tbody id="filesBody"></tbody> <tbody id="filesBody"></tbody>
@@ -125,7 +136,7 @@
</div> </div>
<script src="bundle.js"></script> <script src="bundle.min.js"></script>
</body> </body>

View File

@@ -156,14 +156,15 @@ function display() {
tracker.addEventListener('input', propertyChange); tracker.addEventListener('input', propertyChange);
row.appendChild(tracker); row.appendChild(tracker);
let remove = document.createElement('a'); let remove = document.createElement('a');
remove.className = 'remove';
remove.dataset.index = i; remove.dataset.index = i;
remove.innerHTML = '<span class="far fa-trash"></span>'; remove.innerHTML = '<span class="far fa-trash"></span>';
remove.addEventListener('click', removeRow); remove.addEventListener('click', removeRow);
row.appendChild(remove); row.appendChild(remove);
announce.appendChild(row); announce.appendChild(row);
} }
} else { // } else {
announce.innerHTML = "<em>No trackers specified in the URL/File provided</em>"; // announce.innerHTML = "<em>No trackers specified in the URL/File provided</em>";
} }
urlList.innerHTML = ""; urlList.innerHTML = "";
@@ -179,15 +180,16 @@ function display() {
webseed.dataset.group = 'urlList'; webseed.dataset.group = 'urlList';
webseed.addEventListener('input', propertyChange); webseed.addEventListener('input', propertyChange);
row.appendChild(webseed); row.appendChild(webseed);
let remove = document.createElement('button'); let remove = document.createElement('a');
remove.className = 'remove';
remove.dataset.index = i; remove.dataset.index = i;
remove.innerHTML = '<span class="fas fa-minus"></span>'; remove.innerHTML = '<span class="far fa-trash"></span>';
remove.addEventListener('click', removeRow); remove.addEventListener('click', removeRow);
row.appendChild(remove); row.appendChild(remove);
urlList.appendChild(row); urlList.appendChild(row);
} }
} else { // } else {
urlList.innerHTML = "<em>No webseed URLs in the URL/File provided</em>"; // urlList.innerHTML = "<em>No webseed URLs in the URL/File provided</em>";
} }
files.innerHTML = ""; files.innerHTML = "";
@@ -203,9 +205,9 @@ function display() {
} else { } else {
getFiles.style.display = "block"; getFiles.style.display = "block";
if (client.torrents.length > 0) { if (client.torrents.length > 0) {
files.innerHTML = "<em>Attempting fetching files from Webtorrent...</em>"; files.innerHTML = '<input type="text" placeholder="Attempting fetching files from Webtorrent..." disabled>';
} else { } else {
files.innerHTML = "<em>Files information isn't included in the URL/File provided</em>"; files.innerHTML = '<input type="text" placeholder="Not included in the URL/File provided" disabled>';
} }
downloadTorrent.removeEventListener('click', saveTorrent); downloadTorrent.removeEventListener('click', saveTorrent);
downloadTorrent.disabled = true; downloadTorrent.disabled = true;

View File

@@ -41,10 +41,12 @@ input:disabled {
color: var(--grey); color: var(--grey);
background: transparent; background: transparent;
border: 0; border: 0;
padding: 8px 0;
} }
::placeholder { ::placeholder {
color: var(--grey); color: var(--grey);
opacity: 0.6;
} }
button { button {
@@ -55,7 +57,6 @@ button {
box-sizing: border-box; box-sizing: border-box;
border-radius: 900px; border-radius: 900px;
text-align: left; text-align: left;
margin: auto;
cursor: pointer; cursor: pointer;
} }
@@ -65,8 +66,11 @@ button:disabled {
} }
a { a {
cursor: pointer; color: var(--grey);
font-size: 85%;
text-decoration: underline; text-decoration: underline;
text-transform: uppercase;
cursor: pointer;
} }
header { header {
@@ -129,6 +133,10 @@ label[for="torrent"] {
} }
#reset { #reset {
width: 32px;
height: 32px;
border-radius: 50%;
text-align: center;
position: absolute; position: absolute;
top: -12px; top: -12px;
right: -12px; right: -12px;
@@ -143,19 +151,34 @@ label[for="torrent"] {
} }
#download > * { #download > * {
width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
margin: 4px 0; margin: 4px 0;
} }
.property { .property {
width: 100%; margin: 24px 0;
margin: 20px 0px;
display: flex; display: flex;
justify-content: space-around; align-content: flex-start;
align-items: center; justify-content: space-between;
} }
.property:first-child { .property:first-child {
width: 160px; width: 240px;
}
.labels {
width: 280px;
text-align: right;
margin-top: 8px;
display: flex;
flex-direction: column;
}
.content, #files {
width: 460px;
} }
label { label {
@@ -168,30 +191,33 @@ input {
#addTracker, #addWebseed { #addTracker, #addWebseed {
width: 440px; width: 440px;
margin: 0 0 16px 0;
color: var(--light-blue); color: var(--light-blue);
background: var(--dark-blue); background: var(--dark-blue);
border: 1px solid var(--light-blue); border: 1px solid var(--light-blue);
padding: 8px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 900px; border-radius: 900px;
cursor: pointer; cursor: pointer;
} }
#announce > *, #urlList > * { #announce > *, #urlList > * {
margin: 4px 0; margin: 0 0 16px 0;
}
.remove {
/* position: absolute; */
} }
@media (max-width: 1080px) { @media (max-width: 1080px) {
#reset { #reset {
width: auto;
top: 0px; top: 0px;
right: 8px; right: 8px;
} }
#download { #download {
justify-content: center; justify-content: center;
width: 96%; width: 95%;
top: auto; top: auto;
bottom: 16px; bottom: 16px;
left: auto; left: auto;
@@ -200,7 +226,6 @@ input {
} }
#download > * { #download > * {
width: auto;
margin: 0 4px; margin: 0 4px;
} }
@@ -218,24 +243,35 @@ input {
} }
#properties { #properties {
margin: 0; margin: 0 1.5vw;
padding: 0 2vw; padding: 0 1.5vw;
width: 95vw; width: 95vw;
} }
.property { .property {
margin: 8px 0; margin: 12px 0;
flex-direction: column; flex-direction: column;
align-items: center;
} }
.property > label { .property > label {
width: fit-content; margin: 12px 0;
margin: 8px 0;
} }
input, button, #addTracker, #addWebseed { input, button, #addTracker, #addWebseed {
width: 95vw; width: 94vw;
text-align: center;
}
.labels {
margin-bottom: 16px;
align-items: center;
}
.labels, .content, #files {
width: auto;
}
#announce, #urlList {
text-align: center; text-align: center;
} }