Merge pull request #315 from teromene/new-style

Improved style for HtmlFormat.
This commit is contained in:
Mitsu 2016-08-03 22:19:03 +02:00 committed by GitHub
commit 0a34fd5a7e
3 changed files with 111 additions and 29 deletions

101
css/HtmlFormat.css Normal file
View file

@ -0,0 +1,101 @@
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';
}
section {
background-color: #FFFFFF;
width: 90%;
margin: 30px auto;
padding: 10px 15px;
box-shadow: 0px 1px 2px rgba(0,0,0, 0.25);
}
section > h2 {
font-size: 200%;
font-weight: bold;
text-align: center;
}
h1.pagetitle {
font-size: 300%;
font-weight: bold;
text-align: center;
color: #2196F3;
}
a.backlink, a.backlink:link, a.backlink:visited, a.itemtitle, a.itemtitle:link, a.itemtitle:visited {
color: #2196F3;
}
.buttons {
text-align: center;
}
section > div.content {
padding: 10px;
}
section > time {
color: #888;
font-size: 80%;
padding: 10px;
}
button.backbutton, button.rss-feed {
line-height: 1em;
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;
width: 200px;
background: #2196F3 none repeat scroll 0% 0%;
cursor: pointer;
margin: 10px;
}

View file

@ -171,6 +171,7 @@ h5 {
.showmore, .showless { .showmore, .showless {
color: #888888; color: #888888;
cursor: pointer;
} }

View file

@ -18,41 +18,21 @@ class HtmlFormat extends FormatAbstract{
foreach($this->getDatas() as $data){ foreach($this->getDatas() as $data){
$entryUri = is_null($data->uri) ? $uri : $data->uri; $entryUri = is_null($data->uri) ? $uri : $data->uri;
$entryTitle = is_null($data->title) ? '' : $this->sanitizeHtml(strip_tags($data->title)); $entryTitle = is_null($data->title) ? '' : $this->sanitizeHtml(strip_tags($data->title));
$entryTimestamp = is_null($data->timestamp) ? '' : '<small><time datetime="' . date(DATE_ATOM, $data->timestamp) . '">' . date(DATE_ATOM, $data->timestamp) . '</time></small>'; $entryTimestamp = is_null($data->timestamp) ? '' : '<time datetime="' . date(DATE_ATOM, $data->timestamp) . '">' . date(DATE_ATOM, $data->timestamp) . '</time>';
$entryAuthor = is_null($data->author) ? '' : '<br><small>by: ' . $data->author . '</small>'; $entryAuthor = is_null($data->author) ? '' : '<br /><p class="author">by: ' . $data->author . '</p>';
$entryContent = is_null($data->content) ? '' : '<p>' . $this->sanitizeHtml($data->content). '</p>'; $entryContent = is_null($data->content) ? '' : '<div class="content">' . $this->sanitizeHtml($data->content). '</div>';
$entries .= <<<EOD $entries .= <<<EOD
<div class="feeditem"> <section class="feeditem">
<h2><a href="{$entryUri}">{$entryTitle}</a></h2> <h2><a class="itemtitle" href="{$entryUri}">{$entryTitle}</a></h2>
{$entryTimestamp} {$entryTimestamp}
{$entryAuthor} {$entryAuthor}
{$entryContent} {$entryContent}
</div> </section>
EOD; EOD;
} }
$styleCss = <<<'EOD'
body{
font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
font-size:10pt;
background-color:#aaa;
background-image:linear-gradient(#eee, #aaa);
background-attachment:fixed;
}
div.feeditem{border:1px solid black;padding:1em;margin:1em;background-color:#fff;}
div.feeditem:hover { background-color:#ebf7ff; }
h1 {border-bottom:dotted #bbb;margin:0 1em 1em 1em;}
h2 {margin:0;}
h2 a {color:black;text-decoration:none;}
h2 a:hover {text-decoration:underline;}
span.menu {margin-left:1em;}
span.menu img {vertical-align:middle;}
span.menu a { color:black; text-decoration:none; padding:0.4em; }
span.menu a:hover { background-color:white; }
EOD;
/* Data are prepared, now let's begin the "MAGIE !!!" */ /* Data are prepared, now let's begin the "MAGIE !!!" */
$toReturn = <<<EOD $toReturn = <<<EOD
@ -61,12 +41,12 @@ EOD;
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{$title}</title> <title>{$title}</title>
<style type="text/css">{$styleCss}</style> <link href="css/HtmlFormat.css" rel="stylesheet">
<meta name="robots" content="noindex, follow"> <meta name="robots" content="noindex, follow">
</head> </head>
<body> <body>
<h1>{$title}</h1> <h1 class="pagetitle">{$title}</h1>
<span class="menu"><a href="./" onclick="window.history.back()"> back to rss-bridge</a> <a title="Get the ATOM feed" href="./?{$atomquery}"><img alt="feed" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAgMAAAC5h23wAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJUExURf+cCv/8+P/OhD2VurcAAAABdFJOU/4a4wd9AAAAbklEQVQI13XOMQ6AIAwFUGzCgLtHYPEUHMHBTwgTRyFOXoDdUT2ltCKbXV6b/iZV6qcMYmY1EJtw3MwFQRJU/Bfl6VaEzENQxbHIUxKTrY4Xgk4ct0EvcrYa9iTPGrxqbE3XHWSfRfIk1trp6O8+R38aBYbaAE4AAAAASUVORK5CYII="></a></span> <div class="buttons"><a href="./"><button class="backbutton"> back to rss-bridge</button></a><a href="./?{$atomquery}"><button class="rss-feed">RSS feed</button></a></div>
{$entries} {$entries}
</body> </body>
</html> </html>