Write some cool XSLT + CSS with teh new grid! :D
This commit is contained in:
parent
9bd4845ad9
commit
066fe36a78
GPG key ID:
1BE5172E637709C2
5 changed files with 230 additions and 14 deletions
|
|
@ -97,15 +97,18 @@ class Report extends \Sandpiper\AbstractAction
|
||||||
$writer = new SimpleXmlWriter();
|
$writer = new SimpleXmlWriter();
|
||||||
$writer->prettyprint = true;
|
$writer->prettyprint = true;
|
||||||
|
|
||||||
$writer->add_xslt("/theme/place_index.xslt");
|
$writer->add_xslt("/theme/error_index.xslt");
|
||||||
$writer->open("errors");
|
$writer->open("errors_index");
|
||||||
|
$writer->addtag("project_name", [], $place["name"]);
|
||||||
|
$writer->open("error_list");
|
||||||
|
$writer->close();
|
||||||
$writer->close();
|
$writer->close();
|
||||||
file_put_contents($place_index_filename, $writer->render());
|
file_put_contents($place_index_filename, $writer->render());
|
||||||
}
|
}
|
||||||
$index_xml = simplexml_load_file($place_index_filename);
|
$index_xml = simplexml_load_file($place_index_filename);
|
||||||
|
|
||||||
$index_entry = null;
|
$index_entry = null;
|
||||||
foreach($index_xml as $entry) {
|
foreach($index_xml->error_list as $entry) {
|
||||||
if($entry->summary->__toString() != $new_report->summary)
|
if($entry->summary->__toString() != $new_report->summary)
|
||||||
continue;
|
continue;
|
||||||
$index_entry = $entry;
|
$index_entry = $entry;
|
||||||
|
|
@ -113,9 +116,10 @@ class Report extends \Sandpiper\AbstractAction
|
||||||
}
|
}
|
||||||
|
|
||||||
if($index_entry == null) {
|
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->summary = $new_report->summary;
|
||||||
$index_entry->last_report = date(DATE_ATOM);
|
$index_entry->last_report = date(DATE_ATOM);
|
||||||
|
$index_entry->filename = basename($report_filename);
|
||||||
$index_entry->report_count = 0;
|
$index_entry->report_count = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
40
theme/error_index.xslt
Normal file
40
theme/error_index.xslt
Normal file
|
|
@ -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>
|
||||||
135
theme/main.css
Normal file
135
theme/main.css
Normal file
|
|
@ -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"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<xsl:transform version="1.0" xmlns:xsl="http://w3.org/1999/XSL/Transform">
|
<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
||||||
<xsl:template match="/">
|
<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>
|
||||||
|
|
||||||
</xsl:template>
|
<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>
|
</xsl:transform>
|
||||||
|
|
|
||||||
Reference in a new issue