Some mobile UI polish, fixes #4840

Changes.md

@@ -7,6 +7,7 @@ HEAD
 
 - Store Redis RTT and log if poor [#4824]
 - Add process/thread stats to Busy page [#4806]
+- Improve Web UI on mobile devices [#4840]
 - Refactor Web UI session usage. [#4804]
   Numerous people have hit "Forbidden" errors and struggled with Sidekiq's
   Web UI session requirement. If you have code in your initializer for

lib/sidekiq/web.rb

@@ -14,7 +14,7 @@
 
 require "rack/content_length"
 require "rack/builder"
-require "rack/file"
+require "rack/static"
 
 module Sidekiq
   class Web
@@ -144,12 +144,12 @@ def build
       m = middlewares
 
       ::Rack::Builder.new do
-        %w[stylesheets javascripts images].each do |asset_dir|
-          map "/#{asset_dir}" do
-            run ::Rack::File.new("#{ASSETS}/#{asset_dir}", {"Cache-Control" => "public, max-age=86400"})
-          end
-        end
-
+        use Rack::Static, :urls => ["/stylesheets", "/images", "/javascripts"],
+                          :root => ASSETS,
+                          :cascade => true,
+                          :header_rules => [
+                            [:all, {'Cache-Control' => 'public, max-age=86400'}],
+                          ]
         m.each { |middleware, block| use(*middleware, &block) }
         use Sidekiq::Web::CsrfProtection unless $TESTING
         run WebApplication.new(klass)

lib/sidekiq/web/helpers.rb

@@ -266,7 +266,7 @@ def retry_extra_items(retry_job)
     end
 
     def format_memory(rss_kb)
-      return "" if rss_kb.nil? || rss_kb == 0
+      return "0" if rss_kb.nil? || rss_kb == 0
 
       if rss_kb < 100_000
         "#{number_with_delimiter(rss_kb)} KB"

web/assets/stylesheets/application.css

@@ -127,6 +127,10 @@ header.row .pagination {
   width: 14%;
 }
 @media (max-width: 767px) and (min-width: 200px) {
+  .summary_bar {
+    font-size: 1.5em;
+  }
+
   .summary_bar ul li {
     width: 100%;
   }
@@ -438,7 +442,7 @@ img.smallogo {
     margin: 5px 10px 5px 5px;
   }
   .stat p{
-    font-size: 1em;
+    font-size: 1.5em;
     margin: 5px 5px 5px 10px;
   }
 }

web/views/layout.erb

@@ -16,6 +16,7 @@
     <link href="<%= root_path %>stylesheets/application-rtl.css" media="screen" rel="stylesheet" type="text/css" />
     <% end %>
 
+    <link rel="apple-touch-icon" href="<%= root_path %>images/apple-touch-icon.png">
     <link rel="shortcut icon" type="image/ico" href="<%= root_path %>images/favicon.ico" />
     <script type="text/javascript" src="<%= root_path %>javascripts/application.js"></script>
     <meta name="google" content="notranslate" />