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
+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
-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;
}
<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 {
#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;
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>
<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>