Personal/cops
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

New theme, updated to HTML5

Browse source 
New style.css to reflect the update to html5
several changes in index.php as the html has been updated.
Had to delete icons support in base.php as they where conflicting with
the new theme.
This commit is contained in:
Thomas Severinsen 2013-02-28 15:41:21 +01:00
parent 02c25705cf
commit 6a58a81b21
3 changed files with 203 additions and 286 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
base.php
View file

@ -165,15 +165,6 @@ class Entry
public $localUpdated; public $localUpdated;
private static $updated = NULL; private static $updated = NULL;
public static $icons = array(
Author::ALL_AUTHORS_ID => 'images/author.png',
Serie::ALL_SERIES_ID => 'images/serie.png',
Book::ALL_RECENT_BOOKS_ID => 'images/recent.png',
Tag::ALL_TAGS_ID => 'images/tag.png',
CustomColumn::ALL_CUSTOMS_ID => 'images/tag.png',
"calibre:books$" => 'images/allbook.png',
"calibre:books:letter" => 'images/allbook.png'
);
public function getUpdatedTime () { public function getUpdatedTime () {
if (!is_null ($this->localUpdated)) { if (!is_null ($this->localUpdated)) {
@ -193,16 +184,6 @@ class Entry
$this->contentType = $pcontentType; $this->contentType = $pcontentType;
$this->linkArray = $plinkArray; $this->linkArray = $plinkArray;
if ($config['cops_show_icons'] == 1)
{
foreach (self::$icons as $reg => $image)
{
if (preg_match ("/" . $reg . "/", $pid)) {
array_push ($this->linkArray, new Link (getUrlWithVersion ($image), "image/png", Link::OPDS_THUMBNAIL_TYPE));
break;
}
}
}
} }
} }

88
index.php
View file

