Improve readability of items on the TV Shows Grid (#206)

* Decreasing number of items on TV Series grid to 6 and sizing for 2 rows
* Reducing m.page_size to 48 from 50. Fixing collections page to have 6 per row

components/ItemGrid.brs

@@ -12,18 +12,24 @@ end sub
 sub updateSize()
   m.top.numRows = 1
   if m.top.itemsPerRow = invalid or m.top.itemsPerRow = 0 then
-    m.top.itemsPerRow = 5
+    m.top.itemsPerRow = 6
   end if
 
   dimensions = m.top.getScene().currentDesignResolution
 
   border = 75
-  m.top.translation = [border, border + 115]
+  topSpace = border + 105
+  m.top.translation = [border, topSpace]
 
-  textHeight = 80
-  itemWidth = (dimensions["width"] - border*2) / m.top.itemsPerRow
+  textHeight = 100
+  itemWidth = (dimensions["width"] - border*2) / m.top.itemsPerRow -20
   itemHeight = itemWidth * 1.5 + textHeight
 
+  if itemHeight*m.top.rowsPerPage > (dimensions["height"] - border - 115) then
+    ratio = (itemHeight*m.top.rowsPerPage) / (981 - topSpace - 15)
+    itemHeight = itemHeight / ratio
+    itemWidth = itemWidth / ratio
+  end if
   m.top.visible = true
 
   ' Size of the individual rows
@@ -34,7 +40,8 @@ sub updateSize()
   ' Size of items in the row
   m.top.rowItemSize = [ itemWidth, itemHeight ]
   ' Spacing between items in the row
-  m.top.rowItemSpacing = [ 0, 0 ]
+  itemSpace = (dimensions["width"] - border*2 - itemWidth*m.top.itemsPerRow) / (m.top.itemsPerRow-1)
+  m.top.rowItemSpacing = [ itemSpace-1, 0 ]
 end sub
 
 function setupRows()

components/ItemGrid.xml

@@ -2,6 +2,7 @@
 <component name="ItemGrid" extends="RowList">
   <interface>
     <field id="itemsPerRow" type="int" />
+    <field id="rowsPerPage" type="int" value="2" />
     <field id="objects" type="associativearray" onChange="setupRows" />
     <field id="escapeButton" type="string" alwaysNotify="true" />
   </interface>

components/ListPoster.brs

@@ -46,7 +46,7 @@ sub updateSize()
     m.poster.width = int(maxSize[0]) - 4
     m.poster.height = m.poster.width * ratio
 
-    posterVertSpace = int(maxSize[1]) - m.title.height
+    posterVertSpace = int(maxSize[1]) - m.title.height - 20
 
     if m.poster.height > posterVertSpace
       ' Do a thing to shrink the image if it is too tall
@@ -54,6 +54,7 @@ sub updateSize()
 
     m.poster.translation = [2, (posterVertSpace - m.poster.height) / 2]
 
+    m.backdrop.translation = [2, (posterVertSpace - m.poster.height) / 2]
     m.backdrop.width = m.poster.width
     m.backdrop.height = m.poster.height
 

components/collections/Collections.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <component name="Collections" extends="JFGroup">
   <children>
-    <ItemGrid id="picker" visible="true" itemsPerRow="5" />
+    <ItemGrid id="picker" visible="true" itemsPerRow="6" />
     <OptionsSlider id="options" />
     <Rectangle translation="[0,981]" width="1920" height="100" color="#101010" />
   </children>

components/tvshows/TVShows.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <component name="TVShows" extends="JFGroup">
   <children>
-    <ItemGrid id="picker" visible="true" itemsPerRow="10" />
+    <ItemGrid id="picker" visible="true" itemsPerRow="6" />
     <OptionsSlider id="options" />
     <Rectangle translation="[0,981]" width="1920" height="100" color="#101010" />
   </children>

source/Main.brs

@@ -16,8 +16,8 @@ sub Main()
 
   m.overhang = CreateObject("roSGNode", "JFOverhang")
   m.scene.insertChild(m.overhang, 0)
-
-  m.page_size = 50
+  
+  m.page_size = 48
 
   app_start:
   m.overhang.title = ""