WebKitPerfMonitor: Header and number-of-days slider takes up too much space

https://bugs.webkit.org/show_bug.cgi?id=130957

Reviewed by Gyuyoung Kim.

Moved the slider into the header. Also reduced the spacing between the header and platform names.
This reclaims 50px × width of the screen real estate.

* public/common.css:
(#title): Reduced the space below the header from 20px to 10px.
* public/index.html:
(#numberOfDaysPicker): Removed the rounded border around the number-of-days slider.
(#dashboard > tbody > tr > td): Added a 1.5em padding at the bottom.
(#dashboard > thead th): That allows us to remove the padding at the top here. This reduces the wasted screen
real estate between the header and the platform names.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@166477 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
index d71b7c486a9af39183db1565522906ac63ee9c36..af3c65ce3d750aa29e630cd0481f77e473ea2d60 100644 (file)
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -1,3 +1,21 @@
+2014-03-30  Ryosuke Niwa  <rniwa@webkit.org>
+
+        WebKitPerfMonitor: Header and number-of-days slider takes up too much space
+        https://bugs.webkit.org/show_bug.cgi?id=130957
+
+        Reviewed by Gyuyoung Kim.
+
+        Moved the slider into the header. Also reduced the spacing between the header and platform names.
+        This reclaims 50px × width of the screen real estate.
+
+        * public/common.css:
+        (#title): Reduced the space below the header from 20px to 10px.
+        * public/index.html:
+        (#numberOfDaysPicker): Removed the rounded border around the number-of-days slider.
+        (#dashboard > tbody > tr > td): Added a 1.5em padding at the bottom.
+        (#dashboard > thead th): That allows us to remove the padding at the top here. This reduces the wasted screen
+        real estate between the header and the platform names.
+
 2014-03-10  Zoltan Horvath  <zoltan@webkit.org>
 
         Update the install guidelines for perf.webkit.org

diff --git a/Websites/perf.webkit.org/public/common.css b/Websites/perf.webkit.org/public/common.css
index dcb6a24e54677dcdf9499334b1acaa3514622790..676942bb8398241dc7d9cf2a7264bd2231bab0b1 100644 (file)
--- a/Websites/perf.webkit.org/public/common.css
+++ b/Websites/perf.webkit.org/public/common.css
@@ -20,7 +20,7 @@ body {
     -webkit-box-shadow: 1px 1px 3px 1px #ccc;
     box-shadow:         1px 1px 3px 1px #ccc;
     padding: 5px 10px;
-    margin: 0 0 20px 0;
+    margin: 0 0 10px 0;
     border-radius: 5px;
     position: relative;
 }

diff --git a/Websites/perf.webkit.org/public/index.html b/Websites/perf.webkit.org/public/index.html
index 1d322132a0415bd5e86bfa2f710ca434689f93c3..ac6e5705bec372c2708ddc76d642adde5ca872bc 100644 (file)
--- a/Websites/perf.webkit.org/public/index.html
+++ b/Websites/perf.webkit.org/public/index.html
@@ -16,12 +16,7 @@
 <style type="text/css">
 
 #numberOfDaysPicker {
-    display: inline-block;
-    margin: 5px 0px;
-    border: solid 1px #ccc;
     color: #666;
-    border-radius: 5px;
-    padding: 5px 8px;
 }
 
 #numberOfDaysPicker input {
@@ -36,10 +31,10 @@ td, th {
 
 #dashboard > tbody > tr > td {
     vertical-align: top;
+    padding-bottom: 1.5em;
 }
 
 #dashboard > thead th {
-    padding-top: 1.5em;
     text-shadow: #bbb 1px 1px 2px;
     font-size: large;
     font-weight: normal;
@@ -263,20 +258,6 @@ td, th {
     padding: 5px 8px;
 }
 
-#numberOfDaysPicker {
-    display: inline-block;
-    margin: 5px 0px;
-    border: solid 1px #ccc;
-    color: #666;
-    border-radius: 5px;
-    padding: 5px 8px;
-}
-
-#numberOfDaysPicker input {
-    height: 0.9em;
-    margin-right: 1em;
-}
-
 </style>
 <script>
 
@@ -1155,13 +1136,12 @@ window.addEventListener('DOMContentLoaded', init, false);
 <header id="title">
 <h1><a href="/">WebKit Perf Monitor</a></h1>
 <ul>
+    <li id="numberOfDaysPicker"><input id="numberOfDays" type="range" min="1" max="5.9" step="0.001" value="2.3"><span class="output"></span></li>
     <li><a href="javascript:setMode('dashboard');">Dashboard</a></li>
     <li><a href="javascript:setMode('charts');">Charts</a></li>
 </ul>
 </header>
 
-<div id="numberOfDaysPicker"><input id="numberOfDays" type="range" min="1" max="5.9" step="0.001" value="2.3"><span class="output"></span></div>
-
 <div id="mainContents"></div>
 </body>
 </html>