com web/php: Major homepage rework. The old layout prioritized all the wrong things. This rework is not complete, but after surveying multiple people
it does seem better already, so I decided to push.: View/HomepageNewsView.php include/footer.inc include/header.inc index-beta.php js/common.js
styles/home.css styles/theme.css views/homepage/sidebar.php

Commit: ee7acf4ae026dd444feae54378300e267a4e6391 Author: Levi Morrison <levim@php.net> Tue, 3 Jul 2012 17:24:07 -0600 Parents: 972b42119997a50ce6b1cb4d6c490cca8348c244 Branches: master Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=ee7acf4ae026dd444feae54378300e267a4e6391 Log: Major homepage rework. The old layout prioritized all the wrong things. This rework is not complete, but after surveying multiple people it does seem better already, so I decided to push. Also fixed many small usability issues such as links not changing appearance on focus, but do change on hover. Changed paths: M View/HomepageNewsView.php M include/footer.inc M include/header.inc M index-beta.php M js/common.js M styles/home.css M styles/theme.css M views/homepage/sidebar.php

diff --git a/View/HomepageNewsView.php b/View/HomepageNewsView.php index 74e5b1f..bc56a12 100644 --- a/View/HomepageNewsView.php +++ b/View/HomepageNewsView.php @@ -18,9 +18,7 @@ class HomepageNewsView { ob_start(); ?> - <div class='recentNewsEntries'> - <h1><a href="/archive/" title='Recent News / Archived News'>Recent News</a></h1> - + <div id='recentNewsEntries'> <?php foreach ($this->articles as $article) : /** @@ -33,7 +31,7 @@ class HomepageNewsView { $publishedDate = $article->getPublishedString(); $newsDate = $article->getPublishedDate()->format('d-M-Y'); - $content = $article->getContent(); + $contentRaw = $article->getContent(); $permanentLink = "#" .$id; foreach($article->getLink() as $link) { @@ -43,6 +41,31 @@ class HomepageNewsView { } } + $dom = new DOMDocument(); + @$dom->loadHTML($contentRaw); + + $xpath = new DomXPath($dom); + $nodes = $xpath->query('//body/div/*'); + + if ($nodes !== FALSE) { + $content = '<div>'; + + $count = 0; + foreach ($nodes as $node) { + if ($count++ < 2) { + $content .= $dom->saveXML($node); + } + } + + if ($count > 2) { + $content .= "<p class='fullArticleLink'><a href='$permanentLink' class>&hellip; read full article</a></p>"; + } + + $content .= '</div>'; + } else { + $content = $contentRaw; + } + $image = ""; $newsImage = $article->getNewsImage(); if(isset($newsImage["link"]) && $newsImage["content"]) { @@ -66,6 +89,8 @@ class HomepageNewsView { endforeach; ?> + <p class='newsArchive'><a href='/archive/'>More news &raquo;</a></p> + </div> diff --git a/include/footer.inc b/include/footer.inc index 1cc0e47..7e624e0 100644 --- a/include/footer.inc +++ b/include/footer.inc @@ -1,4 +1,12 @@ </section><!-- layout-content --> + <?php + if (!empty($config['spanning-content'])) { + print "<div class='spanning-content'>"; + print $config['spanning-content']; + print "</div>"; + } + + ?> </div><!-- layout --> <footer> diff --git a/include/header.inc b/include/header.inc index c0f1e65..7e08b77 100644 --- a/include/header.inc +++ b/include/header.inc @@ -116,7 +116,7 @@ if (isset($shortname) && $shortname) { </p><p> Fast, flexible and pragmatic, PHP powers everything from your blog to the largest social networking site in the world. </p> - <p class="tutorial"><a href="/tut.php">&raquo; Begin Tutorial</a></p> + <p class="tutorial"><a href="/tut.php">Begin Tutorial &raquo;</a></p> </div> <div class="download"> <h2>Download PHP</h2> diff --git a/index-beta.php b/index-beta.php index 1af46b2..1a8218c 100644 --- a/index-beta.php +++ b/index-beta.php @@ -75,60 +75,13 @@ if (is_array($CONF_TEASER) && $CONF_TEASER) { $announcements = ''; } -// Prepare featured content. -$features = " -<div class=featured-content> - <div class='feature top-left'> - <span class='graphic'></span> - <h3>Get Involved</h3> - <p> - We are looking for people with talents of various kinds, not just developers. <br/> - <a href='/get-involved.php' class='readmore'>See how you can contribute.</a> - </p> - </div> - <div class='feature top-right'> - <span class='graphic'></span> - <h3>Need Help?</h3> - <p> - Thankfully, PHP has one of the best support communities in existence. <br/> - <a href='/support.php' class='readmore'>View support options.</a> - </p> - </div> - <div class='feature bottom-left'> - <span class='graphic'></span> - <h3> - <abbr title='The PHP Extension Community Library'>PECL</abbr> &amp; - <abbr title='The PHP Extension and Application Repository'>PEAR</abbr> - </h3> - <p> - PHP has a large extension library called - <a href='http://pecl.php.net/' title='Homepage for the PECL project'>PECL</a>, - and a reusable class library called - <a href='http://pear.php.net/' title='Homepage for the PEAR project'>PEAR</a>. - </p> - </div> - <div class='feature bottom-right'> - <span class='graphic'></span> - <h3>Website Tips</h3> - <p> - Everything has 'an app' these days, even the PHP manual. - We also have <a href='/tips.php'>tips and tricks</a> - to save you keystrokes. - </p> - </div> -</div> - <br class='clear-left' /> - <div class='separator'></div> -"; require_once './Gateway/NewsFileSystemGateway.php'; $NewsGateway = new NewsFileSystemGateway(); $RecentNews = $NewsGateway->getArticlesForCategories(new ArrayIterator(array( - "conferences", - "cfp", "frontpage" -))); +)), 2); ob_start(); @@ -142,7 +95,6 @@ $news = ob_get_clean(); // Wrap announcements and features in a content element $content = " <div class='home-content'> - $features $news </div> "; @@ -183,10 +135,37 @@ print_view('homepage/sidebar.php', array( )); print $content; +$thanksTo = <<<THANKS +<section id='thanks-to'> + <h3>Thanks To</h3> + <ul> + <li><a target="_blank" href="http://www.easydns.com/?V=698570efeb62a6e2" title="DNS Hosting provided by easyDNS">easyDNS</a></li> + <li><a target="_blank" href="http://www.directi.com/" title="Directi">Directi</a></li> + <li><a target="_blank" href="http://promote.pair.com/direct.pl?php.net" title="pair Networks">pair Networks</a></li> + <li><a target="_blank" href="http://www.servercentral.net/" title="Server Central">Server Central</a></li> + <li><a target="_blank" href="http://www.hostedsolutions.com/" title="Hosted Solutions">Hosted Solutions</a></li> + <li><a target="_blank" href="http://www.spry.com/" title="Spry VPS Hosting">Spry VPS Hosting</a></li> + <li><a target="_blank" href="http://ez.no/" title="eZ Systems">eZ Systems</a> / <a href="http://www.hit.no/">HiT</a></li> + <li><a target="_blank" href="http://www.osuosl.org" title="OSU Open Source Lab">OSU Open Source Lab</a></li> + <li><a target="_blank" href="http://www.yahoo.com/" title="Yahoo! Inc.">Yahoo! Inc.</a></li> + <li><a target="_blank" href="http://www.binarysec.com/" title="BinarySEC">BinarySEC</a></li> + <li><a target="_blank" href="http://www.nexcess.net/" title="NEXCESS.NET">NEXCESS.NET</a></li> + <li><a target="_blank" href="http://www.rackspace.com/" title="Rackspace">Rackspace</a></li> + <li><a target="_blank" href="http://www.eukhost.com/" title="EUKhost">EUKhost</a></li> + <li><a target="_blank" href="http://www.sohosted.nl/webhosting/" title="Sohosted">Sohosted</a></li> + <li><a target="_blank" href="http://www.redpill-linpro.com" title="Redpill Linpro">Redpill Linpro</a></li> + <li><a target="_blank" href="http://www.facebook.com" title="Facebook">Facebook</a></li> + <li><a target="_blank" href="http://krystal.co.uk" title="Krystal.co.uk">Krystal.co.uk</a></li> + <li><a target="_blank" href="http://servergrove.com/" title="ServerGrove">ServerGrove</a></li> + </ul> +</section> +THANKS; + // Print the common footer. site_footer( array( "atom" => "/feed.atom", // Add a link to the feed at the bottom - 'elephpants' => true + 'elephpants' => true, + 'spanning-content' => $thanksTo ) ); diff --git a/js/common.js b/js/common.js index 3e0ab96..12bf92d 100644 --- a/js/common.js +++ b/js/common.js @@ -214,7 +214,7 @@ $(document).ready(function() { if (foundToc) { jQuery.getScript("/js/jquery.scrollto.min.js", function(){ - l.delegate("a.toc_item","click keypress", function(e) { + l.delegate("a.toc_item","click keypress", function() { // Escape dots in ids so they won't be treated as class selectors $.scrollTo($(this).attr("href").replace(".", "\\\."), 400); }); @@ -246,6 +246,12 @@ $(document).ready(function() { }); }); + var $headingsWithIds = $('h1 a[id], h2 a[id], h3 a[id], h4 a[id]'); + $headingsWithIds.each(function(){ + var $this = $(this); + $this.after("<a class='genanchor' href='#" + $this.attr('id') + "'> ¶</a>") + }); + var $elephpants = $(".elephpants"); var $elephpantsImages = $elephpants.find('.images'); // load the elephpant images if elephpants div is in the dom. diff --git a/styles/home.css b/styles/home.css index 9c389a9..79ae44a 100644 --- a/styles/home.css +++ b/styles/home.css @@ -6,7 +6,7 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 #mega-drop-down div.what-is-php { color: #eee; - width: 650px; + width: 648px; float: left; } @@ -50,10 +50,10 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 #mega-drop-down div.download { color: #eee; - width: 250px; - margin:0 30px; + width: 264px; + margin:0 0 0 20px; display: block; - float: right; + float: left; min-height:240px; background:#4f4f4f; } @@ -183,7 +183,7 @@ section.layout-content.home { } div.home-content { - width: 650px; + width: 648px; } /* Announcement Area */ @@ -191,9 +191,9 @@ div.home-content { .home .announcements { display: table; width: 100%; - background-color: #bfbfff; + background-color: #cce; padding: 1.5em; - text-align: center; + text-align: left; margin: 0 auto; list-style: none; } @@ -262,9 +262,9 @@ div.featured-content div.bottom-right span.graphic { div.home-sidebar { float: right; - width: 250px; - padding: 0 30px 20px 30px; - margin: 0 0 20px 20px; + width: 264px; + padding: 0 0 1.5em; + margin: 0 0 0 20px; } div.home-sidebar h3 { @@ -276,6 +276,26 @@ div.home-sidebar h3 { div.home-sidebar h3:first-child { margin-top: 0; } +div.home-sidebar h3.panel { + line-height: 1.2em; + border:0; + margin:1.2em 0; +} +div.home-sidebar h3.panel a { + background:#ddd; + color:#333; + border:0; + display: block; + padding:.6em 1em; +} +div.home-sidebar h3.panel a::after { + float:right; + content:"»"; +} +div.home-sidebar h3.panel a:hover, +div.home-sidebar h3.panel a:focus { + background:#eee; +} div.home-sidebar ul { margin: 0 0 0 0; @@ -287,13 +307,13 @@ div.home-sidebar a:link, div.home-sidebar a:visited { border-bottom-color: transparent; } -div.home-sidebar a:hover { +div.home-sidebar a:hover, +div.home-sidebar a:focus { border-bottom-color: #3F438D; } -.home-content .recentNewsEntries { +.home-content #recentNewsEntries { position: relative; - margin-top:3em; } .clear-left { @@ -305,4 +325,34 @@ div.home-sidebar a:hover { margin-top:3em; margin-bottom:-.25em; background:#669; +} +#thanks-to { + border-top:.25em solid #669; + padding-top:1.25em; +} +.newsItem:first-child { + margin-top:0; +} + +.newsItem h2 a { + border-bottom-width:0; +} +.newsItem h2 a:hover, +.newsItem h2 a:focus { + border-bottom-width:1px; +} +.fullArticleLink a { + color:#666; + border-color:transparent; + font-size:.75em; + line-height: 2; + display: inline-block; +} +.fullArticleLink a:hover, +.fullArticleLink a:focus { + color:#333; + border-bottom-color:#333; +} +.newsArchive { + text-align: right; } \ No newline at end of file diff --git a/styles/theme.css b/styles/theme.css index 2be21ed..a61fe68 100755 --- a/styles/theme.css +++ b/styles/theme.css @@ -63,13 +63,13 @@ h1, h1 a, h1 a:visited, h1 a:link { } h1 a:hover, h1 a:focus { - color: #444; - border-color:#444; + color: #000; + border-color:#000; } h2, h2 a, h2 a:visited, h2 a:link { - color: #222; - border-color:#222; + color: #333; + border-color:#333; } h2 a:hover, @@ -98,8 +98,9 @@ a:visited { border-bottom: 1px solid #c5c3e3; } -a:hover { - color: #3F438D; +a:hover, +a:focus { + color: #015; border-bottom: 1px solid #3F438D; } @@ -131,9 +132,8 @@ hr { } #headmenu { - width: 930px; + width: 960px; margin: 0 auto; - padding-right: 30px; } #headnav h6, @@ -146,8 +146,7 @@ hr { padding: 18px 0 0 0; } -#headnav #headhome a.menu-link, -#headnav #headhome a.menu-link:hover { +#headnav #headhome a.menu-link { background: url(/images/sprites.png) 0 0; width: 120px; height: 16px; @@ -177,7 +176,7 @@ hr { font-weight: bold; } #headsearch { - width:244px; + width:258px; } #headnav li#headsearch { margin: 22px 0 0 20px; @@ -189,7 +188,7 @@ hr { #headsearch-keywords { border: 0; padding: 2px; - width: 208px; + width: 220px; float: left; } @@ -205,6 +204,9 @@ hr { color: #000; } +#headsearch-submit { + float:right; +} #headsearch-submit, #changelang-submit { @@ -238,6 +240,7 @@ hr { #headnav li.current a.menu-link, #headnav li a.menu-link:hover, +#headnav li a.menu-link:focus, #headnav li#headhome.current { border-color: #666699; } @@ -269,7 +272,8 @@ hr { box-shadow: 0px .25em .5em rgba(0,0,0,.33); } -.ui-autocomplete .ui-state-hover { +.ui-autocomplete .ui-state-hover, +.ui-autocomplete .ui-state-focus { background-color: #666699; color: white; } @@ -307,7 +311,8 @@ hr { color:#666; } -.ui-autocomplete .ui-state-hover .search-item-description { +.ui-autocomplete .ui-state-hover .search-item-description, +.ui-autocomplete .ui-state-focus .search-item-description { color:#ccc; } @@ -497,7 +502,8 @@ pre.info { color: #eee; } -#mega-drop-down a:hover { +#mega-drop-down a:hover, +#mega-drop-down a:focus { color: #FFF; border-bottom: none; } @@ -505,10 +511,11 @@ pre.info { /* {{{ The anchor for section headers */ a.genanchor:link, a.genanchor:visited { - color: #fff; + color: transparent; border-bottom: none; } -a.genanchor:hover { +a.genanchor:hover, +a.genanchor:focus { color: #000; border-bottom: none; } @@ -653,7 +660,8 @@ footer a:visited { border-bottom: none; } -footer a:hover { +footer a:hover, +footer a:focus { color: #888; border-bottom: none; } @@ -694,7 +702,8 @@ div.elephpants:hover img { -moz-transition: all 0.25s ease-in-out; } -div.elephpants img:hover { +div.elephpants img:hover, +div.elephpants img:focus { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; @@ -739,4 +748,9 @@ table.standard td { } .newsItem abbr.published { margin-bottom:-1px; +} +.spanning-content { + width:960px; + margin: 0 auto; + clear:both; } \ No newline at end of file diff --git a/views/homepage/sidebar.php b/views/homepage/sidebar.php index 0da77aa..3c0fdd8 100644 --- a/views/homepage/sidebar.php +++ b/views/homepage/sidebar.php @@ -1,41 +1,13 @@ -<div class=home-sidebar> +<div class='home-sidebar'> - <?php echo $announcements; ?> + <?php if (!empty($announcements)): + echo $announcements; + endif;?> - <h3>Conferences</h3> - <ul> - <li>Conference 1</li> - <li>Conference 2</li> - <li>Conference 3</li> - </ul> - - <h3>User Group Events</h3> - <ul> - <li>Event 1</li> - <li>Event 2</li> - <li>Event 3</li> - </ul> - - <h3>Thanks To</h3> - <ul> - <li><a target="_blank" href="http://www.easydns.com/?V=698570efeb62a6e2" title="DNS Hosting provided by easyDNS">easyDNS</a></li> - <li><a target="_blank" href="http://www.directi.com/" title="Directi">Directi</a></li> - <li><a target="_blank" href="http://promote.pair.com/direct.pl?php.net" title="pair Networks">pair Networks</a></li> - <li><a target="_blank" href="http://www.servercentral.net/" title="Server Central">Server Central</a></li> - <li><a target="_blank" href="http://www.hostedsolutions.com/" title="Hosted Solutions">Hosted Solutions</a></li> - <li><a target="_blank" href="http://www.spry.com/" title="Spry VPS Hosting">Spry VPS Hosting</a></li> - <li><a target="_blank" href="http://ez.no/" title="eZ Systems">eZ Systems</a> / <a href="http://www.hit.no/">HiT</a></li> - <li><a target="_blank" href="http://www.osuosl.org" title="OSU Open Source Lab">OSU Open Source Lab</a></li> - <li><a target="_blank" href="http://www.yahoo.com/" title="Yahoo! Inc.">Yahoo! Inc.</a></li> - <li><a target="_blank" href="http://www.binarysec.com/" title="BinarySEC">BinarySEC</a></li> - <li><a target="_blank" href="http://www.nexcess.net/" title="NEXCESS.NET">NEXCESS.NET</a></li> - <li><a target="_blank" href="http://www.rackspace.com/" title="Rackspace">Rackspace</a></li> - <li><a target="_blank" href="http://www.eukhost.com/" title="EUKhost">EUKhost</a></li> - <li><a target="_blank" href="http://www.sohosted.nl/webhosting/" title="Sohosted">Sohosted</a></li> - <li><a target="_blank" href="http://www.redpill-linpro.com" title="Redpill Linpro">Redpill Linpro</a></li> - <li><a target="_blank" href="http://www.facebook.com" title="Facebook">Facebook</a></li> - <li><a target="_blank" href="http://krystal.co.uk" title="Krystal.co.uk">Krystal.co.uk</a></li> - <li><a target="_blank" href="http://servergrove.com/" title="ServerGrove">ServerGrove</a></li> - </ul> + <h3 class='panel news'><a href='/archive/'>Recent News</a></h3> + <h3 class='panel documentation'><a href='/manual/'>Documentation</a></h3> + <h3 class='panel events'><a href='/conferences/'>Conferences</a></h3> + <h3 class='panel events'><a href='/cal.php'>User Group Events</a></h3> + <h3 class='panel tips'><a href='/tips.php'>Tips and Tricks</a></h3> </div>