From 4b4fd150c401f4a19bee4cce1e333893df1017e7 Mon Sep 17 00:00:00 2001 From: Shish Date: Fri, 16 Apr 2010 13:11:16 +0100 Subject: [PATCH] html5 theme --- themes/html5/background.svg | 222 ++++++++++++++++++++++++++++++ themes/html5/comment.theme.php | 19 +++ themes/html5/layout.class.php | 126 +++++++++++++++++ themes/html5/setup.theme.php | 38 ++++++ themes/html5/style.css | 235 ++++++++++++++++++++++++++++++++ themes/html5/themelet.class.php | 99 ++++++++++++++ 6 files changed, 739 insertions(+) create mode 100644 themes/html5/background.svg create mode 100644 themes/html5/comment.theme.php create mode 100644 themes/html5/layout.class.php create mode 100644 themes/html5/setup.theme.php create mode 100644 themes/html5/style.css create mode 100644 themes/html5/themelet.class.php diff --git a/themes/html5/background.svg b/themes/html5/background.svg new file mode 100644 index 00000000..2a85bc72 --- /dev/null +++ b/themes/html5/background.svg @@ -0,0 +1,222 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/html5/comment.theme.php b/themes/html5/comment.theme.php new file mode 100644 index 00000000..4c6f95dc --- /dev/null +++ b/themes/html5/comment.theme.php @@ -0,0 +1,19 @@ +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 " + +
$html
+ "; + } +} +?> diff --git a/themes/html5/layout.class.php b/themes/html5/layout.class.php new file mode 100644 index 00000000..a96da4ec --- /dev/null +++ b/themes/html5/layout.class.php @@ -0,0 +1,126 @@ +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 "

error: {$block->header} using an unknown section ({$block->section})"; + break; + } + } + + $debug = get_debug_info(); + + $contact = empty($contact_link) ? "" : "
Contact"; + $subheading = empty($page->subheading) ? "" : "

{$page->subheading}
"; + + $wrapper = ""; + if(strlen($page->heading) > 100) { + $wrapper = ' style="height: 3em; overflow: auto;"'; + } + + print << + + + {$page->title} + + +$header_html + + + + {$page->heading} + $subheading + $sub_block_html + + +
$main_block_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 .= " + + "; + if(!is_null($h)) $html .= " +

$h

+ "; + if(!is_null($b)) { + if(strpos($b, "") === FALSE) { + $html .= "
$b
"; + } + else { + $html .= "
$b
"; + } + } + + return $html; + } +} +?> diff --git a/themes/html5/setup.theme.php b/themes/html5/setup.theme.php new file mode 100644 index 00000000..6f55a711 --- /dev/null +++ b/themes/html5/setup.theme.php @@ -0,0 +1,38 @@ +header; + $b = $block->body; + $i = preg_replace('/[^a-zA-Z0-9]/', '_', $h) . "-setup"; + $html = " + +
+ $h +
$b
+
+ + "; + + return $html; + } +} +?> diff --git a/themes/html5/style.css b/themes/html5/style.css new file mode 100644 index 00000000..487455e3 --- /dev/null +++ b/themes/html5/style.css @@ -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; +} + diff --git a/themes/html5/themelet.class.php b/themes/html5/themelet.class.php new file mode 100644 index 00000000..81990bb8 --- /dev/null +++ b/themes/html5/themelet.class.php @@ -0,0 +1,99 @@ +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 " + +
+
+ + $h_tip + +
+
+ "; + } + + + /** + * 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 "$name"; + } + + private function gen_page_link_block($base_url, $query, $page, $current_page, $name) { + $paginator = ""; + if($page == $current_page) $paginator .= ""; + $paginator .= $this->gen_page_link($base_url, $query, $page, $name); + if($page == $current_page) $paginator .= ""; + 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 "

$first_html | $prev_html | $random_html | $next_html | $last_html". + "
<< $pages_html >>

"; + } +} +?>