@ -45,10 +45,9 @@
?> ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" /> <meta http-equiv="imagetoolbar" content="no" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" /> <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
<title><?php echo htmlspecialchars ($currentPage->title) ?></title> <title><?php echo htmlspecialchars ($currentPage->title) ?></title>
@ -59,6 +58,7 @@
<link rel="icon" type="image/vnd.microsoft.icon" href="<?php echo $currentPage->favicon ?>" /> <link rel="icon" type="image/vnd.microsoft.icon" href="<?php echo $currentPage->favicon ?>" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.3" media="screen" /> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.3" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion("style.css") ?>" media="screen" /> <link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion("style.css") ?>" media="screen" />
<link rel="stylesheet" href="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
// Handler for .ready() called. // Handler for .ready() called.
@ -147,21 +147,14 @@
<p><img src="images/ajax-loader.gif" alt="waiting" /> Please Wait</p> <p><img src="images/ajax-loader.gif" alt="waiting" /> Please Wait</p>
</div> </div>
<div class="container"> <div class="container">
<div class="head"> <header>
<div class="headleft"> <a class="headleft" href="<?php echo $_SERVER["SCRIPT_NAME"] ?>">
<a href="<?php echo $_SERVER["SCRIPT_NAME"] ?>">
<img src="<?php echo getUrlWithVersion("images/home.png") ?>" alt="Home" /> <img src="<?php echo getUrlWithVersion("images/home.png") ?>" alt="Home" />
</a> </a>
</div> <img class="headright" id="searchImage" src="<?php echo getUrlWithVersion("images/setting64.png") ?>" alt="Settings and menu" />
<div class="headright"> <h1><?php echo htmlspecialchars ($currentPage->title) ?></h1>
<img id="searchImage" src="<?php echo getUrlWithVersion("images/setting64.png") ?>" alt="Settings and menu" /> </header>
</div> <aside>
<div class="headcenter">
<p><?php echo htmlspecialchars ($currentPage->title) ?></p>
</div>
</div>
<div class="clearer" />
<div class="menu">
<div id="search" class="search"> <div id="search" class="search">
<form action="index.php?page=9" method="get"> <form action="index.php?page=9" method="get">
<input type="text" name="query" /> <input type="text" name="query" />
@ -182,10 +175,10 @@
<img id="sort" src="images/sort32.png" alt="Sort" /> <img id="sort" src="images/sort32.png" alt="Sort" />
</form> </form>
</div> </div>
</div> </aside>
<div class="clearer" />
<div id="content" style="display: none;"></div> <div id="content" style="display: none;"></div>
<div class="entries"> <section>
<?php <?php
if ($page == Base::PAGE_BOOK_DETAIL) if ($page == Base::PAGE_BOOK_DETAIL)
{ {
@ -194,33 +187,29 @@
foreach ($currentPage->entryArray as $entry) { foreach ($currentPage->entryArray as $entry) {
if (get_class ($entry) != "EntryBook") { if (get_class ($entry) != "EntryBook") {
?> ?>
<div class="entry"> <article>
<div class="entryTitle"><?php echo htmlspecialchars ($entry->title) ?></div> <div class="frontpage">
<div class="entryContent"><?php echo htmlspecialchars ($entry->content) ?></div> <?php foreach ($entry->linkArray as $link) {?> <a href="<?php echo $link->hrefXhtml () ?>">
<?php <h2><?php echo htmlspecialchars ($entry->title) ?></h2>
foreach ($entry->linkArray as $link) { <?php } ?>
?> <h4><?php echo htmlspecialchars ($entry->content) ?></h4>
<a href="<?php echo $link->hrefXhtml () ?>" class="navigation">nav</a> </a>
<?php
}
?>
</div> </div>
</article>
<?php <?php
} }
else else
{ {
?> ?>
<div class="book"> <article>
<div class="cover"> <div class="books">
<?php <?php
if ($entry->book->hasCover) { if ($entry->book->hasCover) {
?> ?>
<a rel="group" class="fancycover" href="<?php echo $entry->getCover () ?>"><img src="<?php echo $entry->getCoverThumbnail () ?>" alt="<?php echo localize("i18n.coversection") ?>" /></a> <span class="cover"><a rel="group" class="fancycover" href="<?php echo $entry->getCover () ?>"><img src="<?php echo $entry->getCoverThumbnail () ?>" alt="<?php echo localize("i18n.coversection") ?>" /></a></span>
<?php <?php
} }
?> ?>
</div>
<div class="download">
<?php <?php
$i = 0; $i = 0;
foreach ($config['cops_prefered_format'] as $format) foreach ($config['cops_prefered_format'] as $format)
@ -229,49 +218,44 @@
if ($data = $entry->book->getDataFormat ($format)) { if ($data = $entry->book->getDataFormat ($format)) {
$i++; $i++;
?> ?>
<div class="button buttonEffect"><a href="<?php echo $data->getHtmlLink () ?>"><?php echo $format ?></a></div> <h2 class="download"><a href="<?php echo $data->getHtmlLink () ?>"><?php echo $format ?></a></h2>
<?php <?php
} }
} }
?> ?>
</div>
<div class="bookdetail">
<a class="navigation" href="<?php echo $entry->book->getDetailUrl () ?>" /> <a class="navigation" href="<?php echo $entry->book->getDetailUrl () ?>" />
<div class="entryTitle st"><?php echo htmlspecialchars ($entry->title) ?> <h2><?php echo htmlspecialchars ($entry->title) ?>
<?php <?php
if ($entry->book->getPubDate() != "") if ($entry->book->getPubDate() != "")
{ {
?> ?>
<span class="sp">(<?php echo $entry->book->getPubDate() ?>)</span> (<?php echo $entry->book->getPubDate() ?>)
<?php <?php
} }
?> ?>
<span class="sr"><?php echo $entry->book->getRating () ?></span> <?php echo $entry->book->getRating () ?></h2>
</div> <h4><?php echo localize("authors.title") . " : </h4>" . htmlspecialchars ($entry->book->getAuthorsName ()) ?><br />
<div class="entryContent sa"><?php echo localize("authors.title") . " : " . htmlspecialchars ($entry->book->getAuthorsName ()) ?></div> <h4><?php echo localize("tags.title") . " : </h4>" . htmlspecialchars ($entry->book->getTagsName ()) ?><br />
<div class="entryContent"><?php echo localize("tags.title") . " : " . htmlspecialchars ($entry->book->getTagsName ()) ?></div>
<?php <?php
$serie = $entry->book->getSerie (); $serie = $entry->book->getSerie ();
if (!is_null ($serie)) { if (!is_null ($serie)) {
?> ?>
<div class="entryContent ss"><?php echo localize("series.title") . " : " . htmlspecialchars ($serie->name) . " (" . $entry->book->seriesIndex . ")" ?></div> <h4><?php echo localize("series.title") . " :</h4> " . htmlspecialchars ($serie->name) . " (" . $entry->book->seriesIndex . ")" ?><br />
<?php <?php
} }
?> ?>
</div> </div>
</div> </article>
<?php <?php
} }
?> ?>
<div class="clearer" />
<?php <?php
} }
?> ?>
</div> </section>
<div class="foot"> <footer>
<div class="footright"> <a href="about.xml"><img src="<?php echo getUrlWithVersion("images/info.png") ?>" alt="Home" /></a>
<a class="fancyabout" href="about.xml"><img src="<?php echo getUrlWithVersion("images/info.png") ?>" alt="Home" /></a>
</div>
<?php <?php
if ($currentPage->isPaginated ()) { if ($currentPage->isPaginated ()) {
?> ?>
@ -296,7 +280,7 @@
<?php <?php
} }
?> ?>
</div> </footer>
</div> </div>
</body> </body>
</html> </html>

