SSDM-6017 : Improved layout for storage manager grid

openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/controllers/LayoutManager.js

@@ -342,6 +342,18 @@ var LayoutManager = {
 				this.isLoadingView === false && 
 				this.firstColumn.width() > 0;
 	},
+	getContentWidth : function() {
+		var width = $( window ).width();
+		if (width > this.DESKTOP_SIZE) {
+			return this.secondColumn.width();
+		} else if (width > this.TABLET_SIZE) {
+			return this.secondColumn.width();
+		} else if (width > this.MOBILE_SIZE) {
+			return this.firstColumn.width();
+		} else {
+			alert("Layout manager unable to know the layout, this should never happen.");
+		}
+	},
 	reloadView : function(view, forceFirstTime) {
 		var _this = this;
 		this.isLoadingView = true;

openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/StorageManager/widgets/GridView.js

@@ -39,9 +39,16 @@ function GridView(gridModel) {
 		var $emptyCell = $("<th>");
 		$headerRow.append($emptyCell);
 		
+		var contentWidth = LayoutManager.getContentWidth();
+		var headerWidth = 24;
+		var minHeight = 32;
+		var cellWidth = contentWidth/parseInt(this._gridModel.numColumns) - headerWidth;
+		
 		for(var j = 0; j < this._gridModel.numColumns; j++) {
 			var $numberCell = $("<th>").append(j+1);
-			$numberCell.css('width', Math.floor(80/(this._gridModel.numColumns+1)) +'%');
+			$numberCell.css('width', cellWidth +'px');
+			$numberCell.css('text-align', 'center');
+			$numberCell.css('vertical-align', 'middle');
 //			$numberCell.css('padding', '0px');
 			$headerRow.append($numberCell);
 		}
@@ -50,13 +57,16 @@ function GridView(gridModel) {
 		
 		for(var i = 0; i < this._gridModel.numRows; i++) {
 			var $newRow = $("<tr>");
+				$newRow.css('height', minHeight +'px');
 			var rowLabel = i+1;
 			if(this._gridModel.useLettersOnRows) {
 				rowLabel = Util.getLetterForNumber(rowLabel);
 			}
 			var $numberCell = $("<th>").append(rowLabel);
-			$numberCell.css('width', Math.floor(80/(this._gridModel.numColumns+1)) +'%');
+			$numberCell.css('width', headerWidth + 'px');
 			$numberCell.css('padding', '0px');
+			$numberCell.css('text-align', 'center');
+			$numberCell.css('vertical-align', 'middle');
 			$newRow.append($numberCell);
 			
 			for(var j = 0; j < this._gridModel.numColumns; j++) {
@@ -108,7 +118,8 @@ function GridView(gridModel) {
 				}
 				
 				this._addLabels($newColumn, i + 1, j + 1);
-				$newColumn.css('width', Math.floor(80/(this._gridModel.numColumns+1)) +'%');
+				$newColumn.css('width', cellWidth +'px');
+				$newColumn.css('min-height', minHeight +'px');
 				$newColumn.css('padding', '0px');
 				$newColumn.css('overflow', 'hidden');
 				$newRow.append($newColumn);