Write some cool XSLT + CSS with teh new grid! :D
This commit is contained in:
parent
9bd4845ad9
commit
066fe36a78
GPG Key ID:
1BE5172E637709C2
|
|
@ -97,15 +97,18 @@ class Report extends \Sandpiper\AbstractAction
|
|||
$writer = new SimpleXmlWriter();
|
||||
$writer->prettyprint = true;
|
||||
|
||||
$writer->add_xslt("/theme/place_index.xslt");
|
||||
$writer->open("errors");
|
||||
$writer->add_xslt("/theme/error_index.xslt");
|
||||
$writer->open("errors_index");
|
||||
$writer->addtag("project_name", [], $place["name"]);
|
||||
$writer->open("error_list");
|
||||
$writer->close();
|
||||
$writer->close();
|
||||
file_put_contents($place_index_filename, $writer->render());
|
||||
}
|
||||
$index_xml = simplexml_load_file($place_index_filename);
|
||||
|
||||
$index_entry = null;
|
||||
foreach($index_xml as $entry) {
|
||||
foreach($index_xml->error_list as $entry) {
|
||||
if($entry->summary->__toString() != $new_report->summary)
|
||||
continue;
|
||||
$index_entry = $entry;
|
||||
|
|
@ -113,9 +116,10 @@ class Report extends \Sandpiper\AbstractAction
|
|||
}
|
||||
|
||||
if($index_entry == null) {
|
||||
$index_entry = $index_xml->addChild("error");
|
||||
$index_entry = $index_xml->error_list->addChild("error");
|
||||
$index_entry->summary = $new_report->summary;
|
||||
$index_entry->last_report = date(DATE_ATOM);
|
||||
$index_entry->filename = basename($report_filename);
|
||||
$index_entry->report_count = 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
||||
<xsl:output method="html" encoding="utf-8" indent="yes" />
|
||||
<xsl:template match="/">
|
||||
<!-- <xsl:text disable-output-escaping="yes"><!DOCTYPE html></xsl:text> -->
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title><xsl:value-of select="/errors_index/project_name" /> - Sandpiper</title>
|
||||
<link rel="stylesheet" href="/theme/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Sandpiper - <xsl:value-of select="/errors_index/project_name" /></h1>
|
||||
<div class="project-list">
|
||||
<div class="project-list-header">
|
||||
<span>Error</span>
|
||||
<span>Last Updated</span>
|
||||
<span>Reports</span>
|
||||
</div>
|
||||
|
||||
<xsl:for-each select="/errors_index/error_list/error">
|
||||
<a>
|
||||
<xsl:attribute name="href"><xsl:value-of select="filename" /></xsl:attribute>
|
||||
<span class="summary">
|
||||
<xsl:value-of select="summary" />
|
||||
</span>
|
||||
<time class="last-updated">
|
||||
<xsl:value-of select="last_report" />
|
||||
</time>
|
||||
<span class="reports-count">
|
||||
<span><xsl:value-of select="report_count" /></span>
|
||||
</span>
|
||||
</a>
|
||||
</xsl:for-each>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</xsl:template>
|
||||
</xsl:transform>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
html, body { font-size: 100%; }
|
||||
body
|
||||
{
|
||||
font-family: sans-serif;
|
||||
|
||||
background: hsl(52, 75%, 50%);
|
||||
color: hsl(232, 76%, 35%);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: [side-right] 10em [main] auto [side-right] 10em;
|
||||
grid-template-rows: [header] 4em [sub-header] 4em [main] auto;
|
||||
grid-template-areas: ". header ."
|
||||
". header "
|
||||
". content .";
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
grid-column-start: main;
|
||||
grid-row: header / span 2;
|
||||
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
h2 ~ h1 { grid-row: header / span 1; }
|
||||
|
||||
h2 {
|
||||
grid-column-start: main;
|
||||
grid-row-start: sub-header;
|
||||
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/*****************************************************************************/
|
||||
|
||||
.project-list
|
||||
{
|
||||
grid-column-start: main;
|
||||
grid-row-start: main;
|
||||
|
||||
display: table;
|
||||
|
||||
margin: 0; padding: 0.5em 2em 1em 2em;
|
||||
list-style-type: none;
|
||||
|
||||
background: hsla(22, 76%, 50%, 0.68);
|
||||
}
|
||||
|
||||
.project-list-header > span {
|
||||
display: table-cell;
|
||||
|
||||
margin: 0.25em 0;
|
||||
padding: 1em 0 1.5em 0;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.project-list > a, .project-list > div {
|
||||
display: table-row;
|
||||
}
|
||||
.project-list > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.project-list > a > span {
|
||||
display: table-cell;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.project-list .summary {
|
||||
width: auto;
|
||||
}
|
||||
.project-list .last-updated {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.project-list .reports-count {
|
||||
width: 3em;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.reports-count > span {
|
||||
display: inline-block;
|
||||
|
||||
min-width: 1.25em; line-height: 1.25em;
|
||||
padding: 0.25em;
|
||||
|
||||
text-align: center;
|
||||
|
||||
border-radius: 50%;
|
||||
background: hsla(232, 76%, 50%, 0.4);
|
||||
}
|
||||
|
||||
/*****************************************************************************/
|
||||
|
||||
.report-list {
|
||||
grid-column-start: main;
|
||||
grid-row-start: main;
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.report {
|
||||
--padding-vertical: 0.25em;
|
||||
--padding-horizontal: 1em;
|
||||
|
||||
background: hsl(202, 76%, 50%);
|
||||
margin: 1em 0;
|
||||
padding: var(--padding-vertical) 0;
|
||||
}
|
||||
.report > div:first-child {
|
||||
font-weight: bold;
|
||||
padding: var(--padding-vertical) var(--padding-horizontal);
|
||||
}
|
||||
.report .version { float: right; }
|
||||
.report > pre {
|
||||
background: #efefef;
|
||||
padding: var(--padding-vertical) var(--padding-horizontal);
|
||||
}
|
||||
|
||||
/*
|
||||
* rgb(226,105,34)
|
||||
* rgb(226,201,34)
|
||||
* rgb(155,226,34)
|
||||
* rgb(34,59,226)
|
||||
*
|
||||
* rgb(105,34,226)
|
||||
* rgb(34,155,226)
|
||||
*/
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<xsl:transform version="1.0" xmlns:xsl="http://w3.org/1999/XSL/Transform">
|
||||
<xsl:template match="/">
|
||||
|
||||
</xsl:template>
|
||||
</xsl:transform>
|
||||
|
|
@ -1,6 +1,49 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<xsl:transform version="1.0" xmlns:xsl="http://w3.org/1999/XSL/Transform">
|
||||
<xsl:template match="/">
|
||||
|
||||
</xsl:template>
|
||||
<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
||||
<xsl:output method="html" encoding="utf-8" indent="yes" />
|
||||
<xsl:template match="/">
|
||||
<!-- <xsl:text disable-output-escaping="yes"><!DOCTYPE html></xsl:text> -->
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title><xsl:value-of select="/error_info/summary" /> - <xsl:value-of select="/error_info/project_name" /> - Sandpiper</title>
|
||||
<link rel="stylesheet" href="/theme/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- HACK: We need to shrink the area that the h1 takes
|
||||
up if there's a h2 present, so since we're using the CSS3
|
||||
grid, we can put the h2 first in order to hit the h1
|
||||
as you can't select on the other way around. -->
|
||||
<!-- FUTURE: Use a <header /> here instead? -->
|
||||
<h2><xsl:value-of select="/error_info/summary" /></h2>
|
||||
<h1>Sandpiper - <xsl:value-of select="/error_info/project_name" /></h1>
|
||||
|
||||
<div class="report-list">
|
||||
|
||||
<xsl:for-each select="/error_info/reports/report">
|
||||
<xsl:sort select="position()" data-type="number" order="descending"/>
|
||||
|
||||
<div class="report">
|
||||
<div>
|
||||
<time>
|
||||
<xsl:value-of select="timestamp" />
|
||||
</time>
|
||||
<span class="version">
|
||||
<xsl:value-of select="version" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="details">
|
||||
<xsl:value-of select="details" />
|
||||
</div>
|
||||
<pre class="details"><code>
|
||||
<xsl:value-of select="stack_trace" />
|
||||
</code></pre>
|
||||
</div>
|
||||
</xsl:for-each>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</xsl:template>
|
||||
</xsl:transform>
|
||||
|
|
|
|||
Reference in New Issue