366
style.css
View file

@ -1,225 +1,159 @@
html /* Global Box Sizing and Font-Smoothing */
{ *, *:after, *:before {
font-family: sans-serif; box-sizing:border-box;
font-size: 1em; -webkit-box-sizing:border-box;
padding:0px; -moz-box-sizing:border-box;
margin:0px; -webkit-font-smoothing:antialiased;
background-color:lightgray; -moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
} }
body html { font-size: 100%; -webkit-text-size-adjust: 100%;
{ -ms-text-size-adjust: 100%; }
margin-top:0px;
body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; /* Serve Helvetica Neue, with Helvetica fallbacks to Arial */
font-size: 0.75em;/*12px/16px */
font-weight:300; /* Better supported than 'lighter' attribute */
line-height:18px;
color: #1c1c1c; /* Lighter on the eyes than #000 Black */
margin: 0px; background: #cccccc; background-size: cover;
} }
.container img {
{ border: 0px;
margin:auto; max-width: 100%;
width:100%; height: auto;
max-width:800px; width: auto\9; /* ie8 */
} }
.head /* ==========================================================================
{ Typography stuff goes here
color:white; ========================================================================== */
background-color:black; h1,h2,h3,h4,h5,h6 { font-weight: bold; margin:0; padding:0;}
width:100%; /*h1 see mediaqueries*/
height:64px; h2 {font-size: 1.2em;}
h3 {font-size: 1.1em;}
h4 {font-size: 1.0em; }
h5 {font-size: 0.83em;}
h6 {font-size: 0.75em;}
a:hover, a:active { outline: none; }
a { color: #2f4f4f ; text-decoration: none;}
a:visited { color:#414141 ; }
a:hover { color: black; text-decoration: underline; }
.frontpage a:hover { display:inline-block; width: 100%; background-color: #778899;}
/* =============================================================================
Main container stuff goes here
========================================================================== */
.container{
background: #414141; border:1px solid #000; border-radius:10px;
max-width:800px;width:95%;margin:0 auto;position:relative; }
/* =============================================================================
Header stuff goes here
========================================================================== */
header {
clear:both;
color:white;
text-align:center;
text-transform:uppercase;
display:block;
box-shadow:inset 0px -5px 8px #000000;
min-height:70px;
border-radius: 10px 10px 0px 0px;
} }
.foot .headleft {
{ float: left;
color:white;
background-color:black;
width:100%;
height:32px;
} }
img header h1{
{ float:none;
margin:0; padding-top:25px;
padding:0;
border:0;
} }
.headleft .headright {
{ float: right;
float:left;
height:64px;
} }
.headright /* =============================================================================
{ Section and Article stuff goes here
float:right; ========================================================================== */
height:64px; section {
cursor:pointer; clear:both;
background-color: #fff;
} }
.footright article {
{ border-bottom: 1px solid black;
float:right;
height:32px;
} }
/*-------------frontpage article-------------*/
.headcenter .frontpage h2 {
{ padding: 5px 0 0 5px;
margin:auto;
text-align:center;
font-size: 1.5em;
font-weight:bold;
height:64px;
display:table;
} }
.footcenter .frontpage h4 {
{ padding: 5px 0 5px 20px;
margin:auto; font-style: italic;
text-align:center;
font-size: 1.3em;
font-weight:bold;
height:32px;
display:table;
} }
/*-------------books article-------------*/
.headcenter p, .footcenter p, .footcenter a .books {
{ clear: both;
display: table-cell; padding: 10px;
vertical-align: middle;
text-align: center;
line-height: 100%;
} }
.clearer .cover {
float:left;
padding: 0 10px 0 0;
min-width: 56px;
min-height: 70px;
}
.download {
float: right;
}
.download a {
border-radius: 6px;
box-shadow:0 0 10px #000;
background: darkgray;
background: radial-gradient(#666, black);
color: #EEE;
text-decoration : none;
font-weight: bold;
padding: 5px;
}
.books h4{
display: inline;
font-style: italic;
}
/* =============================================================================
Footer stuff goes here
========================================================================== */
footer
{ {
clear:both; clear:both;
box-shadow:inset 0px 5px 8px #000000;
border-radius: 0px 0px 10px 10px;
height:32px;
} }
.entries footer a{
{ float: right;
background-color:lightgray;
margin-top: 5px;
} }
/* =============================================================================
.entry Aside stuff goes here
{ ========================================================================== */
background-color:white; aside
border-bottom:1px double black;
display:block;
padding:2px;
cursor: pointer;
margin-bottom:5px;
}
.book
{
background-color:white;
border-bottom:1px double black;
min-height:80px;
margin-bottom:5px;
}
.navigation
{
display:none;
}
.entryTitle
{
font-weight:bold;
font-size: 1.1em;
}
.entryContent
{
font-style:italic;
font-size: 0.9em;
margin-left: 10px;
}
.cover
{
float:left;
padding:5px 10px;
min-width: 56px;
min-height: 70px;
}
.download
{
float:right;
}
.button
{
height:36px;
display: table;
width:80px;
margin:2px;
}
.button p, .button a
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
#loading
{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color: #ccc;
filter: alpha(opacity=70);
opacity: 0.70;
text-align: center;
padding-top: 120px;
}
.entrySection
{
margin-top: 8px;
margin-bottom: 18px;
line-height: 1.5em;
}
.entrySection span
{
font-style:italic;
font-size: 1em;
}
.buttonEffect a
{
border-radius: 6px;
background: darkgray;
background: -moz-radial-gradient(#666, black);
background: -webkit-radial-gradient(#666, black);
background: -ms-radial-gradient(#666, black);
background: radial-gradient(#666, black);
color: #EEE;
text-decoration : none;
font-weight: bold;
}
.pad6 a
{
padding: 6px;
}
.pad6
{
display: inline;
}
.menu
{ {
float: right; float: right;
width : 250px; width : 250px;
@ -233,6 +167,7 @@ position: absolute;
background: white; background: white;
} }
/*-------------Search Aside-------------*/
.search form .search form
{ {
background-color: black; background-color: black;
@ -253,26 +188,43 @@ float:right;
padding: 3px 2px; padding: 3px 2px;
} }
.bookdetail #loading
{ {
color:black; display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color: #ccc;
filter: alpha(opacity=70);
opacity: 0.70;
text-align: center;
padding-top: 120px;
} }
/* =============================================================================
.bookpopup Mediaquerie stuff goes here
{ ========================================================================== */
min-width: 400px; /* 100px and greater */
color:black; @media only screen and (min-width: 100px) {
h1 {font-size: 1em;}
.container { width:100%; }
} }
.entries > .bookpopup, .entries > .bookdetail /* 320px and greater */
{ @media only screen and (min-width: 320px) {
background-color: white; h1 {font-size: 1.2em;}
margin-bottom: 5px;
padding: 6px;
} }
.content /* 480px and greater */
{ @media only screen and (min-width: 480px) {
line-height: 110%; h1 {font-size: 1.5em;}
}
/* 810px and greater */
@media only screen and (min-width: 768px) {
h1 {font-size: 2em;}
.container { box-shadow:0 0 20px #000; }
body { margin: 5px; }
} }