add compact version for mobile; fixes #103

endor · Sep 8, 2014 · 8af5e1e · 8af5e1e
1 parent 22e4ac8
commit 8af5e1e
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -13,8 +13,11 @@ kettu osaa monta asiaa.
 * kastigar for adding predefined locations.
 * viveksjain and Shadow6363 for keyboard shortcuts and how numbers are displayed.
 
-## Screenshot
-![Screenshot](screenshot-1.png)
+## Screenshots
+### Desktop
+![Screenshot Desktop](screenshot-1.png)
+### Mobile
+![Screenshot Mobile](screenshot-2.png)
 
 ## Installation
 You can use kettu instead of the original web client to remotely administrate your transmission application.

diff --git a/css/images/compact_mobile.png b/css/images/compact_mobile.png
diff --git a/css/mobile.css b/css/mobile.css
@@ -67,7 +67,7 @@ footer {
 }
 
 #torrents li.torrent {
-  height: 67px;
+  height: 76px;
   -webkit-transition-property: background;
   -webkit-transition-duration: 0.4s, 0.1s;
   -webkit-transition-timing-function: linear, ease-in;
@@ -84,8 +84,12 @@ footer {
   cursor: pointer;
 }
 
+#torrents li.torrent.compact {
+  height: 42px;
+}
+
 .torrent h3 {
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .torrent.active {
@@ -133,7 +137,11 @@ footer {
 
 .torrent .statusString {
   color: #999;
-  font-size: 14px;
+  font-size: 10px;
+}
+
+.torrent.compact .statusString {
+  display: none;
 }
 
 .torrent .statusString.error {
@@ -145,10 +153,13 @@ footer {
 }
 
 .torrent .progressDetails {
-  display: none;
+  height: 16px;
+  font-size: 10px;
   margin: 0px;
   padding: 0px;
   color: #555;
+  overflow: hidden;
+  width: 90%;
 }
 
 .torrent .progress {
@@ -159,10 +170,15 @@ footer {
 .torrent .name {
   overflow: hidden;
   margin-bottom: 4px;
+  font-size: 14px;
+}
+
+.torrent.compact .name {
+  width: 88%;
 }
 
 #mobile-footer {
-  height: 45px;
+  height: 35px;
   width: auto;
   position: fixed;
   bottom: 0;
@@ -177,30 +193,33 @@ footer {
   padding-right: 2px;
 }
 
-#mobile-footer .globalUpAndDownload {
-  display: inline-block;
-  width: 28%;
-  text-align: right;
-  vertical-align: middle;
-  padding: 4px 0 0 0;
+#mobile-header .globalUpAndDownload {
+  display: block;
+  position: absolute;
+  top: 1.4em;
+  right: 1em;
+  font-size: 11px;
+  font-weight: normal;
+  width: 78px;
+  height: 32px;
+  overflow: hidden;
 }
 
 #mobile-footer .links {
-  display: inline-block;
-  width: 67%;
-  vertical-align: middle;
+  display: block;
+  width: 100%;
   margin: 0;
-  padding: 4px 0 0 0;
+  padding: 2px 0 0 0;
 }
 
 #mobile-footer .links li {
   display: inline-block;
-  margin-right: 0.4em;
+  margin-right: 0.8em;
 }
 
 #mobile-footer .links li a {
-  width: 27px;
-  height: 27px;
+  width: 30px;
+  height: 30px;
   display: block;
   text-indent: -9999px;
 }
@@ -235,14 +254,19 @@ footer {
   background-size: 100%;
 }
 
+#mobile-footer .links li .compact_view {
+  background: transparent url(images/compact_mobile.png) no-repeat 0 0;
+  background-size: 100%;
+}
+
 #mobile-header {
   height: 45px;
   width: auto;
 }
 
 #mobile-header h1 {
   font-size: 16px;
-  margin: 0.9em 0 0 19%;
+  margin: 0.9em 0 0 14%;
 }
 
 #mobile-header h1:before {
