[Exception] Add styles

This commit is contained in:
logmanoriginal 2017-07-29 01:40:29 +02:00
parent 4fb363a3ae
commit b4c7091433
2 changed files with 184 additions and 16 deletions

View File

@ -131,16 +131,28 @@ function buildBridgeException($e, $bridge){
<html lang="en"> <html lang="en">
<head> <head>
<title>{$e->getCode()} - {$e->getMessage()}</title> <title>{$e->getCode()} - {$e->getMessage()}</title>
<link href="static/exception.css" rel="stylesheet">
</head> </head>
<body> <body>
<h1>Error {$e->getCode()} - {$e->getMessage()}</h1> <header>
<p><strong>{$bridge->getName()}</strong> was unable to receive or process the remote website's content! <h1>Error {$e->getCode()}</h1>
<br>Check your input parameters or press F5 to retry. <h2>{$e->getMessage()}</h2>
<br>If the error persists use <a href="{$link}">this</a> link to notify the bridge maintainer. <p class="status">{$bridge->getName()}</p>
<br>Notice: After clicking on the link you can review the issue before sending it.</p> </header>
<h2>Additional info</h2> <section>
<p>Error code: "{$e->getCode()}"</p> <p class="exception-message"><strong>{$bridge->getName()}</strong> was
<p>Message: "{$e->getMessage()}"</p> unable to receive or process the remote website's content!</p>
<div class="advice">
<ul class="advice">
<li>Press Return to check your input parameters</li>
<li>Press F5 to retry.</li>
<li>Open a GitHub Issue if this error persists</li>
</ul>
</div>
<a href="{$link}" title="After clicking on this button you can review
the issue before submitting it"><button>Open GitHub Issue</button></a>
<p class="maintainer">{$bridge->getMaintainer()}</p>
</section>
</body> </body>
</html> </html>
EOD; EOD;
@ -176,16 +188,28 @@ function buildTransformException($e, $bridge){
<html lang="en"> <html lang="en">
<head> <head>
<title>{$e->getCode()} - {$e->getMessage()}</title> <title>{$e->getCode()} - {$e->getMessage()}</title>
<link href="static/exception.css" rel="stylesheet">
</head> </head>
<body> <body>
<h1>Error {$e->getCode()} - {$e->getMessage()}</h1> <header>
<p>RSS-Bridge was unable to transform the contents returned by <strong>{$bridge->getName()}</strong>! <h1>Error {$e->getCode()}</h1>
<br>Check your input parameters or press F5 to retry. <h2>{$e->getMessage()}</h2>
<br>If the error persists use <a href="{$link}">this</a> link to notify the bridge maintainer. <p class="status">{$bridge->getName()}</p>
<br>Notice: After clicking on the link you can review the issue before sending it.</p> </header>
<h2>Additional info</h2> <section>
<p>Error code: "{$e->getCode()}"</p> <p class="exception-message">SS-Bridge was unable to transform the contents
<p>Message: "{$e->getMessage()}"</p> returned by <strong>{$bridge->getName()}</strong>!</p>
<div class="advice">
<ul class="advice">
<li>Press Return to check your input parameters</li>
<li>Press F5 to retry</li>
<li>Open a GitHub Issue if this error persists</li>
</ul>
</div>
<a href="{$link}" title="After clicking on this button you can review
the issue before submitting it"><button>Open GitHub Issue</button></a>
<p class="maintainer">{$bridge->getMaintainer()}</p>
</section>
</body> </body>
</html> </html>
EOD; EOD;

144
static/exception.css Normal file
View File

@ -0,0 +1,144 @@
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* Let's go for the actual style */
body {
background-color: #EEEEEE;
font-family: 'Noto Sans';
}
header {
text-shadow:0 5px 6px rgba(150,150,150,0.69);
text-align: center;
color: #1182DB;
}
header > h1 {
font-size: 300%;
}
header > h2 {
margin-left: 1em;
font-size: 120%;
}
header > p.status {
font-weight: bold;
margin: 1em;
color: red;
}
section {
background-color: #FFFFFF;
width: 80%;
margin: 30px auto;
padding: 10px 15px;
text-align: center;
box-shadow: 0px 1px 2px rgba(0,0,0, 0.25);
}
section > h2 {
font-size: 200%;
font-weight: bold;
}
a, a:link, a:visited {
color: #2196F3;
}
button {
line-height: 1.9em;
color: #FFF;
font-weight: bold;
vertical-align: middle;
padding: 6px 12px;
margin: 12px auto 0px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
border-radius: 2px;
border: 1px solid transparent;
min-width: 140px;
background: #2196F3 none repeat scroll 0% 0%;
cursor: pointer;
width: calc(20% - 4px);
}
.description {
margin: 10px;
text-decoration: underline;
}
.maintainer {
font-size: 60%;
text-align: right;
}
.exception-message {
background-color: #c00000;
color: #FFFFFF;
font-weight: bold;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
border-radius: 2px;
border: 1px solid transparent;
width: 80%;
margin: auto;
margin-bottom: 6px;
}
.advice {
margin-left: auto;
margin-right: auto;
display: table;
}
.advice > li {
text-align: left;
}