Fixed CSS for recommended page. Added dynamic recommended page and template. Fixed link to recommended page.

git-svn-id: svn://10.0.0.236/trunk@188452 18797224-902f-48f8-a5cc-f745e15eee43

mozilla/webtools/addons/public/htdocs/css/cavendish/content.css

@@ -177,9 +177,23 @@
     margin-top: 0.2em;
 }
 
+.recommended {
+    clear: both;
+    padding: 1em 0;
+}
+
+.recommended h2 {
+    padding: 1em 0 0 215px;
+    margin: 0;
+}
+
+.recommended p {
+    padding-left: 215px;
+}
+
 .recommended-download h3 {
 	font: small tahoma, verdana, sans-serif;
-	margin: 5px 0 0 0;
+	margin: 0;
 	background: url("../../images/download.gif") 0 100%;
     font-size: small;
 	padding-bottom: 5px;
@@ -202,10 +216,9 @@
 }
 
 .recommended-download {
-    clear: left;
+    display: block;
 	width: 200px;
-    padding: 5px;
-    float: left;
+    padding: 15px 0 0 215px;
 }
 
 .recommended-img {
@@ -214,10 +227,6 @@
     margin: 1em 1em 0 0;
 }
 
-.recommended h2 {
-    padding-top: 1em;
-}
-
 .iconbar {
 	padding-right: 15px;
     float: left;

mozilla/webtools/addons/public/htdocs/recommended.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * Home page for extensions, switchable on application.
+ *
+ * @package amo
+ * @subpackage docs
+ */
+
+startProcessing('recommended.tpl', null, $compileId, 'nonav');
+require_once('includes.php');
+
+// If app is not set or empty, set it to null for our switch.
+$_GET['app'] = (!empty($_GET['app'])) ? $_GET['app'] : null;
+
+// Determine our application.
+switch( $_GET['app'] ) {
+    case 'mozilla':
+        $clean['app'] = 'Mozilla';
+        break;
+    case 'thunderbird':
+        $clean['app'] = 'Thunderbird';
+        break;
+    case 'firefox':
+    default:
+        $clean['app'] = 'Firefox';
+        break;
+}
+
+// $sql['app'] can equal $clean['app'] since it was assigned in a switch().
+// We have to ucfirst() it because the DB has caps.
+$sql['app'] = $clean['app'];
+
+$amo = new AMO_Object();
+
+// Assign template variables.
+$tpl->assign(
+    array(  'recommendedExtensions'  => $amo->getRecommendedAddons($sql['app'],'E',10),
+            'title'             => 'Recommended '.$clean['app'].' Addons',
+            'content'           => 'recommended.tpl',
+            'cats'              => $amo->getCats('E'))
+);
+?>

mozilla/webtools/addons/public/tpl/index.tpl

@@ -11,7 +11,7 @@
         <h2><a href="{$config.webpath}/addon.php?id=1532">del.icio.us</a></h2>
         <p class="first">Harness the power of social bookmarking right in your browser with the del.icio.us Firefox extension! The del.icio.us extension for Firefox offers everything you need to seamlessly integrate the del.icio.us service with your Firefox browser. <a href="{$config.webpath}/addon.php?id=1532">Learn more...</a></p>
     </div>
-    <a class="top-feature" href="{$config.webpath}/recommended.php"><img src="{$config.webpath}/images/feature-recommend.png" width="213" height="128" style="padding-left: 12px;" alt="We Recommend: See some of our favorite extensions to get you started."></a>
+    <a class="top-feature" href="{$config.webpath}/{$app}/recommended/"><img src="{$config.webpath}/images/feature-recommend.png" width="213" height="128" style="padding-left: 12px;" alt="We Recommend: See some of our favorite extensions to get you started."></a>
 
     <div class="split-feature-two">
     <h2><img src="{$config.webpath}/images/title-topdownloads.gif" width="150" height="24" alt="Top 10 Downloads"></h2>

mozilla/webtools/addons/public/tpl/recommended.tpl

@@ -0,0 +1,19 @@
+<div id="mBody">
+<h1>Getting Started with Extensions</h1>
+
+<p>With over 300 extensions available for Firefox, there's something for everyone. To get you started, here's a list of some of our recommended extensions that make use of popular online services.</p>
+
+{section name=re loop=$recommendedExtensions step=1 start=0}
+<div class="recommended">
+
+<a href="{$config.webpath}/{$app}/{$recommendedExtensions[re].id}/previews/"><img class="recommended-img" alt="" src="{$config.webpath}{$recommendedExtensions[re].previewuri}"/></a>
+<h2><a href="{$config.webpath}/{$app}/{$recommendedExtensions[re].id}/">{$recommendedExtensions[re].name}</a></h2>
+<div class="recommended-download">
+<h3><a href="{$recommendedExtensions[re].uri}" onclick="return install(event,'{$recommendedExtensions[re].name} {$recommendedExtensions[re].version}', '{$config.webpath}/images/default.png');" title="Install {$recommendedExtensions[re].name} {$recommendedExtensions[re].version} (Right-Click to Download)">Install Extension ({$recommendedExtensions[re].size} KB)</a></h3>
+</div>
+<p>{$recommendedExtensions[re].body|nl2br}</p>
+</div>
+{/section}
+</div>
+
+<br class="clear-both"/>