update spotlight output

src/OnePeek.WebConsole/Modules/HomeModule.cs

@@ -16,10 +16,16 @@ namespace OnePeek.WebConsole.Modules
 
       Get["/", true] = async (ctx, token) =>
       {
-        StoreSpotlightResults result = await api.GetSpotlight(StoreSpotlightType.Apps, StoreType.WindowsPhone8, StoreCultureType.EN_US);
+        StoreSpotlightResults apps = await api.GetSpotlight(StoreSpotlightType.Apps, StoreType.WindowsPhone8, StoreCultureType.EN_US);
+        StoreSpotlightResults games = await api.GetSpotlight(StoreSpotlightType.Games, StoreType.WindowsPhone8, StoreCultureType.EN_US);
+
+        IEnumerable<string> appIds = await api.GetSpotlightIds(StoreSpotlightType.Apps, StoreType.WindowsPhone8, StoreCultureType.EN_US);
+
         return View["Index", new
         {
-          Spotlight = result
+          SpotlightIds = appIds,
+          Spotlight = apps,
+          SpotlightGames = games
         }];
       };
 

src/OnePeek.WebConsole/Views/Index.cshtml

@@ -37,7 +37,7 @@
 <br /><br />
 
 <div class="large-12 columns">
-  <h3>SPOTLIGHT</h3>
+  <h3>APPS SPOTLIGHT</h3>
   <div class="spotlight">
     @{ var i = 0; }
     @foreach (var result in Model.Spotlight.Results)
@@ -46,7 +46,7 @@
         <img src="/api/image/@(result.Images.Logo.Id).jpg" alt="@result.Name" class="spotlight-image" />
         <b>@result.Name</b>
       </a>
-      @if (++i % 5 == 0 && i > 1)
+      if (++i % 10 == 0 && i > 1)
       {
         <div style="clear:both;float:none;"></div>
       }
@@ -54,17 +54,48 @@
   </div>
 </div>
 
+<div style="clear:both;"></div>
+<br /><br />
 
+<div class="large-12 columns">
+  <h3>GAMES SPOTLIGHT</h3>
+  <div class="spotlight">
+    @{ i = 0; }
+    @foreach (var result in Model.SpotlightGames.Results)
+    {
+      <a href="/meta/?id=@result.Id" class="spotlight-item">
+        <img src="/api/image/@(result.Images.Logo.Id).jpg" alt="@result.Name" class="spotlight-image" />
+        <b>@result.Name</b>
+      </a>
+      if (++i % 10 == 0 && i > 1)
+      {
+        <div style="clear:both;float:none;"></div>
+      }
+    }
+  </div>
+</div>
+
+<div style="clear:both;float:none;"></div>
+<br /><br /><br /><br />
 
 <style>
   .spotlight-item
   {
     display: inline-block;
-    width: 20%;
+    width: 10%;
     float: left;
     padding: 5px;
   }
 
+  .spotlight-item b
+  {
+    font-size: 12px;
+    display: block;
+    max-height: 20px;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
   .spotlight-image
   {
     display: block;