Few updates to cover selector width calculation

Installer/Router.fs

@@ -4,7 +4,10 @@ open DredgePos
 open Saturn
 open Giraffe
 
+let installer = (warbler (fun _ -> htmlString (Controller.RunAllMigrations ())))
+
 let router = router {
     pipe_through Ajax.Router.pipeline
-    get "/" (warbler (fun _ -> htmlString (Controller.RunAllMigrations ())))
+    get "/" installer
+    get "" installer
 }

typescript/dredgepos.core.ts

@@ -184,6 +184,8 @@ const setElementVisibilityByMode = () => {
 
 }
 
+const getPercentageOfPageContainerWidth = (pixels: number) => ( (pixels / $('#pageContainer').width()) * 100) + '%'
+
 const pulseElement = (element: JQuery) => element.addClass('pulse').on('animationend', () => element.removeClass('pulse'))
 
 Array.prototype.where = function<x>(this: x[], property: string, value: any) {

typescript/dredgepos.orderScreen.ts

@@ -309,14 +309,13 @@ const hideGrids = () => $('.gridContainer').hide()
 
 const gridHtmlGenerated = (gridData: {gridHtml:string, grid: grid}) => {
     const gridContainer = $('.gridContainer')
-    const gridCellWidth = getGridCellWidth()
-    const gridCellHeight = getGridCellHeight()
+    const cellDimensions = getGridCellDimensions()
     const grid = gridData.grid
     const gridHtml = gridData.gridHtml
 
     gridContainer
         .show()
-        .width(gridCellWidth * grid.cols)
+        .width(cellDimensions.width * grid.cols)
         .children('.gridContainerHeader')
         .children('span')
         .text(grid.name)
@@ -326,11 +325,11 @@ const gridHtmlGenerated = (gridData: {gridHtml:string, grid: grid}) => {
         .html(gridHtml)
         .show()
         .parent()
-        .height(gridCellHeight * grid.rows)
+        .height(cellDimensions.width * grid.rows)
         .closest('.gridContainer')
         .find('.pageNavigation')
         .toggle(gridContainer.find('.gridPage').length >  1)
-        .height(gridCellHeight)
+        .height(cellDimensions.height)
 }
 
 const itemRowClicked = (e: JQuery.TriggeredEvent) => {
@@ -514,21 +513,28 @@ const customItemTextSubmitted = (text: string) => {
     showVirtualNumpad(lang('enter_item_price'), 4, false, true, true, submitFunction)
 }
 
-const getGridCellHeight = () => $('#pageGroupContainer').height()/8
-const getGridCellWidth = () => $('#pageGroupContainer').width()/6
-
+const getGridCellDimensions = () => {
+    const container = $('#pageGroupContainer')
+    return {
+        height: container.height()/8,
+        width: container.width()/6
+    }
+}
 
 const showCoverSelector = (event: JQuery.TriggeredEvent) => {
     const button = $(event.target)
-    const gridHeight = getGridCellHeight()
-
+    const gridHeight = getGridCellDimensions().height
     const coverSelector = $('.coverSelector')
+    
+    const buttonPositionLeftPercent = getPercentageOfPageContainerWidth(button.offset().left)
+    const buttonWidthPercent = getPercentageOfPageContainerWidth(button.width())
+    
     coverSelector
         .toggle(!coverSelector.is(':visible'))
-        .width(button.width())
         .css({
-            left: button.offset().left + 'px',
-            top: button.offset().top + button.height() + 'px',
+            width: buttonWidthPercent,
+            left: buttonPositionLeftPercent,
+            top: (button.offset().top + button.height()) + 'px'
         })
         .find('.coverSelectorButton')
         .height(gridHeight)