Added some new style, and relative timestamp

diff --git a/get.php b/get.php
index c37c600e0b663c44fe3b76fc03b4cc8996dc4b4a..a2168e10b1a903af0417061073f4f2cffea98ad2 100644 (file)
--- a/get.php
+++ b/get.php
@@ -106,32 +106,12 @@ function deleteClump( id, elem ) {
 ?>
     
     <li>
-        
-        <? /* 
-        <?php if ($hasDescription || count($row['tags']) > 0 || $user['user'] == $row['user']) : ?>
-        <a href="#" class="more" onClick="$(this.parentNode).addClass('expand');">+</a>
-        <a href="#" class="less" onClick="$(this.parentNode).removeClass('expand');">-</a>
-        <?php else : ?>
-        &nbsp; 
-        <?php endif; ?>
-        */ ?>
-
             
         <span class="url">
             <a href="<?php echo $row['url'] ?>">
                 <?php echo $row['title'] ? $row['title'] : "&lt;title&gt;" ?>
             </a>
-        </span>  
-
-        <span class="meta">
-            <?php echo date("Y-m-d", strtotime($row['date'])) ?> by 
-            <a class="uname" href="/?user=<?php echo $row['user'] ?>"><?php echo $row['user'] ?></a>
-        </span>        
-
-        <?php if ($user['user'] == $row['user']): ?>
-                <a href="/edit.php?id=<?php echo $row['clump_id'];?>" class="ui edit">&#x2710;</a>
-                <a href="#" title="Delete" onClick="return deleteClump(<?php echo $row['clump_id']; ?>, this.parentNode);" class="ui delete">&times;</a>
-        <?php endif; ?>         
+        </span>     
 
         <div class="expand">
             <?php if ($hasDescription) : ?>
@@ -148,6 +128,17 @@ function deleteClump( id, elem ) {
             <?php endif; ?>
         </div>
 
+
+        <span class="meta">
+            <span title="<?php echo date('r', strtotime($row['date'])); ?>"><?php echo approximate_time(date('U') - strtotime($row['date'])) ?> ago</a> by 
+            <a class="uname" href="/?user=<?php echo $row['user'] ?>"><?php echo $row['user'] ?></a>
+        </span>        
+
+        <?php if ($user['user'] == $row['user']): ?>
+            <a href="/edit.php?id=<?php echo $row['clump_id'];?>" class="ui edit">&#x2710;</a>
+            <a href="#" title="Delete" onClick="return deleteClump(<?php echo $row['clump_id']; ?>, this.parentNode);" class="ui delete">&times;</a>
+        <?php endif; ?>              
+
     </li>
 
 <?php endfor; ?>

diff --git a/output.php b/output.php
new file mode 100644 (file)
index 0000000..1fda99c
--- /dev/null
+++ b/output.php
@@ -0,0 +1,23 @@
+<?php
+
+/**
+* @param    int     $seconds    Number of seconds to convert into a human-readable timestamp
+* @return   tring   Human-readable approximate timestamp like "2 hours"
+*/
+function approximate_time($seconds)
+{
+    switch(true)
+    {
+        case abs($seconds) <= 90:
+            return 'moments';
+
+        case abs($seconds) <= 90 * 60:
+            return round(abs($seconds) / 60).' minutes';
+
+        case abs($seconds) <= 36 * 60 * 60:
+            return round(abs($seconds) / (60 * 60)).' hours';
+
+        default:
+            return round(abs($seconds) / (24 * 60 * 60)).' days';
+    }
+}

diff --git a/signin.php b/signin.php
index 1e634d0dd711affcf52c52e66b1fcb95c53d38fa..644b612c06fa0cc3d6894fc4e12789adf28a6248 100644 (file)
--- a/signin.php
+++ b/signin.php
@@ -87,7 +87,7 @@
 
 <?php if ($user = get_user()) : ?>
 
-    <a href="/<?php echo $user['user']; ?>"><?php echo $user['user']; ?></a>
+    <a href="/<?php echo $user['user']; ?>"><?php echo $user['user']; ?></a>&nbsp;&nbsp;
     <a href="#" onClick="return onLogout();">logout</a>
 
 <? else:  ?>

diff --git a/style.css b/style.css
index 6f2afa1b54a7de29f06ce5eecd5151c4cb6f1cbb..df4e08c2e9da0daef078a758875e83c372deb825 100644 (file)
--- a/style.css
+++ b/style.css
@@ -1,18 +1,17 @@
 body {
      color: #444444;
-     font-family: Monaco, monospace;
-     font-size: 12px;
+     font-family: Georgia, sans-serif;
+     font-size: 13px;
      line-height: 1.3em;
 }
 a {
     text-decoration:none;
 }
 a:hover {
-     color: #000099;
-     text-decoration: underline;
+    color: #000099 !important;
 }
 ul {
-     padding: 0pt;
+    padding: 0pt;
 }
 li {
      list-style-type: none;
@@ -33,6 +32,7 @@ hr {
      color: #000000;
 }
 
+
 #signin {
     position:absolute;
     top:0;
@@ -43,47 +43,43 @@ hr {
      display: inline-block;
 }
 
+
 ul.links li {
-    margin-top:0.35em;
-    margin-bottom:0.35em;
+    margin-top:1.5em;
+    margin-bottom:1.5em;
 }
-ul.links li span.url {
+ul.links li span.url a {
     display:inline-block;
 }
+ul.links li span.url a {
+    text-decoration:underline;
+    color:#000;
+}
+ul.links li span.url a:hover {
+    text-decoration:none;
+}
 ul.links li span.meta {
     color:#bbb;
+    font-style:italic;
+    font-size:12px;
 }
 ul.links li span.meta a {
     color:#999;
 }
 ul.links li .desc {
-    margin-left:1em;
+    color:#009;
 }
 ul.links li .expand {
     color:#aaa;
 }
-ul.links li.expand .expand {
-    display:block;
-}
 ul.links li .desc {
     display:inline-block;
 }
 ul.links li .tags {
-    display:inline-block;
-}
-ul.links li .less {
-    display:none;
-}
-ul.links li .more {
-    display:inline;
-}
-ul.links li.expand .more {
-    display:none;
-}
-ul.links li.expand .less {
-    display:inline;
+    display:block;
 }
 
+
 .ui {
     color:#99f;
     text-decoration:none;
@@ -98,6 +94,7 @@ ul.links li.expand .less {
 .ui.edit {
 }
 
+
 form.new input[type="text"] {
     width:100%;
 }
@@ -105,14 +102,22 @@ form.new input[type="text"] {
 
 
 ul.tags, ul.tags li {
-    display:inline;
+    font-style:italic;
+    display:inline-block;
+    font-size:12px;
 }
 ul.tags li {
-    background:#eef;
-    padding:0 4px;
-    margin:0 1px;
+    margin:0 1px 0 0;
 }
 ul.tags li a {
-    color:#aaf;
+    color:#aaa;
+    text-decoration:none;
 }
-
+ul.tags li a:hover {
+}
+ul.tags li:after {
+    content:", "
+}
+ul.tags li:last-child:after {
+    content:"";
+}
\ No newline at end of file