Skip to content

GitLab

T
tangled
Commit c7b66ffb authored by eseidel@chromium.org's avatar eseidel@chromium.org
Browse files
Options

Make Garden-o-matic at least readable on mobile devices 

It still doesn't work very well, but you can at least check the
status of the tree and sorta navigate around.

BUG=354543

Review URL: https://codereview.chromium.org/201853004

git-svn-id: svn://svn.chromium.org/blink/trunk@169710 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 743ec6e7
Hide whitespace changes
Inline Side-by-side
Showing with 67 additions and 39 deletions
third_party/WebKit/Tools/GardeningServer/garden-o-matic.html
View file @ c7b66ffb
......@@ -51,6 +51,7 @@ James, a web developer from Birmingham, UK.
<link rel="stylesheet" href="styles/results.css">
<link rel="stylesheet" href="styles/notifications.css">
<link rel="stylesheet" href="styles/pixelzoomer.css">
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
......
third_party/WebKit/Tools/GardeningServer/scripts/ui/results.js
View file @ c7b66ffb
......@@ -30,13 +30,13 @@ ui.results = ui.results || {};
var kResultsPrefetchDelayMS = 500;
// FIXME: Rather than using table, should we be using something fancier?
ui.results.Comparison = base.extends('table', {
ui.results.Comparison = base.extends('div', {
init: function()
{
this.className = 'comparison';
this.innerHTML = '<thead><tr><th>Expected</th><th>Actual</th><th>Diff</th></tr></thead>' +
'<tbody><tr><td class="expected result-container"></td><td class="actual result-container"></td><td class="diff result-container"></td></tr></tbody>';
this.innerHTML = '<div><h2>Expected</h2><div class="results-container expected"></div></div>' +
'<div><h2>Actual</h2><div class="results-container actual"></div></div>' +
'<div><h2>Diff</h2><div class="results-container diff"></div></div>';
},
_selectorForKind: function(kind)
{
......
third_party/WebKit/Tools/GardeningServer/styles/common.css
View file @ c7b66ffb
......@@ -70,6 +70,7 @@ button[disabled] {
visibility: hidden;
}
/* FIXME: This hover effect can't work on mobile. */
button:hover {
background-image: linear-gradient(#f8f8f8, #f1f1f1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
......@@ -91,6 +92,7 @@ button.default {
background-image: linear-gradient(#4d90fe, #4787ed);
}
/* FIXME: This hover effect can't work on mobile. */
button.default:hover {
border: 1px solid #2f5bb7;
color: white;
......
third_party/WebKit/Tools/GardeningServer/styles/failures.css
View file @ c7b66ffb
......@@ -37,23 +37,23 @@ a.failing-builder {
text-decoration: none;
}
a.failing-builder>span.version {
a.failing-builder > span.version {
text-transform: uppercase;
background-color: #555;
color: White;
padding: 0 2px;
}
a.failing-builder>span.architecture {
a.failing-builder > span.architecture {
padding: 0 2px;
}
.effects a.failing-builder>span.architecture {
.effects a.failing-builder > span.architecture {
background-color: #555;
color: White;
}
a.failing-builder>span.graphics {
a.failing-builder > span.graphics {
padding: 0 2px;
}
......@@ -62,20 +62,21 @@ ul.failures {
padding: 0px;
}
ul.failures>li {
ul.failures > li {
display: -webkit-box;
position: relative;
}
ul.failures>li label {
ul.failures > li label {
margin-left: 10px;
}
ul.failures>li ul.actions {
ul.failures > li ul.actions {
padding: 0px;
visibility: hidden;
}
ul.failures>li:hover ul.actions {
/* FIXME: This hover effect can't work on mobile. */
ul.failures > li:hover ul.actions {
visibility: visible;
}
third_party/WebKit/Tools/GardeningServer/styles/main.css
View file @ c7b66ffb
......@@ -83,6 +83,7 @@ button[disabled] {
visibility: hidden;
}
/* FIXME: This hover effect can't work on mobile. */
button:hover {
background-image: linear-gradient(#f8f8f8, #f1f1f1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
......@@ -104,6 +105,7 @@ button.default {
background-image: linear-gradient(#4d90fe, #4787ed);
}
/* FIXME: This hover effect can't work on mobile. */
button.default:hover {
border: 1px solid #2f5bb7;
color: white;
......
third_party/WebKit/Tools/GardeningServer/styles/notifications.css
View file @ c7b66ffb
......@@ -24,7 +24,7 @@
*/
/* FIXME: This should really be in actions.css. */
ul.actions>li {
ul.actions > li {
display: inline-block;
}
......@@ -39,8 +39,9 @@ ol.notifications ul {
padding: 0;
}
ol.notifications>li {
display: -webkit-box;
ol.notifications > li {
display: flex;
flex-wrap: wrap;
position: relative;
width: 100%;
padding: 10px;
......@@ -62,15 +63,15 @@ ol.notifications div.what {
display: -webkit-box;
-webkit-box-orient: vertical;
padding: 0 0 0 10px;
-webkit-box-flex: 1;
flex: 1;
}
ol.notifications>li div.what ul.effects>li.builder {
ol.notifications > li div.what ul.effects > li.builder {
display: inline;
padding-right: 5px;
}
ol.notifications ul.causes>li, ol.notifications div.problem {
ol.notifications ul.causes > li, ol.notifications div.problem {
display: -webkit-box;
}
......@@ -78,48 +79,48 @@ ol.notifications ul.causes div.description, ol.notifications div.problem ul.effe
-webkit-box-flex: 1;
}
ol.notifications>li div.problem {
ol.notifications > li div.problem {
padding-bottom: 10px;
}
ol.notifications>li div.problem>ul.actions {
ol.notifications > li div.problem > ul.actions {
visibility: hidden;
}
ol.notifications>li:hover div.problem>ul.actions {
ol.notifications > li:hover div.problem > ul.actions {
visibility: visible;
}
ol.notifications>li table.failures {
ol.notifications > li table.failures {
opacity: 0.2;
-webkit-transition: opacity 0.5s;
}
ol.notifications>li:hover table.failures {
ol.notifications > li:hover table.failures {
opacity: 1;
}
ol.notifications>li ul.causes>li>ul.actions {
ol.notifications > li ul.causes > li > ul.actions {
}
ol.notifications>li ul.causes>li>div.description {
ol.notifications > li ul.causes > li > div.description {
padding: 0 10px 5px 0;
display: -webkit-box;
}
ol.notifications>li ul.causes>li>div.description>a {
ol.notifications > li ul.causes > li > div.description > a {
padding: 5px 10px 5px 10px;
margin: -5px 10px -2px 0;
border-radius: 4px;
display: inline-block;
}
ol.notifications>li ul.causes>li:hover>div.description>a {
ol.notifications > li ul.causes > li:hover > div.description > a {
background-color: #555;
color: White;
}
ol.notifications>li ul.causes>li:hover>div.description>a::after {
ol.notifications > li ul.causes > li:hover > div.description > a::after {
content: '';
width: 0;
height: 0;
......@@ -131,7 +132,7 @@ ol.notifications>li ul.causes>li>ul.actions {
border-bottom: 5px solid White;
}
ol.notifications>li ul.causes>li>div.description>span {
ol.notifications > li ul.causes > li > div.description > span {
padding: 0 10px 0 0;
display: block;
cursor: default;
......@@ -139,46 +140,46 @@ ol.notifications>li ul.causes>li>ul.actions {
-webkit-box-flex: 1;
}
ol.notifications>li ul.causes>li>div.description>span>span.author {
ol.notifications > li ul.causes > li > div.description > span > span.author {
padding: 0 0 0 5px;
font-style: italic;
}
ol.notifications>li ul.causes>li>div.description>span>span.reviewer {
ol.notifications > li ul.causes > li > div.description > span > span.reviewer {
color: Gray;
}
ol.notifications>li ul.causes>li>div.description>span>span.bugID::before {
ol.notifications > li ul.causes > li > div.description > span > span.bugID::before {
content: '[bug ';
padding-left: 8px;
}
ol.notifications>li ul.causes>li>div.description>span>span.bugID::after {
ol.notifications > li ul.causes > li > div.description > span > span.bugID::after {
content: ']';
}
ol.notifications>li ul.causes>li>div.description>span>span.bugID>a {
ol.notifications > li ul.causes > li > div.description > span > span.bugID > a {
cursor: hand;
pointer-events: auto;
}
ol.notifications>li ul.causes>li>div.description>span>span.reviewer::before {
ol.notifications > li ul.causes > li > div.description > span > span.reviewer::before {
content: ' (';
}
ol.notifications>li ul.causes>li>div.description>span>span.reviewer::after {
ol.notifications > li ul.causes > li > div.description > span > span.reviewer::after {
content: ')';
}
ol.notifications>li ul.causes>li>ul.actions {
ol.notifications > li ul.causes > li > ul.actions {
visibility: hidden;
}
ol.notifications>li ul.causes>li:hover>ul.actions {
ol.notifications > li ul.causes > li:hover > ul.actions {
visibility: visible;
}
ol.notifications>li ul.causes>li li {
ol.notifications > li ul.causes > li li {
padding: 10px 0 0 0;
display: inline;
}
......
third_party/WebKit/Tools/GardeningServer/styles/onebar.css
View file @ c7b66ffb
......@@ -79,6 +79,12 @@
padding-right: 4px;
}
/* This checkbox just overlaps the main content on smalls screens and doesn't
make a lot of sense as currently designed.*/
@media only screen and (max-width: 400px) {
#link-handling { display: none; }
}
#new-window-for-links {
vertical-align: text-bottom;
}
......
third_party/WebKit/Tools/GardeningServer/styles/results.css
View file @ c7b66ffb
......@@ -23,6 +23,21 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
.comparison {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.comparison > div {
flex: 1;
min-width: 300px;
}
.results-container {
border: 1px solid gray;
}
.non-action-button, .results-view ul.actions, .ui-dialog ul.actions {
float: right;
margin: 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment