Changeset 31583 for trunk/www


Ignore:
Timestamp:
Nov 28, 2007, 8:15:55 PM (12 years ago)
Author:
jmpp@…
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 column, 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 column, which I think is OK (10 may be too little; 20 may be 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? ;-)

Location:
trunk/www
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/www/macports.css

    r31563 r31583  
    196196}
    197197
    198 div.port {
     198/*
     199I want to space out the bottom of the containing ul to separate the W3C tags a bit,
     200but I can't find the appropriate css rule to achieve that (and I've been playing
     201with many combinations for a while already!).
     202#categories ul {
     203    margin-bottom: 100px; //ridiculously large value to better visualyze the effect (it should obviously be smaller)
     204}
     205*/
     206
     207#categories ul > li  {
     208    list-style: none;
    199209    width: 120px;
    200     margin: 0.25em;
    201210    float: left;
     211}
     212
     213#categories li li {
     214    margin-bottom: 10px;
    202215}
    203216
  • trunk/www/ports.php

    r31580 r31583  
    4646    </form>
    4747
    48     <p>Or view the complete <a href="<?php echo $_SERVER['PHP_SELF']; ?>?by=all">ports list (<?php print ports_count(); ?> ports)
    49     </a></p>
     48    <p>Or view the complete <a href="<?php echo $_SERVER['PHP_SELF']; ?>?by=all">ports list (<?php print ports_count(); ?>
     49    ports)</a>.</p>
    5050    <br />
    5151
     
    5757        $result = mysql_query($query);
    5858        if ($result) {
    59             while ($row = mysql_fetch_assoc($result)) {
    60 ?>
    61                 <div class="port">
    62 
    63                     <a href="<?php echo $_SERVER['PHP_SELF']; ?>?by=cat&amp;substr=<?php echo urlencode($row['category']); ?>">
    64                     <?php echo htmlspecialchars($row['category']); ?></a>
    65 
    66                 </div>
    67 <?php
    68             }
     59            $columns = 0;
     60?>
     61            <div id="categories">
     62           
     63                <ul>
     64
     65<?php
     66                    while ($columns < 5) {
     67                        $entries_per_colum = 0;
     68?>
     69
     70                        <li>
     71                            <ul>
     72<?php
     73                                while ($row = mysql_fetch_assoc($result)) {
     74?>
     75                                    <li><a href="<?php echo $_SERVER['PHP_SELF']; ?>?by=cat&amp;substr=<?php echo urlencode($row['category']); ?>">
     76                                    <?php echo htmlspecialchars($row['category']); ?></a></li>
     77<?php
     78                                    if ($entries_per_colum == 15) break;
     79                                    $entries_per_colum++;
     80                                }
     81?>
     82                            </ul>
     83                        </li>
     84
     85<?php
     86                        $columns++;
     87                    }
     88?>
     89
     90                </ul>
     91
     92            </div>
     93<?php
    6994        }
    7095    }
Note: See TracChangeset for help on using the changeset viewer.