Bug 1202476 - Move remaining userguide css, naming and indent

This commit is contained in:
Jonathan French 2015-09-07 16:03:01 -04:00
Родитель af0ae5e926
Коммит 13ff0a9ee3
3 изменённых файлов: 531 добавлений и 491 удалений

Просмотреть файл

@ -1,4 +1,21 @@
.help-btn-sm tr > th > button { #userguide {
padding: 10px 10px 0px;
overflow: auto;
}
#userguide.dt, #userguide.dd {
text-align: center;
}
#userguide.panel {
padding: 5px;
}
/*
* Job notation table
*/
.ug-btn-sm tr > th > button {
font-size: 13px; font-size: 13px;
padding: 0px 2px; padding: 0px 2px;
margin-top: 1px; margin-top: 1px;
@ -9,54 +26,66 @@
background: #fff; background: #fff;
} }
.help-btn-sm tr > th > button:focus { .ug-btn-sm tr > th > button:focus {
outline: 0; outline: 0;
} }
.help-btn-desc tr > td { .ug-btn-desc tr > td {
vertical-align: bottom; vertical-align: bottom;
} }
.help-btn { .ug-btn {
margin: 2px; margin: 2px;
border: 2px solid; border: 2px solid;
} }
.help-btn-comment { .ug-btn-comment {
border: none; border: none;
background-color: #fff; background-color: #fff;
} }
.help-btn-orange { .ug-btn-orange {
border-color: #dd6602; border-color: #dd6602;
} }
.help-btn-purple { .ug-btn-purple {
border-color: #6f0296; border-color: #6f0296;
} }
.help-btn-red { .ug-btn-red {
border-color: #a1020e; border-color: #a1020e;
} }
.help-btn-yellow { .ug-btn-yellow {
border-color: #fbd890; border-color: #fbd890;
} }
.help-btn-bg { .ug-btn-bg {
background-color: #fff; background-color: #fff;
} }
#help-job-name { /*
* Copy values on hover
*/
#ug-job-name {
color: #428bca; color: #428bca;
} }
#help-raw-log-icon { #ug-raw-log-icon {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
} }
#help-logviewer-icon { #ug-logviewer-icon {
vertical-align: text-bottom; vertical-align: text-bottom;
width: 15px; width: 15px;
} }
/*
* Footer
*/
.ug-footer {
overflow: auto;
}

Просмотреть файл

