From e5b43991bc49c53884551ecb0f80650509b11632 Mon Sep 17 00:00:00 2001 From: Derek Reiff Date: Fri, 28 Jul 2023 10:50:45 -0700 Subject: [PATCH] Add readme with light setup instructions; minor UI tweaks (#5814) * Add readme with light setup instructions; tweak ui These are very minor changes that cover a few issues: - WebUI Peer list too narrow #4209 On very small screens (for-phone-only), we modify width on some fields for less overlap. But we also truncate using `text-overflow: ellipsis` and `overflow-x: hidden`. - properly style up/down speed icons Moved SVG contents into index.html so we can make these style changes based on the `prefers-color-scheme` media query. I also set a min-width, text-align: right on the download/upload label so they aren't shifting when going from 1 kB/s to 800 Mb/s. - Add README for `web` directory It made sense to add some super simple getting-started instructions for the directory. - Limit input width in Add dialog of Web #5639 Add a width to the open-torrent file input, but also increase the modal dialog container size. * Add bookmarklet for anonymizing screenshots I see a lot of blurring going on in screenshots for issues and PRs, so this is a quick little bookmarklet trick to add lorem ipsum text to torrent-names. --- web/README | 19 ++++++++++ web/assets/css/transmission-app.scss | 53 +++++++++++++++++++--------- web/public_html/index.html | 34 ++++++++++++++++-- 3 files changed, 88 insertions(+), 18 deletions(-) create mode 100644 web/README diff --git a/web/README b/web/README new file mode 100644 index 000000000..128487623 --- /dev/null +++ b/web/README @@ -0,0 +1,19 @@ +# Transmission Web Client + +A web interface is built into all Transmission flavors, enabling them to be controlled remotely. + +## Developing locally + +First, in this web directory, run `npm i` to install all dependencies. (You’ll need to have node and npm installed, of course.) + +Run `npm run dev` to compile the source javascript files into a bundle, then navigate to [localhost:9000](http://localhost:9000/). + +Webpack will automatically compile on save, so you should see any changes reflected immediately. + +## Anonymizing your data for screenshots + +Use this bookmarklet to anonymize your torrent names before submitting a screenshot: + +`javascript:void%20function(){const%20a=document.getElementsByClassName(%22torrent-name%22);for(const%20b%20of%20a)console.log(b),b.textContent=%22Lorem%20ipsum%20dolor%20sit%20amet.iso%22}();` + +You’ll typically have about 3 seconds before the next batch of RPC updates overwrite the text content of any currently-downloading files. \ No newline at end of file diff --git a/web/assets/css/transmission-app.scss b/web/assets/css/transmission-app.scss index 72618a297..072d42c91 100644 --- a/web/assets/css/transmission-app.scss +++ b/web/assets/css/transmission-app.scss @@ -390,22 +390,30 @@ $toolbar-height: $toolbar-height-number * 1px; } } -$speed-icon-size: 12px; +$speed-icon-size: 20px; .speed-up-icon { - background-image: url($image-chevron-up); - background-repeat: no-repeat; - background-size: $speed-icon-size $speed-icon-size; - height: $speed-icon-size; - width: $speed-icon-size; + fill: var(--color-fg-primary); + margin: 0 auto; + + svg { + width: $speed-icon-size; + } } .speed-dn-icon { - background-image: url($image-chevron-dn); - background-repeat: no-repeat; - background-size: $speed-icon-size $speed-icon-size; - height: $speed-icon-size; - width: $speed-icon-size; + fill: var(--color-fg-primary); + margin: 0 auto; + + svg { + width: $speed-icon-size; + } +} + +#speed-dn-label, +#speed-up-label { + width: 70px; + text-align: right; } /// TORRENT CONTAINER @@ -1238,6 +1246,10 @@ $video-image: '../img/film.svg'; .percent-done { width: 10%; + + @include for-phone-only { + width: 12%; + } } .speed-down, @@ -1247,17 +1259,21 @@ $video-image: '../img/film.svg'; .peer-address { width: 25%; + overflow-x: hidden; + text-overflow: ellipsis; + + @include for-phone-only { + text-align: left; + width: 20%; + } } .peer-app-name { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - @include for-phone-only { - display: none; - } @include for-tablet-portrait-up { - width: 25%; + width: 20%; } } @@ -1539,7 +1555,7 @@ $logo-size: 64px; } @include for-tablet-portrait-up { .dialog-container { - min-width: 400px; + min-width: 500px; position: absolute; top: $popup-top * 2; } @@ -1682,6 +1698,11 @@ dialog { #auto-start-label { margin-left: 5px; } + + input[type='file'] { + width: 100%; + box-sizing: border-box; + } } /// HOTKEYS DIALOG diff --git a/web/public_html/index.html b/web/public_html/index.html index 10733cdf7..b9c44a324 100755 --- a/web/public_html/index.html +++ b/web/public_html/index.html @@ -200,9 +200,39 @@   -
+
+ + + +
-
+
+ + + +