Write some cool XSLT + CSS with teh new grid! :D

This commit is contained in:
Starbeamrainbowlabs 2018-03-06 23:22:51 +00:00
parent 9bd4845ad9
commit 066fe36a78
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
5 changed files with 230 additions and 14 deletions

View file

@ -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
View 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">&lt;!DOCTYPE html&gt;</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
View 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)
*/

View file

@ -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>

View file

@ -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:output method="html" encoding="utf-8" indent="yes" />
<xsl:template match="/"> <xsl:template match="/">
<!-- <xsl:text disable-output-escaping="yes">&lt;!DOCTYPE html&gt;</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:template>
</xsl:transform> </xsl:transform>