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.
This commit is contained in:
Derek Reiff
GitHub
parent
d2fabc737b
commit
e5b43991bc
|
|
@ -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.
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -200,9 +200,39 @@
|
|||
<input type="search" id="torrent-search" placeholder="Filter" />
|
||||
<span id="filter-count"> </span>
|
||||
<span class="flex"></span>
|
||||
<div class="speed-dn-icon"></div>
|
||||
<div class="speed-dn-icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-chevron-down"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="speed-dn-label"></div>
|
||||
<div class="speed-up-icon"></div>
|
||||
<div class="speed-up-icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-chevron-up"
|
||||
>
|
||||
<polyline points="18 15 12 9 6 15"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="speed-up-label"></div>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue