html5 theme
This commit is contained in:
Shish
parent
38c3038ecb
commit
4b4fd150c4
6 changed files with 739 additions and 0 deletions
222
themes/html5/background.svg
Normal file
222
themes/html5/background.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 49 KiB |
19
themes/html5/comment.theme.php
Normal file
19
themes/html5/comment.theme.php
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
|
||||
class CustomCommentListTheme extends CommentListTheme {
|
||||
protected function comment_to_html($comment, $trim=false) {
|
||||
return $this->rr(parent::comment_to_html($comment, $trim));
|
||||
}
|
||||
|
||||
protected function build_postbox($image_id) {
|
||||
return $this->rr(parent::build_postbox($image_id));
|
||||
}
|
||||
|
||||
protected function rr($html) {
|
||||
return "
|
||||
<!-- cancel border -->
|
||||
<div class='brr'>$html</div>
|
||||
";
|
||||
}
|
||||
}
|
||||
?>
|
||||
126
themes/html5/layout.class.php
Normal file
126
themes/html5/layout.class.php
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<?php
|
||||
/**
|
||||
* A class to turn a Page data structure into a blob of HTML
|
||||
*/
|
||||
class Layout {
|
||||
/**
|
||||
* turns the Page into HTML
|
||||
*/
|
||||
public function display_page(Page $page) {
|
||||
global $config;
|
||||
|
||||
$theme_name = $config->get_string('theme', 'default');
|
||||
$data_href = get_base_href();
|
||||
$contact_link = $config->get_string('contact_link');
|
||||
|
||||
$header_html = "";
|
||||
ksort($page->headers);
|
||||
foreach($page->headers as $line) {
|
||||
$header_html .= "\t\t$line\n";
|
||||
}
|
||||
|
||||
$left_block_html = "";
|
||||
$main_block_html = "";
|
||||
$sub_block_html = "";
|
||||
|
||||
foreach($page->blocks as $block) {
|
||||
switch($block->section) {
|
||||
case "left":
|
||||
$left_block_html .= $this->block_to_html($block, true, "left");
|
||||
break;
|
||||
case "main":
|
||||
$main_block_html .= $this->block_to_html($block, false, "main");
|
||||
break;
|
||||
case "subheading":
|
||||
$sub_block_html .= $this->block_to_html($block, false, "main");
|
||||
break;
|
||||
default:
|
||||
print "<p>error: {$block->header} using an unknown section ({$block->section})";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$debug = get_debug_info();
|
||||
|
||||
$contact = empty($contact_link) ? "" : "<br><a href='$contact_link'>Contact</a>";
|
||||
$subheading = empty($page->subheading) ? "" : "<div id='subtitle'>{$page->subheading}</div>";
|
||||
|
||||
$wrapper = "";
|
||||
if(strlen($page->heading) > 100) {
|
||||
$wrapper = ' style="height: 3em; overflow: auto;"';
|
||||
}
|
||||
|
||||
print <<<EOD
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>{$page->title}</title>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||
<link rel="stylesheet" href="$data_href/themes/$theme_name/style.css" type="text/css">
|
||||
$header_html
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1$wrapper>{$page->heading}</h1>
|
||||
$subheading
|
||||
$sub_block_html
|
||||
|
||||
<div id="nav">$left_block_html</div>
|
||||
<div id="body">$main_block_html</div>
|
||||
|
||||
<div id="footer">
|
||||
Images © their respective owners,
|
||||
<a href="http://code.shishnet.org/shimmie2/">Shimmie</a> ©
|
||||
<a href="http://www.shishnet.org/">Shish</a> & Co 2007-2010,
|
||||
based on the Danbooru concept.
|
||||
$debug
|
||||
$contact
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
EOD;
|
||||
}
|
||||
|
||||
/**
|
||||
* A handy function which does exactly what it says in the method name
|
||||
*/
|
||||
private function block_to_html($block, $hidable=false, $salt="") {
|
||||
$h = $block->header;
|
||||
$b = $block->body;
|
||||
$html = "";
|
||||
$i = str_replace(' ', '_', $h) . $salt;
|
||||
if($hidable) $html .= "
|
||||
<script><!--
|
||||
$(document).ready(function() {
|
||||
$(\"#$i-toggle\").click(function() {
|
||||
$(\"#$i\").slideToggle(\"slow\", function() {
|
||||
if($(\"#$i\").is(\":hidden\")) {
|
||||
$.cookie(\"$i-hidden\", 'true', {path: '/'});
|
||||
}
|
||||
else {
|
||||
$.cookie(\"$i-hidden\", 'false', {path: '/'});
|
||||
}
|
||||
});
|
||||
});
|
||||
if($.cookie(\"$i-hidden\") == 'true') {
|
||||
$(\"#$i\").hide();
|
||||
}
|
||||
});
|
||||
//--></script>
|
||||
";
|
||||
if(!is_null($h)) $html .= "
|
||||
<h3 id='$i-toggle' class='hrr'>$h</h3>
|
||||
";
|
||||
if(!is_null($b)) {
|
||||
if(strpos($b, "<!-- cancel border -->") === FALSE) {
|
||||
$html .= "<div class='blockbody brr' id='$i'>$b</div>";
|
||||
}
|
||||
else {
|
||||
$html .= "<div class='blockbody' id='$i'>$b</div>";
|
||||
}
|
||||
}
|
||||
|
||||
return $html;
|
||||
}
|
||||
}
|
||||
?>
|
||||
38
themes/html5/setup.theme.php
Normal file
38
themes/html5/setup.theme.php
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<?php
|
||||
/**
|
||||
* A customised version of the Setup theme
|
||||
*/
|
||||
class CustomSetupTheme extends SetupTheme {
|
||||
protected function sb_to_html(SetupBlock $block) {
|
||||
$h = $block->header;
|
||||
$b = $block->body;
|
||||
$i = preg_replace('/[^a-zA-Z0-9]/', '_', $h) . "-setup";
|
||||
$html = "
|
||||
<script><!--
|
||||
$(document).ready(function() {
|
||||
$(\"#$i-toggle\").click(function() {
|
||||
$(\"#$i\").slideToggle(\"slow\", function() {
|
||||
if($(\"#$i\").is(\":hidden\")) {
|
||||
$.cookie(\"$i-hidden\", 'true', {path: '/'});
|
||||
}
|
||||
else {
|
||||
$.cookie(\"$i-hidden\", 'false', {path: '/'});
|
||||
}
|
||||
});
|
||||
});
|
||||
if($.cookie(\"$i-hidden\") == 'true') {
|
||||
$(\"#$i\").hide();
|
||||
}
|
||||
});
|
||||
//--></script>
|
||||
<div class='setupblock brr'>
|
||||
<b id='$i-toggle'>$h</b>
|
||||
<br><div id='$i'>$b</div>
|
||||
</div>
|
||||
<!-- cancel border -->
|
||||
";
|
||||
|
||||
return $html;
|
||||
}
|
||||
}
|
||||
?>
|
||||
235
themes/html5/style.css
Normal file
235
themes/html5/style.css
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* things common to all pages *
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
BODY {
|
||||
background: #EEE;
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
margin: 0px;
|
||||
}
|
||||
H1 {
|
||||
background: #BBB;
|
||||
text-align: center;
|
||||
border: 1px solid #AAA;
|
||||
}
|
||||
H1 A {
|
||||
color: black;
|
||||
}
|
||||
H3 {
|
||||
text-align: center;
|
||||
margin: 0px;
|
||||
}
|
||||
.hrr {
|
||||
background: #CCC;
|
||||
border: 1px solid #BBB;
|
||||
}
|
||||
.brr, .thumb {
|
||||
background: #DDD;
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
.brr, .hrr, H1, #footer, .thumb {
|
||||
margin: 8px;
|
||||
padding: 8px;
|
||||
-webkit-border-radius: 12px;
|
||||
-moz-border-radius: 12px;
|
||||
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
|
||||
-moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
|
||||
}
|
||||
THEAD {
|
||||
font-weight: bold;
|
||||
}
|
||||
TD {
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
}
|
||||
CODE {
|
||||
background: #DEDEDE;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
#subtitle {
|
||||
width: 256px;
|
||||
font-size: 0.75em;
|
||||
margin: auto;
|
||||
margin-top: -16px;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
border-top: none;
|
||||
background: #DDD;
|
||||
}
|
||||
#body SELECT {width: 150px;}
|
||||
TD>INPUT[type="submit"] {width: 100%;}
|
||||
TD>INPUT[type="text"] {width: 100%;}
|
||||
TD>INPUT[type="password"] {width: 100%;}
|
||||
TD>TEXTAREA {width: 100%;}
|
||||
TD>SELECT {width: 100%;}
|
||||
[onclick] {cursor:pointer;}
|
||||
|
||||
TABLE.zebra {border-spacing: 0px; border: 2px solid #CCC;}
|
||||
TABLE.zebra TD, TABLE.zebra TH {vertical-align: middle; padding: 4px;}
|
||||
TABLE.zebra THEAD TD, TABLE.zebra THEAD TH {border-bottom: 2px solid #CCC;}
|
||||
TABLE.zebra TFOOT TD, TABLE.zebra TFOOT TH {border-top: 2px solid #CCC;}
|
||||
TABLE.zebra TR TD {border-bottom: 1px solid #DDD;}
|
||||
TABLE.zebra TR.odd {background: #EFEFEF;}
|
||||
TABLE.zebra TR.even {background: #E0E0E0;}
|
||||
|
||||
#footer {
|
||||
clear: both;
|
||||
font-size: 0.7em;
|
||||
text-align: center;
|
||||
background: #BBB;
|
||||
border: 1px solid #AAA;
|
||||
}
|
||||
|
||||
*[onclick] {cursor: pointer;}
|
||||
IMG {border: none;}
|
||||
FORM {margin: 0px;}
|
||||
A {text-decoration: none;}
|
||||
A:hover {text-decoration: underline;}
|
||||
|
||||
BLOCKQUOTE {
|
||||
border: 1px solid black;
|
||||
padding: 8px;
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
UL {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* the navigation bar, and all its blocks *
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
#nav {
|
||||
width: 200px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-left: 16px;
|
||||
}
|
||||
#nav .blockbody {
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
#nav TABLE {
|
||||
width: 150px;
|
||||
}
|
||||
#nav TD {
|
||||
vertical-align: middle;
|
||||
}
|
||||
#nav INPUT {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
#nav SELECT {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#comments P {
|
||||
text-align: left;
|
||||
width: 150px;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.comment {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.more:after {
|
||||
content: " >>>";
|
||||
}
|
||||
|
||||
.tag_count:before {
|
||||
content: "(";
|
||||
}
|
||||
.tag_count:after {
|
||||
content: ")";
|
||||
}
|
||||
|
||||
.paginator {
|
||||
clear: both;
|
||||
padding: 4px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* the main part of each page *
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
#body {
|
||||
margin-left: 226px;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
height: 1%;
|
||||
}
|
||||
#body TABLE {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* specific page types *
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
#pagelist {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
#tagmap A {
|
||||
padding: 8px 4px 8px 4px;
|
||||
}
|
||||
|
||||
.setupblock {
|
||||
text-align: center;
|
||||
width: 350px;
|
||||
}
|
||||
.setupblock TEXTAREA {
|
||||
width: 300px;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.helpable {
|
||||
border-bottom: 1px dashed gray;
|
||||
}
|
||||
|
||||
.ok {
|
||||
background: #AFA;
|
||||
}
|
||||
.bad {
|
||||
background: #FAA;
|
||||
}
|
||||
|
||||
#nav .thumbblock {
|
||||
float: none;
|
||||
height: auto;
|
||||
}
|
||||
#nav .thumb {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.thumbblock {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
float: left;
|
||||
}
|
||||
.thumb {
|
||||
display: inline-block;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
#downtime #message, #downtime #login {
|
||||
text-align: center;
|
||||
}
|
||||
#downtime H3 {
|
||||
margin-top: 32px;
|
||||
}
|
||||
#downtime #login_table {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
99
themes/html5/themelet.class.php
Normal file
99
themes/html5/themelet.class.php
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<?php
|
||||
/**
|
||||
* A collection of common functions for theme parts
|
||||
*/
|
||||
class Themelet {
|
||||
/**
|
||||
* Generic error message display
|
||||
*/
|
||||
public function display_error(Page $page, $title, $message) {
|
||||
$page->set_title($title);
|
||||
$page->set_heading($title);
|
||||
$page->add_block(new NavBlock());
|
||||
$page->add_block(new Block("Error", $message));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A specific, common error message
|
||||
*/
|
||||
public function display_permission_denied(Page $page) {
|
||||
header("HTTP/1.0 403 Permission Denied");
|
||||
$this->display_error($page, "Permission Denied", "You do not have permission to access this page");
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Generic thumbnail code; returns HTML rather than adding
|
||||
* a block since thumbs tend to go inside blocks...
|
||||
*/
|
||||
public function build_thumb_html(Image $image, $query=null) {
|
||||
global $config;
|
||||
$i_id = int_escape($image->id);
|
||||
$h_view_link = make_link("post/view/$i_id", $query);
|
||||
$h_tip = html_escape($image->get_tooltip());
|
||||
$h_thumb_link = $image->get_thumb_link();
|
||||
$tsize = get_thumbnail_size($image->width, $image->height);
|
||||
return "
|
||||
<!-- cancel border -->
|
||||
<div class='thumbblock'>
|
||||
<div class='thumb'>
|
||||
<a href='$h_view_link' style='position: relative; display: block; height: {$tsize[1]}px; width: {$tsize[0]}px;'>
|
||||
<img id='thumb_$i_id' title='$h_tip' alt='$h_tip' style='height: {$tsize[1]}px; width: {$tsize[0]}px;' src='$h_thumb_link'>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
";
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Add a generic paginator
|
||||
*/
|
||||
public function display_paginator(Page $page, $base, $query, $page_number, $total_pages) {
|
||||
if($total_pages == 0) $total_pages = 1;
|
||||
$body = $this->build_paginator($page_number, $total_pages, $base, $query);
|
||||
$page->add_block(new Block(null, $body, "main", 90));
|
||||
}
|
||||
|
||||
private function gen_page_link($base_url, $query, $page, $name) {
|
||||
$link = make_link("$base_url/$page", $query);
|
||||
return "<a href='$link'>$name</a>";
|
||||
}
|
||||
|
||||
private function gen_page_link_block($base_url, $query, $page, $current_page, $name) {
|
||||
$paginator = "";
|
||||
if($page == $current_page) $paginator .= "<b>";
|
||||
$paginator .= $this->gen_page_link($base_url, $query, $page, $name);
|
||||
if($page == $current_page) $paginator .= "</b>";
|
||||
return $paginator;
|
||||
}
|
||||
|
||||
private function build_paginator($current_page, $total_pages, $base_url, $query) {
|
||||
$next = $current_page + 1;
|
||||
$prev = $current_page - 1;
|
||||
$rand = rand(1, $total_pages);
|
||||
|
||||
$at_start = ($current_page <= 1 || $total_pages <= 1);
|
||||
$at_end = ($current_page >= $total_pages);
|
||||
|
||||
$first_html = $at_start ? "First" : $this->gen_page_link($base_url, $query, 1, "First");
|
||||
$prev_html = $at_start ? "Prev" : $this->gen_page_link($base_url, $query, $prev, "Prev");
|
||||
$random_html = $this->gen_page_link($base_url, $query, $rand, "Random");
|
||||
$next_html = $at_end ? "Next" : $this->gen_page_link($base_url, $query, $next, "Next");
|
||||
$last_html = $at_end ? "Last" : $this->gen_page_link($base_url, $query, $total_pages, "Last");
|
||||
|
||||
$start = $current_page-5 > 1 ? $current_page-5 : 1;
|
||||
$end = $start+10 < $total_pages ? $start+10 : $total_pages;
|
||||
|
||||
$pages = array();
|
||||
foreach(range($start, $end) as $i) {
|
||||
$pages[] = $this->gen_page_link_block($base_url, $query, $i, $current_page, $i);
|
||||
}
|
||||
$pages_html = implode(" | ", $pages);
|
||||
|
||||
return "<p class='paginator'>$first_html | $prev_html | $random_html | $next_html | $last_html".
|
||||
"<br><< $pages_html >></p><!-- cancel border -->";
|
||||
}
|
||||
}
|
||||
?>
|
||||
Reference in a new issue