[31583] trunk/www

[jmpp at macports.org]

Revision: 31583
          http://trac.macosforge.org/projects/macports/changeset/31583
Author:   jmpp at macports.org
Date:     2007-11-28 12:15:55 -0800 (Wed, 28 Nov 2007)

Log Message:
-----------

Neat improvement over Chris' latest change to the layout of this page: downward alphabetically sorted columns of categories!
Each <li> of the containing <ul> is one colum, containing in turn a <ul> whose <li> entries are the items of the corresponding column.
Adapt the XHTML markup for this, don't use a div for every single category but rather a "categories" encompasing one.

I used two explicit values to achieve this:

 * 15, the number of entries per colum, which I think is OK (10, maybe too litle; 20, maybe too much);
 * 5, the number of columns displaying across the entire page. This is a lame limitation which I used as a working shortcut to complete
   this commit. My eyes are currently too tired to figure out how to abstract this code to cover an arbitrary number of columns
   until the pool returned by 'mysql_fetch_assoc()' (querying the db for categories) is exhausted.

The two numbers happen to work together at the moment because 15 * 5 == 75, which is exactly the number of categories we currently have!
If that changes then I'll have to increase the number of allowed columns or we'll get an incomplete listing, so lets hope other eyes
(Chris and Ryan? ;-) can chime in and improve my technique.

Adapt the CSS to this new display, noting my inability to separate the W3C tags from the categories containing <ul>... helping eyes? ;-)

Modified Paths:
--------------
    trunk/www/macports.css
    trunk/www/ports.php

Modified: trunk/www/macports.css
===================================================================
--- trunk/www/macports.css	2007-11-28 19:19:31 UTC (rev 31582)
+++ trunk/www/macports.css	2007-11-28 20:15:55 UTC (rev 31583)
@@ -195,12 +195,25 @@
     margin-top: 0.7em;
 }
 
-div.port {
+/*
+I want to space out the bottom of the containing ul to separate the W3C tags a bit,
+but I can't find the appropriate css rule to achieve that (and I've been playing
+with many combinations for a while already!).
+#categories ul {
+    margin-bottom: 100px; //ridiculously large value to better visualyze the effect (it should obviously be smaller)
+}
+*/
+
+#categories ul > li  {
+    list-style: none;
     width: 120px;
-    margin: 0.25em;
     float: left;
 }
 
+#categories li li {
+    margin-bottom: 10px;
+}
+
 .email {
     width: 1em;
     height: 1em;

Modified: trunk/www/ports.php
===================================================================
--- trunk/www/ports.php	2007-11-28 19:19:31 UTC (rev 31582)
+++ trunk/www/ports.php	2007-11-28 20:15:55 UTC (rev 31583)
@@ -45,8 +45,8 @@
         </p>
     </form>
 
-    <p>Or view the complete <a href="<?php echo $_SERVER['PHP_SELF']; ?>?by=all">ports list (<?php print ports_count(); ?> ports)
-    </a></p>
+    <p>Or view the complete <a href="<?php echo $_SERVER['PHP_SELF']; ?>?by=all">ports list (<?php print ports_count(); ?>
+    ports)</a>.</p>
     <br />
 
 
@@ -56,16 +56,41 @@
         $query = "SELECT DISTINCT category FROM $portsdb_name.categories ORDER BY category";
         $result = mysql_query($query);
         if ($result) {
-            while ($row = mysql_fetch_assoc($result)) {
+            $columns = 0;
 ?>
-                <div class="port">
+            <div id="categories">
+            
+                <ul>
 
-                    <a href="<?php echo $_SERVER['PHP_SELF']; ?>?by=cat&amp;substr=<?php echo urlencode($row['category']); ?>">
-                    <?php echo htmlspecialchars($row['category']); ?></a>
+<?php
+                    while ($columns < 5) {
+                        $entries_per_colum = 0;
+?>
 
-                </div>
+                        <li>
+                            <ul>
 <?php
-            }
+                                while ($row = mysql_fetch_assoc($result)) {
+?>
+                                    <li><a href="<?php echo $_SERVER['PHP_SELF']; ?>?by=cat&amp;substr=<?php echo urlencode($row['category']); ?>">
+                                    <?php echo htmlspecialchars($row['category']); ?></a></li>
+<?php
+                                    if ($entries_per_colum == 15) break;
+                                    $entries_per_colum++;
+                                }
+?>
+                            </ul>
+                        </li>
+
+<?php
+                        $columns++;
+                    }
+?>
+
+                </ul>
+
+            </div>
+<?php
         }
     }
 ?>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.macosforge.org/pipermail/macports-changes/attachments/20071128/0986ea55/attachment.html