Continue Lining Up Columns

bundle.js

@@ -33819,14 +33819,15 @@ function display() {
       tracker.addEventListener('input', propertyChange);
       row.appendChild(tracker);
       let remove = document.createElement('a');
+      remove.className = 'remove';
       remove.dataset.index = i;
       remove.innerHTML = '<span class="far fa-trash"></span>';
       remove.addEventListener('click', removeRow);
       row.appendChild(remove);
       announce.appendChild(row);
     }
-  } else {
-    announce.innerHTML = "<em>No trackers specified in the URL/File provided</em>";
+  // } else {
+  //   announce.innerHTML = "<em>No trackers specified in the URL/File provided</em>";
   }
 
   urlList.innerHTML = "";
@@ -33842,15 +33843,16 @@ function display() {
       webseed.dataset.group = 'urlList';
       webseed.addEventListener('input', propertyChange);
       row.appendChild(webseed);
-      let remove = document.createElement('button');
+      let remove = document.createElement('a');
+      remove.className = 'remove';
       remove.dataset.index = i;
-      remove.innerHTML = '<span class="fas fa-minus"></span>';
+      remove.innerHTML = '<span class="far fa-trash"></span>';
       remove.addEventListener('click', removeRow);
       row.appendChild(remove);
       urlList.appendChild(row);
     }
-  } else {
-    urlList.innerHTML = "<em>No webseed URLs in the URL/File provided</em>";
+  // } else {
+  //   urlList.innerHTML = "<em>No webseed URLs in the URL/File provided</em>";
   }
 
   files.innerHTML = "";
@@ -33866,9 +33868,9 @@ function display() {
   } else {
     getFiles.style.display = "block";
     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 {
-      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.disabled = true;

index.html

@@ -29,14 +29,14 @@
 
   <header>
     <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>
 
   <div id="startButtons">
     <input id="magnet" type="text" placeholder="Enter Magnet URL" />
     <input id="torrent" type="file" />
     <label for="torrent">
-      <span class="fas fa-cloud-upload"></span> Upload Torrent
+      <span class="fas fa-cloud-upload"></span> Select Torrent File
     </label>
     
   </div>
@@ -44,34 +44,44 @@
   <div id="properties" style="display:none">
 
     <button id="reset">
-      <span class="far fa-times fa-fw"></span>
+      <span class="far fa-times"></span>
     </button>
     
     <div id="download">
       <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 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 id="downloadTorrent">
-        <span class="fas fa-file-download fa-fw fa-2x"></span>
+        <span class="fas fa-file-download fa-2x"></span>
       </button>
     </div>
 
     <div class="property">
-      <label for="hash">Unique Hash</label>
-      <input id="hash" type="text" placeholder="" disabled/>
+      <div class="labels">
+        <label for="hash">Unique Hash</label>
+      </div>
+      <div class="content">
+        <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 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">
-      <label for="created">Created</label>
-      <div>
+      <div class="labels">
+        <label for="created">Created</label>
+      </div>
+      <div class="content">
         <input id="created" type="text" placeholder="Time unspecified" disabled />
         <br />
         <input id="createdBy" type="text" placeholder="Client unspecified" disabled />
@@ -79,19 +89,21 @@
     </div>
 
     <div class="property">
-      <label for="comment">Comment</label>
-      <input id="comment" type="text" placeholder="Unspecified" />
+      <div class="labels">
+        <label for="comment">Comment</label>
+      </div>
+      <div class="content">
+        <input id="comment" type="text" placeholder="Unspecified" />
+      </div>
     </div>
 
     <div class="property">
-      <div>
+      <div class="labels">
         <label for="announce">Tracker URLs</label>
-        <br />
         <a id="addTrackers">Add Known Working Trackers</a>
-        <br />
         <a id="removeTrackers">Remove All</a>
       </div>
-      <div>
+      <div class="content">
         <button id="addTracker" data-type="announce">
           <span class="far fa-plus-circle"></span> Add Tracker
         </button>
@@ -100,12 +112,11 @@
     </div>
 
     <div class="property">
-      <div>
+      <div class="labels">
         <label for="urlList">Webseed URLs</label>
-        <br />
         <a id="removeWebseeds">Remove All</a>
       </div>
-      <div>
+      <div class="content">
         <button id="addWebseed" data-type="urlList">
           <span class="far fa-plus-circle"></span> Add Webseed
         </button>
@@ -114,9 +125,9 @@
     </div>
 
     <div class="property">
-      <div>
+      <div class="labels">
         <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>
       <table id="files">
         <tbody id="filesBody"></tbody>
@@ -125,7 +136,7 @@
 
   </div>
 
-  <script src="bundle.js"></script>
+  <script src="bundle.min.js"></script>
 
 </body>
 

parse.js

@@ -156,14 +156,15 @@ function display() {
       tracker.addEventListener('input', propertyChange);
       row.appendChild(tracker);
       let remove = document.createElement('a');
+      remove.className = 'remove';
       remove.dataset.index = i;
       remove.innerHTML = '<span class="far fa-trash"></span>';
       remove.addEventListener('click', removeRow);
       row.appendChild(remove);
       announce.appendChild(row);
     }
-  } else {
-    announce.innerHTML = "<em>No trackers specified in the URL/File provided</em>";
+  // } else {
+  //   announce.innerHTML = "<em>No trackers specified in the URL/File provided</em>";
   }
 
   urlList.innerHTML = "";
@@ -179,15 +180,16 @@ function display() {
       webseed.dataset.group = 'urlList';
       webseed.addEventListener('input', propertyChange);
       row.appendChild(webseed);
-      let remove = document.createElement('button');
+      let remove = document.createElement('a');
+      remove.className = 'remove';
       remove.dataset.index = i;
-      remove.innerHTML = '<span class="fas fa-minus"></span>';
+      remove.innerHTML = '<span class="far fa-trash"></span>';
       remove.addEventListener('click', removeRow);
       row.appendChild(remove);
       urlList.appendChild(row);
     }
-  } else {
-    urlList.innerHTML = "<em>No webseed URLs in the URL/File provided</em>";
+  // } else {
+  //   urlList.innerHTML = "<em>No webseed URLs in the URL/File provided</em>";
   }
 
   files.innerHTML = "";
@@ -203,9 +205,9 @@ function display() {
   } else {
     getFiles.style.display = "block";
     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 {
-      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.disabled = true;

style.css

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