master
ravenlp 2009-01-07 20:14:25 +00:00
parent f112eb20af
commit 260b14882f
5 changed files with 237 additions and 103 deletions

View File

@ -1,26 +1,40 @@
*{ outline:none;}
body { body {
background: white; background: white;
font-family: "Lucida Sans"; font-family: "Lucida Sans";
font-size: 15px; font-size: 15px;
letter-spacing: 2px; letter-spacing: 2px;
line-height: 30px; line-height: 30px;
background: transparent url('../../images/bg.jpg') top center no-repeat;
padding:0;
margin:0;
} }
#dash { #dash {
margin: 35px auto 0px auto; margin: 0 auto;
padding: 10px; padding: 0;
width: 85%; position:relative;
} }
#options { #options {
position:fixed;
height:37px;
width:100%; width:100%;
text-align: center; text-align: center;
border-bottom: thin solid white; border-bottom: thin solid #000;
background: transparent url('../../images/top_ribbon.png') top left repeat-x;
z-index:999;
padding-top:8px;
margin:0;
left:0;
} }
#context_help{ display:block; margin:0; padding:3px 5px; position: absolute; border: 1px solid #222; background-color: #444; color:#fff; font-size: 11px;}
li { li {
list-style: none; list-style: none;
margin-bottom: 5px;
} }
ul { ul {
@ -38,7 +52,6 @@ h4 {
#options li { #options li {
display: inline; display: inline;
padding: 10px;
color: #999; color: #999;
font-variant: small-caps; font-variant: small-caps;
} }
@ -46,45 +59,45 @@ h4 {
#options li a { #options li a {
text-decoration: none; text-decoration: none;
padding:10px 20px; padding:10px 20px;
color: #999; color: #666;
} }
#options li a:hover { #options li a:hover, #options li a.selected {
background-color: #382513; color: #000;
color: #FFF; text-decoration: underline;
} }
#options li a.selected {
background-color: #382513;
color: #FFF;
}
#content { #content {
padding: 25px; text-align: left;
width:auto; padding:20px 0 0 130px;
width:600px;
margin: 0 auto;
} }
html > body div#content{ padding:60px 25px 0 25px;}
.item { .item {
height: 110px; height: 110px;
width: 110px; width: 110px;
padding: 5px; padding: 5px;
overflow: hidden; overflow: hidden;
border: thin solid #CCC; border: 1px solid #CCC;
border-top: 2px solid #444;
float:left;
margin: 10px; margin: 10px;
color: #222; color: #222;
text-align: left; text-align: left;
background-color: #FEFEFE; background-color: #FEFEFE;
font-size: 11px; font-size: 11px;
line-height: normal; line-height: normal;
} }
.link { .link {
font-size: 16px; font-size: 12px;
} }
.link a, .link a:visited, .link a:active, .link a:link{ color:#000; text-decoration:none;}
div.user_hover { #user_hover {
background-color:#000000; background-color:#000000;
color:#FFFFFF; color:#FFFFFF;
display:none; display:none;
@ -103,17 +116,42 @@ div.user_hover {
z-index:10; z-index:10;
height:113px; height:113px;
width: 112px; width: 112px;
margin:10px;
cursor: pointer; cursor: pointer;
} }
li:hover div.user_hover {
display:block;
}
ul.item_list { ul.item_list {
width:112px;
float:left;
position:relative;
margin:10px; margin:10px;
} }
ul.item_list li{
display:block;
float:left;
margin-top:1px;
cursor:pointer;
}
ul.item_list li.selected{
background-color: #8db1de; position: relative; border:none;
}
li.selected div.crnr{ display:block; position: absolute; width:5px; height:5px;}
li.selected div.wn{background:none; display:none;}
html > body li.selected div.wn{background: #FFF url('../../images/round-wn.png') no-repeat top left; top:0; left:0; display:block;}
li.selected div.en{background:none; display:none;}
html > body li.selected div.en{background: #FFF url('../../images/round-en.png') no-repeat top left; top:0; right:0;display:block;}
li.selected div.es{background:none; display:none;}
html > body li.selected div.es{background: #FFF url('../../images/round-es.png') no-repeat top left; bottom:0; right:0;display:block;}
li.selected div.ws{background:none; display:none;}
html > body li.selected div.ws{background: #FFF url('../../images/round-ws.png') no-repeat top left; bottom:0; left:0;display:block;}
#timeline {position:fixed; top: 60px; right: 40px; line-height:auto; margin: 10px; float:right; width:90px;}
#timewrap { position:relative;}
#timewrap h4{ float:right;}
#bubble{ line-height:10px; position:absolute; left: -90px; width:80px; display:none; font-size:10px; color:#444; font-family: Arial, "MS Trebuchet", sans-serif; text-align:right; }
#timeline li{ background-color: #222;height:7px; margin:1px; display:block; float:right; clear:right;}
#timeline li span{display:none;}
li.year{ width:60px;}
li.month{ width:40px;}
li.day{ width:20px;}

File diff suppressed because one or more lines are too long

11
admin/scripts/jquery.scrollTo-min.js vendored Executable file
View File

@ -0,0 +1,11 @@
/**
* jQuery.ScrollTo - Easy element scrolling using jQuery.
* Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* Date: 9/11/2008
* @author Ariel Flesler
* @version 1.4
*
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
*/
;(function(h){var m=h.scrollTo=function(b,c,g){h(window).scrollTo(b,c,g)};m.defaults={axis:'y',duration:1};m.window=function(b){return h(window).scrollable()};h.fn.scrollable=function(){return this.map(function(){var b=this.parentWindow||this.defaultView,c=this.nodeName=='#document'?b.frameElement||b:this,g=c.contentDocument||(c.contentWindow||c).document,i=c.setInterval;return c.nodeName=='IFRAME'||i&&h.browser.safari?g.body:i?g.documentElement:this})};h.fn.scrollTo=function(r,j,a){if(typeof j=='object'){a=j;j=0}if(typeof a=='function')a={onAfter:a};a=h.extend({},m.defaults,a);j=j||a.speed||a.duration;a.queue=a.queue&&a.axis.length>1;if(a.queue)j/=2;a.offset=n(a.offset);a.over=n(a.over);return this.scrollable().each(function(){var k=this,o=h(k),d=r,l,e={},p=o.is('html,body');switch(typeof d){case'number':case'string':if(/^([+-]=)?\d+(px)?$/.test(d)){d=n(d);break}d=h(d,this);case'object':if(d.is||d.style)l=(d=h(d)).offset()}h.each(a.axis.split(''),function(b,c){var g=c=='x'?'Left':'Top',i=g.toLowerCase(),f='scroll'+g,s=k[f],t=c=='x'?'Width':'Height',v=t.toLowerCase();if(l){e[f]=l[i]+(p?0:s-o.offset()[i]);if(a.margin){e[f]-=parseInt(d.css('margin'+g))||0;e[f]-=parseInt(d.css('border'+g+'Width'))||0}e[f]+=a.offset[i]||0;if(a.over[i])e[f]+=d[v]()*a.over[i]}else e[f]=d[i];if(/^\d+$/.test(e[f]))e[f]=e[f]<=0?0:Math.min(e[f],u(t));if(!b&&a.queue){if(s!=e[f])q(a.onAfterFirst);delete e[f]}});q(a.onAfter);function q(b){o.animate(e,j,a.easing,b&&function(){b.call(this,r,a)})};function u(b){var c='scroll'+b,g=k.ownerDocument;return p?Math.max(g.documentElement[c],g.body[c]):k[c]}}).end()};function n(b){return typeof b=='object'?b:{top:b,left:b}}})(jQuery);

View File

@ -67,7 +67,7 @@ $(function(){
if($("#context_help").get().length < 1){ if($("#context_help").get().length < 1){
$('.box:last').append('<div id="context_help"></div>'); $('.box:last').append('<div id="context_help"></div>');
} }
$('#context_help').hide().html(t).css({left:e.pageX, top:e.pageY + 20}).fadeIn('slow'); $('#context_help').hide().html(t).css({left:e.pageX, top:e.pageY + 20}).fadeIn(300);
}); });
},function(){ },function(){
$(this).stop().attr('title',t); $(this).stop().attr('title',t);

View File

@ -22,9 +22,15 @@ $photo = array();
$regular = array(); $regular = array();
$video = array(); $video = array();
$dates = array();
$rs = $tumble->getPosts($tumble->getPostsNumber()); $rs = $tumble->getPosts($tumble->getPostsNumber());
if ($db->contarRegistros()>0) { if ($db->contarRegistros()>0) {
while($register = mysql_fetch_assoc($rs)) { while($register = mysql_fetch_assoc($rs)) {
$date = strtotime($register['date']);
$year = date('Y',$date);
$month = date('M',$date);
$day = date('d',$date);
$dates[$year][$month][$day] = true;
$output = handleNode($register); $output = handleNode($register);
$theType = util::type2Text($register["type"]); $theType = util::type2Text($register["type"]);
@ -61,6 +67,12 @@ function handleNode($node) {
$output['url'] = $tumble->getPermalink($node["id_post"]); $output['url'] = $tumble->getPermalink($node["id_post"]);
$output['date'] = $formatedDate; $output['date'] = $formatedDate;
$date = strtotime($node['date']);
$year = date('Y',$date);
$month = date('M',$date);
$day = date('d',$date);
$output['full_date'] = $day.' '.$month.' '.$year;
$theType = util::type2Text($node["type"]); $theType = util::type2Text($node["type"]);
switch($theType) { switch($theType) {
@ -110,28 +122,85 @@ function handleNode($node) {
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="gelato <?php echo util::codeName()." (".util::version().")"; ?>" /> <meta name="generator" content="gelato <?php echo util::codeName()." (".util::version().")"; ?>" />
<link rel="shortcut icon" href="<?php echo $conf->urlGelato;?>/images/favicon.ico" /> <link rel="shortcut icon" href="<?php echo $conf->urlGelato;?>/images/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<?php echo $conf->urlGelato.($conf->urlFriendly ? "/rss/" : "/rss.php"); ?>"/> <link rel="alternate" type="application/rss+xml" title="RSS" href="<?php echo $conf->urlGelato.($conf->urlFriendly ? "/rss/" : "/rss.php"); ?>"/>
<title><?php echo $conf->title." &raquo; ".__(" archive"); ?></title> <title><?php echo $conf->title." &raquo; ".__(" archive"); ?></title>
<script language="javascript" type="text/javascript" src="<?php echo $conf->urlGelato;?>/admin/scripts/jquery.js"></script> <script language="javascript" type="text/javascript" src="<?php echo $conf->urlGelato;?>/admin/scripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $conf->urlGelato;?>/admin/scripts/jquery.scrollTo-min.js"></script>
<link href="<?php echo $conf->urlGelato;?>/admin/css/archive.css" type="text/css" rel="stylesheet"> <link href="<?php echo $conf->urlGelato;?>/admin/css/archive.css" type="text/css" rel="stylesheet">
<script type='text/javascript'> <script type='text/javascript'>
function select(object) { function select(object) {
var sel_id = object.id; var sel_id = object.id;
$("a.option").removeClass('selected'); $("a.option").removeClass('selected');
$(object).addClass('selected'); $(object).addClass('selected');
$("#conversation_content, #quote_content, #link_content, #regular_content, #photo_content, #video_content").hide("slow"); $("#conversation_content, #quote_content, #link_content, #regular_content, #photo_content, #video_content").slideUp("fast");
$("#"+sel_id+"_content").show("slow"); $(".en, .es, .wn, .ws").remove();
$("li.selected").removeClass('selected');
$("#"+sel_id+"_content").show();
$('#user_hover').hide();
}; };
$(function(){
$("#timeline li").hover(function(){
$(this).css('cursor','pointer');
$("#bubble").hide();
$(this).queue('fx',[]);
$(this).animate({width:80},300, function(){
$("#bubble").text($(this).find('span').text()).fadeIn('fast').css({top:this.offsetTop - 2});
});
},function(){
$(this).css('cursor','auto');
$(this).animate({width:$(this).attr("rel")},300,'linear');
}).click(function(){
$(".en, .es, .wn, .ws").remove();
var date = $(this).text();
$("#content > div:visible ul").find('li').removeClass('selected');
$("#content > div:visible ul").find('li div[rel$='+date+']').parent().addClass('selected');
wrap();
if($('li.selected').length > 0){
var elem = $("li.selected").get();
$(window).scrollTo($("li.selected").eq(0).offset().top-50,900);
}else{
$("#bubble").text('Not found');
}
});
$('#user_hover').hover(function(){},function(){ $(this).hide(); });
$('.item').hover(function(e){
var item = $(this);
$('#user_hover').css({top:$(this).offset().top,left:$(this).offset().left}).show().unbind('click').click(function(){
$(item).click();
});
$('#user_hover h3').text($(this).attr('rel'));
},function(e){});
});
function wrap () {
var elems = $("li.selected");
var list = $("#content > div:visible ul.item_list > li");
var cols = 4;
var l = $(elems).length;
$(elems).each(function(){
index = $(list).index(this);
if( (index+1) % cols == 0){
$(this).append("<div class='crnr en'>&nbsp;</div>").append("<div class='crnr es'>&nbsp;</div>");
}else if( (index) % cols == 0){
$(this).append("<div class='crnr wn'>&nbsp;</div>").append("<div class='crnr ws'>&nbsp;</div>");
}
});
$(elems).eq(0).append("<div class='crnr wn'>&nbsp;</div>").append("<div class='crnr ws'>&nbsp;</div>");
$(elems).eq(l-1).append("<div class='crnr en'>&nbsp;</div>").append("<div class='crnr es'>&nbsp;</div>");
}
</script> </script>
</head> </head>
<body> <body>
<div id='dash'> <div id='dash'>
<div id='options'> <div id='options'>
<ul id='option-list'> <ul id='option-list'>
<li><a href='#' id='conversation' class='option selected' onclick="select(this);">Conversations</a></li> <li><a href='#' id='conversation' class='option selected' onclick="select(this);">Conversations</a></li>
@ -142,107 +211,123 @@ function handleNode($node) {
<li><a href='#' id='video' class='option' onclick="select(this);">Videos</a></li> <li><a href='#' id='video' class='option' onclick="select(this);">Videos</a></li>
</ul> </ul>
</div> </div>
<div id="timeline">
<div id="timewrap">
<div id="bubble"></div>
<h4>TIMELINE</h4>
<ul>
<?php
foreach ($dates as $year => $monthday) {
echo '<li class="year" rel="60"><span>'.$year.'</span></li>';
if(is_array($monthday) && count($monthday) > 0){
foreach ($monthday as $month => $days) {
echo '<li class="month" rel="40"><span>'.$month.' '.$year.'</span></li>';
if(is_array($days) && count($days) > 0){
foreach ($days as $day => $val) {
echo '<li class="day" rel="20"><span>'.$day.' '.$month.' '.$year.'</span></li>';
}
}
}
}
}
?>
</ul>
</div>
</div>
<div id='content'> <div id='content'>
<div id='msg' style="display:none;">&nbsp;</div>
<div id='conversation_content'> <div id='conversation_content'>
<?php foreach($conversation as $item) { ?>
<ul class='item_list'> <ul class='item_list'>
<?php foreach($conversation as $item) { ?>
<li> <li>
<div class='item'> <div class='item' rel='<?php echo $item['full_date'] ?>' title="<?php echo strftime("%b %d, %G", strtotime($item['date'])); ?>" onclick="location.href='<?php echo $item['url'] ?>';">
<ul> <ul>
<li><?php echo $item['lines']; ?></li> <li><?php echo $item['lines']; ?></li>
</ul> </ul>
</div> </div>
<div class='user_hover' onclick="location.href='<?php echo $item['url'] ?>';">
<h3><?php echo strftime("%b %d, %G", strtotime($item['date'])); ?></h3>
</div>
</li> </li>
</ul>
<?php } ?> <?php } ?>
</ul>
</div> </div>
<div id='quote_content' style='display:none;'> <div id='quote_content' style='display:none;'>
<?php foreach($quote as $item) { ?>
<ul class='item_list'> <ul class='item_list'>
<?php foreach($quote as $item) { ?>
<li> <li>
<div class='item'> <div class='item' rel='<?php echo $item['full_date'] ?>' title="<?php echo strftime("%b %d, %G", strtotime($item['date'])); ?>" onclick="location.href='<?php echo $item['url'] ?>';">
<ul> <ul>
<li><em>"<?php echo substr($item['quote'], 0, 50), "..."; ?>"</em></li> <li><em>"<?php echo substr($item['quote'], 0, 50), "..."; ?>"</em></li>
<li>--<?php echo $item['source']; ?></li> <li>--<?php echo $item['source']; ?></li>
</ul> </ul>
</div> </div>
<div class='user_hover' onclick="location.href='<?php echo $item['url'] ?>';">
<h3><?php echo strftime("%b %d, %G", strtotime($item['date'])); ?></h3>
</div>
</li> </li>
</ul>
<?php } ?> <?php } ?>
</ul>
</div> </div>
<div id='link_content' style='display:none;'> <div id='link_content' style='display:none;'>
<?php foreach($link as $item) { ?>
<ul class='item_list'> <ul class='item_list'>
<?php foreach($link as $item) { ?>
<li> <li>
<div class='item link'> <div class='item link' rel='<?php echo $item['full_date'] ?>' title='<?php echo strftime("%b %d, %G", strtotime($item['date'])); ?>' onclick="location.href='<?php echo $item['url'] ?>';">
<ul> <ul>
<li><a href="<?php echo $item['link']; ?>"><?php echo $item['text']; ?></a></li> <li><a href="<?php echo $item['link']; ?>" ><?php echo str_replace('.','.<br/>',$item['text']); ?></a></li>
</ul> </ul>
</div> </div>
<div class='user_hover' onclick="location.href='<?php echo $item['url'] ?>';">
<h3><?php echo strftime("%b %d, %G", strtotime($item['date'])); ?></h3>
</div>
</li> </li>
</ul>
<?php } ?> <?php } ?>
</ul>
</div> </div>
<div id='photo_content' style='display:none;'> <div id='photo_content' style='display:none;'>
<?php foreach($photo as $item) { ?>
<ul class='item_list'> <ul class='item_list'>
<?php foreach($photo as $item) { ?>
<?php echo "<pre>";
print_r($item);
echo "</pre>"; ?>
<li> <li>
<div class='item' style="background-image:url('<?php echo $item['photo']; ?>')"></div> <div class='item' style="background-image:url('<?php echo $item['photo']; ?>')" rel='<?php echo $item['full_date'] ?>' title="<?php echo strftime("%b %d, %G", strtotime($item['date'])); ?>" onclick="location.href='<?php echo $item['url'] ?>';"></div>
<div class='user_hover' onclick="location.href='<?php echo $item['url'] ?>';">
<h3><?php echo strftime("%b %d, %G", strtotime($item['date'])); ?></h3>
</div>
</li> </li>
</ul>
<?php } ?> <?php } ?>
</ul>
</div> </div>
<div id='regular_content' style='display:none;'> <div id='regular_content' style='display:none;'>
<?php foreach($regular as $item) { ?> <ul class='item_list' rel='<?php echo $item['full_date'] ?>'>
<ul class='item_list'> <?php foreach($regular as $item) { ?>
<li> <li>
<div class='item'> <div class="item" title="<?php echo strftime("%b %d, %G", strtotime($item['date'])); ?>" onclick="location.href='<?php echo $item['url'] ?>';">
<h4><?php echo $item['title']; ?></h4> <h4><?php echo $item['title']; ?></h4>
<p><?php echo $item['body']; ?></p> <p><?php echo $item['body']; ?></p>
</div> </div>
<div class='user_hover' onclick="location.href='<?php echo $item['url'] ?>';">
<h3><?php echo strftime("%b %d, %G", strtotime($item['date'])); ?></h3>
</div>
</li> </li>
</ul>
<?php } ?> <?php } ?>
</ul>
</div> </div>
<div id='video_content' style='display:none;'> <div id='video_content' style='display:none;'>
<ul class='item_list' rel='<?php echo $item['full_date'] ?>'>
<?php foreach($video as $item) { ?> <?php foreach($video as $item) { ?>
<ul class='item_list'>
<li> <li>
<div class='item' style='text-align:center;'> <div class='item' style='text-align:center;' title="<?php echo strftime("%b %d, %G", strtotime($item['date'])); ?>" onclick="location.href='<?php echo $item['url'] ?>';">
<?php echo $item['embed']; //$item['caption'] ?> <?php echo $item['embed']; //$item['caption'] ?>
</div> </div>
<div class='user_hover' onclick="location.href='<?php echo $item['url'] ?>';">
<h3><?php echo strftime("%b %d, %G", strtotime($item['date'])); ?></h3>
</div>
</li> </li>
</ul>
<?php } ?> <?php } ?>
</ul>
</div> </div>
<p style="clear:both">&nbsp;</p>
</div> </div>
<br clear='both' /> <br clear='both' />
<div id='user_hover'><h3>&nbsp;</h3></div>
</div> </div>