jobs logs

pytorrent/static/styles.css

@@ -3069,6 +3069,31 @@ body.mobile-mode .mobile-filter-bar {
   outline: 0;
 }
 
+
+.jobs-toolbar,
+.jobs-toolbar-actions,
+.jobs-toolbar-toggle {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.jobs-toolbar {
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.jobs-toolbar-actions,
+.jobs-toolbar-toggle {
+  align-items: center;
+}
+
+.jobs-show-details {
+  align-items: center;
+  margin-bottom: 0;
+}
+
 .jobs-table {
   min-width: 1080px;
   white-space: normal;

pytorrent/templates/index.html

@@ -190,11 +190,19 @@
         <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <div class="jobs-toolbar d-flex gap-2 mb-2 flex-wrap align-items-center">
-          <button id="refreshJobsBtn" class="btn btn-sm btn-outline-primary" type="button"><i class="fa-solid fa-rotate"></i> Refresh</button>
-          <button id="clearJobsBtn" class="btn btn-sm btn-outline-danger" type="button"><i class="fa-solid fa-trash"></i> Clear finished</button>
-          <button id="emergencyClearJobsBtn" class="btn btn-sm btn-danger" type="button"><i class="fa-solid fa-triangle-exclamation"></i> Emergency clean all</button>
-          <span class="text-muted small">Pending, running, done, failed, retry and cancel history.</span>
+        <div class="jobs-toolbar">
+          <div class="jobs-toolbar-actions">
+            <button id="refreshJobsBtn" class="btn btn-sm btn-outline-primary" type="button"><i class="fa-solid fa-rotate"></i> Refresh</button>
+            <button id="clearJobsBtn" class="btn btn-sm btn-outline-danger" type="button"><i class="fa-solid fa-trash"></i> Clear finished</button>
+            <button id="emergencyClearJobsBtn" class="btn btn-sm btn-danger" type="button"><i class="fa-solid fa-triangle-exclamation"></i> Emergency clean all</button>
+            <span class="text-muted small">Pending, running, done, failed, retry and cancel history.</span>
+          </div>
+          <div class="jobs-toolbar-toggle">
+            <label class="form-check form-switch jobs-show-details">
+              <input id="jobsShowDetails" class="form-check-input" type="checkbox">
+              <span class="form-check-label">Show details</span>
+            </label>
+          </div>
         </div>
         <div id="jobsTable" class="table-responsive"><span class="spinner-border spinner-border-sm"></span> Loading jobs...</div>
         <div id="jobsPager" class="pager-row mt-2"></div>