mobile torrent details

2026-05-24 13:23:28 +02:00
parent 0398dd9d39
commit d44cbe2429
4 changed files with 166 additions and 3 deletions
--- a/pytorrent/static/js/poller.js
+++ b/pytorrent/static/js/poller.js
--- a/pytorrent/static/js/torrentDetails.js
+++ b/pytorrent/static/js/torrentDetails.js
--- a/pytorrent/static/js/torrents.js
+++ b/pytorrent/static/js/torrents.js
--- a/pytorrent/static/styles.css
+++ b/pytorrent/static/styles.css
@@ -4672,3 +4672,166 @@ body,
    min-height: 420px;
  }
 }
+
+/* Mobile torrent details */
+.mobile-card-header {
+  align-items: flex-start;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+}
+
+.mobile-card-header .name {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mobile-card-header .mobile-details-btn {
+  flex: 0 0 auto;
+  min-width: 34px;
+}
+
+.mobile-details-modal .modal-header {
+  align-items: flex-start;
+}
+
+.mobile-details-subtitle {
+  color: var(--bs-secondary-color);
+  font-size: 0.82rem;
+  margin-top: 0.15rem;
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-summary,
+.mobile-details-section {
+  background: var(--bs-tertiary-bg);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.85rem;
+  margin-bottom: 0.85rem;
+  padding: 0.75rem;
+}
+
+.mobile-details-name {
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-path,
+.mobile-details-hash {
+  display: grid;
+  gap: 0.2rem;
+  margin-top: 0.45rem;
+}
+
+.mobile-details-path b,
+.mobile-details-hash b,
+.mobile-details-stat b {
+  color: var(--bs-secondary-color);
+  font-size: 0.72rem;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.mobile-details-path span,
+.mobile-details-hash code {
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-stats {
+  display: grid;
+  gap: 0.55rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-bottom: 0.85rem;
+}
+
+.mobile-details-stat {
+  background: rgba(var(--bs-secondary-bg-rgb), 0.55);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.7rem;
+  min-width: 0;
+  padding: 0.6rem;
+}
+
+.mobile-details-stat span {
+  display: block;
+  margin-top: 0.2rem;
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-section h6 {
+  align-items: center;
+  display: flex;
+  gap: 0.4rem;
+  justify-content: space-between;
+  margin-bottom: 0.65rem;
+}
+
+.mobile-details-section h6 small {
+  color: var(--bs-secondary-color);
+  font-size: 0.72rem;
+  font-weight: 500;
+}
+
+.mobile-details-list {
+  display: grid;
+  gap: 0.45rem;
+  list-style: none;
+  margin: 0;
+  max-height: 18rem;
+  overflow: auto;
+  padding: 0;
+}
+
+.mobile-details-peer,
+.mobile-details-file,
+.mobile-details-tracker {
+  align-items: flex-start;
+  background: rgba(var(--bs-body-bg-rgb), 0.65);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.65rem;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 0.55rem;
+}
+
+.mobile-details-peer div,
+.mobile-details-file div {
+  display: grid;
+  gap: 0.12rem;
+  min-width: 0;
+}
+
+.mobile-details-peer b,
+.mobile-details-file b,
+.mobile-details-tracker b {
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-peer span,
+.mobile-details-peer small,
+.mobile-details-file span,
+.mobile-details-tracker span {
+  color: var(--bs-secondary-color);
+  font-size: 0.78rem;
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-empty,
+.mobile-details-message {
+  color: var(--bs-secondary-color);
+  overflow-wrap: anywhere;
+}
+
+.mobile-details-warning {
+  font-size: 0.86rem;
+}
+
+@media (min-width: 576px) {
+  .mobile-details-stats {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+