logs_commit1

pytorrent/static/js/app.js

@@ -14,6 +14,7 @@ import { pollerSource } from './poller.js';
 import { profilesSource } from './profiles.js';
 import { dashboardSource } from './dashboard.js';
 import { chartsSource } from './charts.js';
+import { operationLogsSource } from './operationLogs.js';
 import { bootstrapSource } from './bootstrap.js';
 
 export const moduleSources = [
@@ -33,6 +34,7 @@ export const moduleSources = [
   pollerSource,
   profilesSource,
   chartsSource,
+  operationLogsSource,
   bootstrapSource,
 ];
 

pytorrent/static/styles.css

@@ -4164,3 +4164,83 @@ body,
   overflow-wrap: anywhere;
   white-space: normal;
 }
+
+
+/* Operation logs */
+.operation-log-toolbar,
+.operation-log-settings-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem;
+  align-items: end;
+}
+
+.operation-log-type-filter {
+  max-width: 180px;
+}
+
+.operation-log-search {
+  max-width: 260px;
+}
+
+.operation-log-settings-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem;
+}
+
+.operation-log-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: .75rem;
+}
+
+.operation-log-stat,
+.operation-log-panels section {
+  border: 1px solid var(--bs-border-color);
+  border-radius: .75rem;
+  padding: .75rem;
+  background: var(--bs-body-bg);
+}
+
+.operation-log-stat span {
+  display: block;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.operation-log-panels {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: .75rem;
+  margin-top: .75rem;
+}
+
+.operation-log-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: .25rem 0;
+  border-bottom: 1px solid var(--bs-border-color-translucent);
+}
+
+.operation-log-row:last-child {
+  border-bottom: 0;
+}
+
+.operation-log-table td {
+  vertical-align: top;
+}
+
+@media (max-width: 760px) {
+  .operation-log-type-filter,
+  .operation-log-search {
+    max-width: none;
+    width: 100%;
+  }
+
+  .operation-log-toolbar > .btn,
+  .operation-log-settings-actions > .btn {
+    width: 100%;
+  }
+}