@@ -277,7 +301,11 @@ footer {
   border: 0;
   width: 24px;
   height: 24px;
-  margin: 22px 5px 0 0;
+  margin: 26px 8px 0 0;
+}
+
+.torrent.compact .buttons .pauseAndActivateButton {
+  margin-top: 0;
 }
 
 .pauseAndActivateButton.paused, .pauseAndActivateButton.finished {
@@ -302,7 +330,7 @@ footer {
   width: 100% !important;
   padding: 0px;
   margin-top: 60px;
-  margin-bottom: 58px;
+  margin-bottom: 46px;
 }
 
 .main {
@@ -587,7 +615,9 @@ footer {
 }
 
 .ui-progressbar {
-  margin: 4px 4px 4px 0;
+  margin: 6px 4px 4px 0;
+  height: 4px;
+  width: 90%;
 }
 
 #data {

diff --git a/index.html b/index.html
@@ -61,6 +61,7 @@
           <div id="mobile-header" class="ui-header ui-header-fixed ui-bar ui-bar-c">
             <a href="#" class="back">Back</a>
             <h1>Transmission</h1>
+            <div class="globalUpAndDownload"></div>
           </div>
 
           <div class="torrents_container">
@@ -93,9 +94,8 @@ <h1>Transmission</h1>
               <li><a href="#/torrents/new" class="add_a_torrent">Add a Torrent</a></li>
               <li><a href="#/statistics" class="statistics">Statistics</a></li>
               <li><a href="#" class="speed_limit_mode">Enable Speed Limit Mode</a></li>
+              <li><a href="#" class="compact_view" title="Compact View">Enable Compact View</a></li>
           </ul>
-
-          <div class="globalUpAndDownload"></div>
         </div>
       </div>
 
@@ -106,7 +106,7 @@ <h1>Transmission</h1>
       <footer>
         <nav id="footer">
           <ul class="icon_nav">
-            <li><a href="#" id="compact_view" title="Compact View">Enable Compact View</a></li>
+            <li><a href="#" id="compact_view" class="compact_view" title="Compact View">Enable Compact View</a></li>
             <li><a href="#" id="speed_limit_mode" class="speed_limit_mode" title="Speed Limit Mode">Enable Speed Limit Mode</a></li>
             <li><a href="#" id="start_all" class="start_all" title="Start All">Start All</a></li>
             <li><a href="#" id="stop_all" class="stop_all" title="Stop All">Stop All</a></li>

diff --git a/js/helpers/link_helpers.js b/js/helpers/link_helpers.js
@@ -57,11 +57,11 @@ kettu.LinkHelpers = {
     var context = this, redirect_path = '';
 
     if(this.store.get('view_mode') === 'compact') {
-      $('#compact_view').addClass('active');
-      $('#compact_view').text('Disable Compact View');
+      $('.compact_view').addClass('active');
+      $('.compact_view').text('Disable Compact View');
     }
 
-    $('#compact_view').click(function() {
+    $('.compact_view').click(function() {
       if($(this).hasClass('active')) {
         $(this).removeClass('active');
         $(this).text('Enable Compact View');

diff --git a/js/models/torrent.js b/js/models/torrent.js
@@ -166,14 +166,10 @@
       var currentStatus = torrent.statusStringLocalized(torrent.status);
       if(torrent.isActive() && !torrent.needsMetaData()) {
         currentStatus += ' - ';
-        if(kettu.app.mobile) {
-          currentStatus += torrent.etaString();
+        if(torrent.isDoneDownloading()) {
+          currentStatus += torrent.uploadRateString(torrent.rateUpload);
         } else {
-          if(torrent.isDoneDownloading()) {
-            currentStatus += torrent.uploadRateString(torrent.rateUpload);
-          } else {
-            currentStatus += torrent.downAndUploadRateString(torrent.rateDownload, torrent.rateUpload);
-          }
+          currentStatus += torrent.downAndUploadRateString(torrent.rateDownload, torrent.rateUpload);
         }
       } else if (torrent.isFinished()) {
         currentStatus = 'Finished';

diff --git a/js/views/torrents.js b/js/views/torrents.js
@@ -49,7 +49,7 @@ kettu.TorrentsView = function(torrent, context) {
   view.cachePartial = context.cachePartial;
 
   if(kettu.app.mobile) {
-    view.name = context.shorten(view.name, 27);
+    view.name = context.shorten(view.name, 32);
   }
 
   return view;

diff --git a/screenshot-2.png b/screenshot-2.png
diff --git a/spec/index.html b/spec/index.html
@@ -91,8 +91,8 @@ <h1>Transmission</h1>
         <footer>
           <nav id="footer">
             <ul class="icon_nav">
-              <li><a href="#" id="compact_view" title="Compact View">Enable Compact View</a></li>
-              <li><a href="#" id="speed_limit_mode" title="Speed Limit Mode">Enable Speed Limit Mode</a></li>
+              <li><a href="#" id="compact_view" class="compact_view" title="Compact View">Enable Compact View</a></li>
+              <li><a href="#" id="speed_limit_mode" class="speed_limit_mode" title="Speed Limit Mode">Enable Speed Limit Mode</a></li>
               <li><a href="#" id="start_all" class="start_all" title="Start All">Start All</a></li>
               <li><a href="#" id="stop_all" class="stop_all" title="Stop All">Stop All</a></li>
             </ul>

diff --git a/spec/integration/context_menu_spec.js b/spec/integration/context_menu_spec.js
@@ -10,8 +10,8 @@ describe('context menu', function() {
           var data = JSON.parse(window.lastRequest.data);
           expect(data.method).to.eql('torrent-reannounce');
           done();
-        }, 50);
-      }, 50);
+        }, 100);
+      }, 100);
     });
   });
 });
diff --git a/spec/integration/settings_spec.js b/spec/integration/settings_spec.js
@@ -1,11 +1,11 @@
 describe('settings', function() {
   it('lets me toggle the speed limit mode', function(done) {
-    $('#speed_limit_mode').click();
+    $('.speed_limit_mode').click();
     setTimeout(function() {
       var data = JSON.parse(window.lastRequest.data);
       expect(data["arguments"]["alt-speed-enabled"]).to.be(true);
 
-      $('#speed_limit_mode').click();
+      $('.speed_limit_mode').click();
       setTimeout(function() {
         var data = JSON.parse(window.lastRequest.data);
         expect(data["arguments"]["alt-speed-enabled"]).to.be(false);

diff --git a/spec/integration/torrents_spec.js b/spec/integration/torrents_spec.js
@@ -31,10 +31,10 @@ describe('torrents', function() {
 
     kettu.helpers.waitForReload(function() {
       expect($torrents.find('.progressDetails')).to.have.length(1);
-      $('#compact_view').click();
+      $('.compact_view').click();
       setTimeout(function() {
         expect($torrents.find('.progressDetails')).to.have.length(0);
-        $('#compact_view').click();
+        $('.compact_view').click();
         setTimeout(function() {
           expect($torrents.find('.progressDetails')).to.have.length(1);
           done();