Archive

admin/css/archive.css

@@ -1,26 +1,40 @@
+*{ outline:none;}
 body {
 	background: white;
 	font-family: "Lucida Sans";
 	font-size: 15px;
 	letter-spacing: 2px;
 	line-height: 30px;
+	background: transparent url('../../images/bg.jpg') top center no-repeat;
+	padding:0;
+	margin:0;
 }
 
 #dash {
-	margin: 35px auto 0px auto;
-	padding: 10px;
-	width: 85%;
+	margin: 0 auto;
+	padding: 0;
+	position:relative;
 }
 
+
 #options {
+	position:fixed;
+	height:37px;
 	width:100%;
 	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 {
 	list-style: none;
-	margin-bottom: 5px;
 }
 
 ul {
@@ -38,7 +52,6 @@ h4 {
 
 #options li {
 	display: inline;
-	padding: 10px;
 	color: #999;	
 	font-variant: small-caps;
 }
@@ -46,45 +59,45 @@ h4 {
 #options li a {
 	text-decoration: none;
 	padding:10px 20px;
-	color: #999;
+	color: #666;
 }
 
-#options li a:hover {
-	background-color: #382513;
-	color: #FFF;
+#options li a:hover, #options li a.selected  {
+	color: #000;
+	text-decoration: underline;
 }
 
-#options li a.selected {
-	background-color: #382513;
-	color: #FFF;
-}
 
 #content {
-	padding: 25px;
-	width:auto;
+	text-align: left;
+	padding:20px 0 0 130px;
+	width:600px;
+	margin: 0 auto;
 }
+html > body div#content{ padding:60px 25px 0 25px;}
+
 
 .item {
 	height: 110px;
 	width: 110px;
 	padding: 5px;
 	overflow: hidden;
-	border: thin solid #CCC;
-	border-top: 2px solid #444;
-	float:left;
+	border: 1px solid #CCC;
 	margin: 10px;
 	color: #222;
 	text-align: left;
 	background-color: #FEFEFE;
 	font-size: 11px;
 	line-height: normal;
+	
 }
 
 .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;
 	color:#FFFFFF;
 	display:none;
@@ -103,17 +116,42 @@ div.user_hover {
 	z-index:10;
 	height:113px;
 	width: 112px;
-	margin:10px;
 	cursor: pointer;
 }
 
-li:hover div.user_hover {
+ul.item_list {
+	 margin:10px;
+}
+
+ul.item_list li{
 	display:block;
+	float:left;
+	margin-top:1px;
+	cursor:pointer;
 }
 
-ul.item_list {
-	 width:112px; 
-	 float:left; 
-	 position:relative; 
-	 margin:10px;
-}
+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;}

admin/scripts/tools.js