@ -1710,23 +1710,6 @@ fieldset[disabled] .btn-repo.active {
color: gray; color: gray;
} }
#userguide {
padding: 10px 10px 0px;
overflow: auto;
}
#userguide.dt, #userguide.dd {
text-align: center;
}
#userguide.panel {
padding: 5px;
}
.userguide-footer {
overflow: auto;
}
/* Used in Help but for general use */ /* Used in Help but for general use */
.kbd { .kbd {
display: inline-block; display: inline-block;

Просмотреть файл

@ -11,24 +11,32 @@
<!-- endbuild --> <!-- endbuild -->
<link id="favicon" type="image/png" rel="shortcut icon" href="img/tree_open.png"> <link id="favicon" type="image/png" rel="shortcut icon" href="img/tree_open.png">
</head> </head>
<body id="userguide">
<div class="panel panel-default">
<div class="panel-heading">
<h1>Treeherder User Guide</h1>
<h5> <body id="userguide">
Want to contribute? <!-- Content panel -->
<a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tree+Management&amp;component=Treeherder">File a bug</a> / <div class="panel panel-default">
<a href="https://github.com/mozilla/treeherder">Source</a> / <!-- Header -->
<a href="https://wiki.mozilla.org/Auto-tools/Projects/Treeherder#Contributing">Contributing</a> <div class="panel-heading">
<h1>Treeherder User Guide</h1>
<h5>Want to contribute?
<a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tree+Management&amp;component=Treeherder">
File a bug</a> /
<a href="https://github.com/mozilla/treeherder">
Source</a> /
<a href="https://wiki.mozilla.org/Auto-tools/Projects/Treeherder#Contributing">
Contributing</a>
</h5> </h5>
For anything else visit our For anything else visit our
<a href="https://wiki.mozilla.org/Auto-tools/Projects/Treeherder">Project Wiki</a> <a href="https://wiki.mozilla.org/Auto-tools/Projects/Treeherder">
Project Wiki</a>
or ask us on IRC in or ask us on IRC in
<a href="irc://irc.mozilla.org/treeherder">#treeherder</a> <a href="irc://irc.mozilla.org/treeherder">#treeherder</a>
</div> </div>
<div class="panel-body">
<div class="row"> <!-- Start of interior panels -->
<div class="panel-body">
<div class="row">
<!-- Job Notation table -->
<div class="col-xs-6"> <div class="col-xs-6">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
@ -38,91 +46,92 @@
<table id="legend-other"> <table id="legend-other">
<tr> <tr>
<th> <th>
<button class="btn btn-green help-btn help-btn-comment">+n</button> <button class="btn btn-green ug-btn ug-btn-comment">+n</button>
</th> </th>
<td>Collapsed job count</td> <td>Collapsed job count</td>
</tr> </tr>
<tr> <tr>
<th> <th>
<button class="btn btn-dkgray help-btn help-btn-comment">Th( )</button> <button class="btn btn-dkgray ug-btn ug-btn-comment">Th( )</button>
</th> </th>
<td>Wrapped job group</td> <td>Wrapped job group</td>
</tr> </tr>
<tr> <tr>
<th> <th>
<button class="btn btn-orange-classified help-btn help-btn-comment">Th</button> <button class="btn btn-orange-classified ug-btn ug-btn-comment">Th</button>
</th> </th>
<td>Asterisk, classified</td> <td>Asterisk, classified</td>
</tr> </tr>
<tr> <tr>
<th> <th>
<button class="btn btn-ltgray help-btn help-btn-bg">Th</button> <button class="btn btn-ltgray ug-btn ug-btn-bg">Th</button>
</th> </th>
<td>Light gray, pending</td> <td>Light gray, pending</td>
</tr> </tr>
<tr> <tr>
<th> <th>
<button class="btn btn-dkgray help-btn help-btn-bg">Th</button> <button class="btn btn-dkgray ug-btn ug-btn-bg">Th</button>
</th> </th>
<td>Gray, running</td> <td>Gray, running</td>
</tr> </tr>
<tr> <tr>
<th> <th>
<button class="btn btn-green help-btn help-btn-bg">Th</button> <button class="btn btn-green ug-btn ug-btn-bg">Th</button>
</th> </th>
<td>Green, success</td> <td>Green, success</td>
</tr> </tr>
<tr> <tr>
<th> <th>
<button class="btn btn-orange help-btn help-btn-orange">Th</button> <button class="btn btn-orange ug-btn ug-btn-orange">Th</button>
</th> </th>
<td>Orange, tests failed</td> <td>Orange, tests failed</td>
</tr> </tr>
<tr> <tr>
<th> <th>
<button class="btn btn-purple help-btn help-btn-purple">Th</button> <button class="btn btn-purple ug-btn ug-btn-purple">Th</button>
</th> </th>
<td>Purple, infrastructure exception</td> <td>Purple, infrastructure exception</td>
</tr> </tr>
<tr> <tr>
<th> <th>
<button class="btn btn-red help-btn help-btn-red">Th</button> <button class="btn btn-red ug-btn ug-btn-red">Th</button>
</th> </th>
<td>Red, build error</td> <td>Red, build error</td>
</tr> </tr>
<tr> <tr>
<th> <th>
<button class="btn btn-dkblue help-btn help-btn-bg">Th</button> <button class="btn btn-dkblue ug-btn ug-btn-bg">Th</button>
</th> </th>
<td>Dark blue, build restarted</td> <td>Dark blue, build restarted</td>
</tr> </tr>
<tr> <tr>
<th> <th>
<button class="btn btn-pink help-btn help-btn-bg">Th</button> <button class="btn btn-pink ug-btn ug-btn-bg">Th</button>
</th> </th>
<td>Pink, build cancelled</td> <td>Pink, build cancelled</td>
</tr> </tr>
<tr> <tr>
<th> <th>
<button class="btn btn-yellow help-btn help-btn-yellow">Th</button> <button class="btn btn-yellow ug-btn ug-btn-yellow">Th</button>
</th> </th>
<td>Yellow, unknown</td> <td>Yellow, unknown</td>
</tr> </tr>
<tr> <tr>
<th class="coalesced"> <th class="coalesced">
<button class="btn btn-ltblue help-btn help-btn-bg">Th</button> <button class="btn btn-ltblue ug-btn ug-btn-bg">Th</button>
</th> </th>
<td>Light blue, coalesced</td> <td>Light blue, coalesced</td>
</tr> </tr>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<!-- Shortcuts table -->
<div class="col-xs-6"> <div class="col-xs-6">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"><h3>Keyboard shortcuts</h3></div> <div class="panel-heading">
<h3>Keyboard shortcuts</h3></div>
<div class="panel-body panel-spacing"> <div class="panel-body panel-spacing">
<table id="shortcuts"> <table id="shortcuts">
<tr><td class="kbd">esc</td> <tr><td class="kbd">esc</td>
@ -169,38 +178,44 @@
<td>Show only unclassified failures</td></tr> <td>Show only unclassified failures</td></tr>
</table> </table>
</div> </div>
<!-- Copy values on hover table -->
<div class="panel-heading"><h3>Copy values on hover</h3></div> <div class="panel-heading"><h3>Copy values on hover</h3></div>
<div class="panel-body panel-spacing"> <div class="panel-body panel-spacing">
<table id="shortcuts"> <table id="shortcuts">
<tr> <tr>
<td><span class="kbd">ctrl/cmd</span>+<span class="kbd">c</td> <td><span class="kbd">ctrl/cmd</span>+<span class="kbd">c</td>
<td>Copy job details <td>Copy job details
<img src="./img/logviewerIconHelp.svg" id="help-logviewer-icon"> <img src="./img/logviewerIconHelp.svg" id="ug-logviewer-icon">
</span> logviewer url on hover</td> </span> logviewer url on hover</td>
</tr> </tr>
<tr> <tr>
<td><span class="kbd">ctrl/cmd</span>+<span class="kbd">c</td> <td><span class="kbd">ctrl/cmd</span>+<span class="kbd">c</td>
<td>Copy job details <td>Copy job details
<span id="help-raw-log-icon" class="fa fa-file-text-o"> <span id="ug-raw-log-icon" class="fa fa-file-text-o">
</span> raw log url on hover</td> </span> raw log url on hover</td>
</tr> </tr>
<tr> <tr>
<td><span class="kbd">ctrl/cmd</span>+<span class="kbd">c</td> <td><span class="kbd">ctrl/cmd</span>+<span class="kbd">c</td>
<td>Copy job details <span class="small"><label>Job:</label> <td>Copy job details <span class="small"><label>Job:</label>
<span id="help-job-name">name</span></span> as raw text on hover <span id="ug-job-name">name</span></span> as raw text on hover
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="row">
<!-- Builds table -->
<div class="col-xs-6">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"><h3>Builds</h3></div> <div class="panel-heading">
<h3>Builds</h3>
</div>
<div class="panel-body panel-spacing"> <div class="panel-body panel-spacing">
<table id="legend-builds" class="help-btn-sm help-btn-desc"> <table id="legend-builds" class="ug-btn-sm ug-btn-desc">
<tr><th><button>B</button></th> <tr><th><button>B</button></th>
<td>Build</td></tr> <td>Build</td></tr>
<tr><th><button>Bn</button></th> <tr><th><button>Bn</button></th>
@ -418,14 +433,16 @@
</table> </table>
</div> </div>
</div> </div>
</div>
<!-- Tests table -->
</div> <div class="col-xs-6">
<div class="col-xs-6">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"><h3>Tests</h3></div> <div class="panel-heading">
<h3>Tests</h3>
</div>
<div class="panel-body panel-spacing"> <div class="panel-body panel-spacing">
<table id="legend-tests" class="help-btn-sm help-btn-desc"> <table id="legend-tests" class="ug-btn-sm ug-btn-desc">
<tr><th><button>Mb</button></th> <tr><th><button>Mb</button></th>
<td>Mozbase Unit Tests</td></tr> <td>Mozbase Unit Tests</td></tr>
<tr><th><button>M</button></th> <tr><th><button>M</button></th>
@ -567,10 +584,16 @@
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-12"> </div>
<!-- Query string params -->
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"><h3>URL Query String Parameters</h3></div> <div class="panel-heading">
<h3>URL Query String Parameters</h3>
</div>
<div class="panel-body panel-spacing"> <div class="panel-body panel-spacing">
<table id="queryparams"> <table id="queryparams">
<tr> <tr>
@ -601,10 +624,14 @@
</table> </table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="panel-footer userguide-footer"> <!-- End of interior panels -->
</div>
<!-- Credits and Whats Deployed -->
<div class="panel-footer ug-footer">
<div class="col-xs-6"> <div class="col-xs-6">
<div>Some icons by <div>Some icons by
<a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.freepik.com" title="Freepik">Freepik</a> from
@ -617,8 +644,9 @@
<a class="midgray pull-right" <a class="midgray pull-right"
href="https://whatsdeployed.paas.allizom.org/?owner=mozilla&amp;repo=treeherder&amp;name[]=Heroku-prototype&amp;url[]=https://treeherder-heroku.herokuapp.com/revision.txt&amp;name[]=Stage&amp;url[]=https://treeherder.allizom.org/revision.txt&amp;name[]=Prod&amp;url[]=https://treeherder.mozilla.org/revision.txt">What's Deployed?</a> href="https://whatsdeployed.paas.allizom.org/?owner=mozilla&amp;repo=treeherder&amp;name[]=Heroku-prototype&amp;url[]=https://treeherder-heroku.herokuapp.com/revision.txt&amp;name[]=Stage&amp;url[]=https://treeherder.allizom.org/revision.txt&amp;name[]=Prod&amp;url[]=https://treeherder.mozilla.org/revision.txt">What's Deployed?</a>
</div> </div>
</div> </div>
</div> <!-- End of content panel -->
</div>
</body> </body>
</html> </html>