diff --git a/client/source/sass/components/_action-bar.scss b/client/source/sass/components/_action-bar.scss index 7ecfc8f6..770b21b2 100644 --- a/client/source/sass/components/_action-bar.scss +++ b/client/source/sass/components/_action-bar.scss @@ -2,7 +2,7 @@ $action-bar--background: transparent; $action-bar--foreground: #1b1a1c; $action-bar--group--border: rgba(#7a8080, 0.15); -$action--foreground: #909799; +$action--foreground: #8899a8; $action--foreground--hover: $blue; $action--background--hover: rgba(#333e4a, 0.05); $action--border--hover: rgba(#333e4a, 0.15); diff --git a/client/source/sass/components/_client-stats.scss b/client/source/sass/components/_client-stats.scss index d851573e..58971e47 100644 --- a/client/source/sass/components/_client-stats.scss +++ b/client/source/sass/components/_client-stats.scss @@ -105,40 +105,6 @@ $client-stats--limits--icon--hover: $blue; } } -.client-stat { - - &--limits { - background: none; - border: none; - color: $client-stats--limits--foreground; - display: block; - outline: none; - padding: 10px 15px; - font-size: 0.85em; - text-align: left; - transition: color 0.25s; - vertical-align: middle; - width: 100%; - - .icon { - display: inline-block; - fill: $client-stats--limits--foreground; - margin: -2px 5px 0 0; - transition: fill 0.25s; - vertical-align: middle; - width: 14.5px; - } - - &:hover { - color: $client-stats--limits--icon--hover; - - .icon { - fill: $client-stats--limits--icon--hover; - } - } - } -} - .client-stat { position: relative; diff --git a/client/source/sass/components/_sidebar.scss b/client/source/sass/components/_sidebar.scss index 1322dcec..22627958 100644 --- a/client/source/sass/components/_sidebar.scss +++ b/client/source/sass/components/_sidebar.scss @@ -6,12 +6,11 @@ $sidebar-filter--foreground--header: rgba($sidebar-filter--foreground, 0.5); $sidebar-filter--foreground--active: $blue; $sidebar-filter--foreground--hover: lighten($sidebar-filter--foreground, 15%); -$sidebar--icon-button--fill: $sidebar--foreground; +$sidebar--icon-button--fill: rgba($sidebar--foreground, 0.7); $sidebar--icon-button--fill--hover: $blue; -$sidebar--icon-button--foreground: $sidebar--foreground; +$sidebar--icon-button--foreground: rgba($sidebar--foreground, 0.7); $sidebar--icon-button--foreground--hover: $blue; - .application { &__sidebar { @@ -51,7 +50,9 @@ $sidebar--icon-button--foreground--hover: $blue; color: $sidebar--icon-button--foreground; cursor: pointer; display: block; - line-height: 0; + font-size: 0.8em; + line-height: 1; + padding: 10px; transition: color 0.25s; &:hover { @@ -64,13 +65,15 @@ $sidebar--icon-button--foreground--hover: $blue; .icon { fill: $sidebar--icon-button--fill; - height: 16px; + height: 13px; transition: fill 0.25s; - width: 16px; + position: relative; + top: -1px; + vertical-align: middle; + width: 13px; } &--settings { - padding: 10px 15px; position: absolute; right: $spacing-unit * 1/5; top: $spacing-unit * 1/5; diff --git a/client/source/sass/components/_torrents.scss b/client/source/sass/components/_torrents.scss index 1499903b..6cd76db5 100644 --- a/client/source/sass/components/_torrents.scss +++ b/client/source/sass/components/_torrents.scss @@ -142,7 +142,7 @@ $torrent--background--error: #e95779; &--primary { color: $torrent--primary--foreground; - flex: 4; + flex: 1 1 auto; line-height: 1.3; white-space: nowrap; @@ -165,27 +165,19 @@ $torrent--background--error: #e95779; &--secondary { color: $torrent--secondary--foreground; - flex: 0 0 210px; + flex: 0 0 auto; font-size: 0.75em; - min-width: 265px; + margin-right: $spacing-unit * 2/5; text-align: right; white-space: nowrap; vertical-align: baseline; - li { - display: inline-block; - font-weight: 500; - margin-right: 5px; - text-align: left; - white-space: nowrap; + &:last-child { + margin-right: 0; + } - .unit { - font-weight: 400; - } - - &:last-child { - margin-right: 0; - } + .unit { + font-weight: 400; } .is-stopped & { @@ -274,16 +266,15 @@ $torrent--background--error: #e95779; width: 55px; } + &--ratio { + width: 50px; + } + &--seeds { width: 55px; } - &--eta { - width: 70px; - } - &--speed { - width: 65px; &--download, &--upload { @@ -310,10 +301,6 @@ $torrent--background--error: #e95779; color: $blue; } } - - &--ratio { - width: 50px; - } } } diff --git a/client/source/scripts/components/sidebar/SettingsButton.js b/client/source/scripts/components/sidebar/SettingsButton.js index 4f70c3c2..9b0cb7af 100644 --- a/client/source/scripts/components/sidebar/SettingsButton.js +++ b/client/source/scripts/components/sidebar/SettingsButton.js @@ -16,7 +16,7 @@ class SettingsButton extends React.Component { return ( - + Settings ); } diff --git a/client/source/scripts/components/sidebar/SpeedLimitDropdown.js b/client/source/scripts/components/sidebar/SpeedLimitDropdown.js index 5643fa01..25b8e769 100644 --- a/client/source/scripts/components/sidebar/SpeedLimitDropdown.js +++ b/client/source/scripts/components/sidebar/SpeedLimitDropdown.js @@ -57,7 +57,7 @@ class SpeedLimitDropdown extends React.Component { getDropdownHeader() { return ( - + Speed Limits ); @@ -144,7 +144,6 @@ class SpeedLimitDropdown extends React.Component { } render() { - // return hi; return ( 0 || uploadRate.value > 0; + let wasAddedRecently = (Date.now() - added.getTime()) < 1000 * 60 * 10; // Was added in the last 10 minutes. + + if (isActivelyDownloading) { + secondaryDetails.push( +
  • + + {eta} +
  • + ); + } + + if (isActivelyDownloading || wasAddedRecently) { + secondaryDetails.push( +
  • + + {downloadRate.value} + {downloadRate.unit} +
  • , +
  • + + {uploadRate.value} + {uploadRate.unit} +
  • + ); + } + return (
  • @@ -66,28 +97,7 @@ export default class Torrent extends React.Component {
  • {torrent.name}
  • -
  • -
      -
    • - - {eta} -
    • -
    • - - {downloadRate.value} - {downloadRate.unit} -
    • -
    • - - {uploadRate.value} - {uploadRate.unit} -
    • -
    • - - {ratio} -
    • -
    -
  • + {secondaryDetails}