@@ -67,7 +67,7 @@ $(function(){
 			if($("#context_help").get().length < 1){
 				$('.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(){
 		$(this).stop().attr('title',t);

archive.php

@@ -22,9 +22,15 @@ $photo = array();
 $regular = array();
 $video = array();
 
+$dates = array();
 $rs = $tumble->getPosts($tumble->getPostsNumber());
 if ($db->contarRegistros()>0) {
     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);
     	
 		$theType = util::type2Text($register["type"]);
@@ -57,26 +63,32 @@ function handleNode($node) {
 		$dateTmp = null;
 		$formatedDate = gmdate("M d", strtotime($node["date"]) + util::transform_offset($conf->offsetTime));
         
-		$output = array();		
+		$output = array();
 		$output['url'] = $tumble->getPermalink($node["id_post"]);
  		$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"]);
  		
 		switch($theType) {
 			case 'quote':
 				$output['quote'] = $node["description"];
-				$output['source'] = $node["title"];                                        		
+				$output['source'] = $node["title"];
 				break;
-			case 'conversation':				
+			case 'conversation':
 				$output['lines'] = $tumble->formatConversation($node["description"]);
 				break;
-			case 'url':								
-				$node["title"] = (empty($node["title"]))? $node["url"] : $node["title"];				
+			case 'url':
+				$node["title"] = (empty($node["title"]))? $node["url"] : $node["title"];
 				$output['text'] = $node["title"];
 				$output['link'] = $node["url"];
 				break;
-			case 'photo':				
+			case 'photo':
 				$fileName = "uploads/".util::getFileName($node["url"]);
 				$x = @getimagesize($fileName);
                 if ($x[0] > 500) {
@@ -110,28 +122,85 @@ function handleNode($node) {
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 	<head>
-    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        <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="alternate" type="application/rss+xml" title="RSS" href="<?php echo $conf->urlGelato.($conf->urlFriendly ? "/rss/" : "/rss.php"); ?>"/>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<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="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>
 		<script language="javascript" type="text/javascript" src="<?php echo $conf->urlGelato;?>/admin/scripts/jquery.js"></script>
-		<link href="<?php echo $conf->urlGelato;?>/admin/css/archive.css" type="text/css" rel="stylesheet">
+		<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">		
 		<script type='text/javascript'>
 			function select(object) {
 				var sel_id = object.id;
 				$("a.option").removeClass('selected');
 				$(object).addClass('selected');
-				$("#conversation_content, #quote_content, #link_content, #regular_content, #photo_content, #video_content").hide("slow");
-				$("#"+sel_id+"_content").show("slow");
+				$("#conversation_content, #quote_content, #link_content, #regular_content, #photo_content, #video_content").slideUp("fast");
+				$(".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>
 	</head>
 	
 	<body>
-		
 		<div id='dash'>
-					
 			<div id='options'>
 				<ul id='option-list'>
 					<li><a href='#' id='conversation' class='option selected' onclick="select(this);">Conversations</a></li>
@@ -141,111 +210,127 @@ function handleNode($node) {
 					<li><a href='#' id='quote' class='option' onclick="select(this);">Quotes</a></li>
 					<li><a href='#' id='video' class='option' onclick="select(this);">Videos</a></li>
 				</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='msg' style="display:none;">&nbsp;</div>
+				
 				<div id='conversation_content'>
-					<?php foreach($conversation as $item) { ?>
 					<ul class='item_list'>
+					<?php foreach($conversation as $item) { ?>
 						<li>
-							<div class='item'>
-								<ul>									
-                                    <li><?php echo $item['lines']; ?></li>
+							<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>
+									<li><?php echo $item['lines']; ?></li>
 								</ul>
 							</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>
-					</ul>
 					<?php } ?>
+					</ul>
 				</div>
 				
 				<div id='quote_content' style='display:none;'>
-					<?php foreach($quote as $item) { ?>
 					<ul class='item_list'>
+					<?php foreach($quote as $item) { ?>
 						<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>
 									<li><em>"<?php echo substr($item['quote'], 0, 50), "..."; ?>"</em></li>
 									<li>--<?php echo $item['source']; ?></li>
 								</ul>
 							</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>
-					</ul>
 					<?php } ?>
+					</ul>
 				</div>
 				
 				<div id='link_content' style='display:none;'>
-					<?php foreach($link as $item) { ?>
 					<ul class='item_list'>
+					<?php foreach($link as $item) { ?>
 						<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>
-									<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>
 							</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>
-					</ul>
 					<?php } ?>
+					</ul>
 				</div>
 				
 				<div id='photo_content' style='display:none;'>
-					<?php foreach($photo as $item) { ?>
 					<ul class='item_list'>
+						<?php foreach($photo as $item) { ?>
+								<?php echo "<pre>";
+								print_r($item);
+								echo "</pre>"; ?>
 						<li>
-							<div class='item' style="background-image:url('<?php echo $item['photo']; ?>')"></div>
-							<div class='user_hover' onclick="location.href='<?php echo $item['url'] ?>';">
-								<h3><?php echo strftime("%b %d, %G", strtotime($item['date'])); ?></h3>
-							</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>
 						</li>
-					</ul>
 					<?php } ?>
+					</ul>
 				</div>
 				
 				<div id='regular_content' style='display:none;'>	
-					<?php foreach($regular as $item) { ?>
-					<ul class='item_list'>
+					<ul class='item_list' rel='<?php echo $item['full_date'] ?>'>
+						<?php foreach($regular as $item) { ?>
 						<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>
 								<p><?php echo $item['body']; ?></p>
 							</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>
-					</ul>
 					<?php } ?>
+					</ul>
 				</div>
 				
 				<div id='video_content' style='display:none;'>
+					<ul class='item_list' rel='<?php echo $item['full_date'] ?>'>
 					<?php foreach($video as $item) { ?>
-					<ul class='item_list'>
 						<li>
-							<div class='item' style='text-align:center;'>
-								<?php echo  $item['embed']; //$item['caption'] ?>								
-							</div>
-							<div class='user_hover' onclick="location.href='<?php echo $item['url'] ?>';">
-								<h3><?php echo strftime("%b %d, %G", strtotime($item['date'])); ?></h3>
+							<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'] ?>
 							</div>
 						</li>
-					</ul>
 					<?php } ?>
+					</ul>
 				</div>
-
+			<p style="clear:both">&nbsp;</p>
 			</div>
 			
 			<br clear='both' />
-			
+			<div id='user_hover'><h3>&nbsp;</h3></div>
+
 		</div>
 		
 	</body>
 
-</html>
+</html>