Add dashboard column span (#6212)

* Add dashboard column span

* Update app_config.php

* Update index.php

core/dashboard/app_config.php

@@ -72,6 +72,11 @@
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
 		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard path.';
 		$z++;
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_column_span';
+		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'numeric';
+		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard column span.';
+		$z++;
 		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_order';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'numeric';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';

core/dashboard/dashboard_edit.php

@@ -55,6 +55,7 @@
 		$dashboard_name = $_POST["dashboard_name"];
 		$dashboard_path = $_POST["dashboard_path"];
 		$dashboard_groups = $_POST["dashboard_groups"];
+		$dashboard_column_span = $_POST["dashboard_column_span"];
 		$dashboard_order = $_POST["dashboard_order"];
 		$dashboard_enabled = $_POST["dashboard_enabled"];
 		$dashboard_description = $_POST["dashboard_description"];
@@ -151,6 +152,7 @@
 			$array['dashboard'][0]['dashboard_uuid'] = $dashboard_uuid;
 			$array['dashboard'][0]['dashboard_name'] = $dashboard_name;
 			$array['dashboard'][0]['dashboard_path'] = $dashboard_path;
+			$array['dashboard'][0]['dashboard_column_span'] = $dashboard_column_span;
 			$array['dashboard'][0]['dashboard_order'] = $dashboard_order;
 			$array['dashboard'][0]['dashboard_enabled'] = $dashboard_enabled;
 			$array['dashboard'][0]['dashboard_description'] = $dashboard_description;
@@ -194,6 +196,7 @@
 		$sql .= " dashboard_uuid, ";
 		$sql .= " dashboard_name, ";
 		$sql .= " dashboard_path, ";
+		$sql .= " dashboard_column_span, ";
 		$sql .= " dashboard_order, ";
 		$sql .= " cast(dashboard_enabled as text), ";
 		$sql .= " dashboard_description ";
@@ -206,6 +209,7 @@
 			$dashboard_name = $row["dashboard_name"];
 			$dashboard_path = $row["dashboard_path"];
 			$dashboard_groups = $row["dashboard_groups"];
+			$dashboard_column_span = $row["dashboard_column_span"];
 			$dashboard_order = $row["dashboard_order"];
 			$dashboard_enabled = $row["dashboard_enabled"];
 			$dashboard_description = $row["dashboard_description"];
@@ -374,6 +378,24 @@
 	echo "</td>\n";
 	echo "</tr>\n";
 
+	echo "<tr>\n";
+	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
+	echo "	".$text['label-dashboard_column_span']."\n";
+	echo "</td>\n";
+	echo "<td class='vtable' style='position: relative;' align='left'>\n";
+	echo "	<select name='dashboard_column_span' class='formfld'>\n";
+	$i=1;
+	while ($i<=5) {
+		$selected = ($i == $dashboard_column_span) ? "selected" : null;
+		echo "		<option value='$i' ".$selected.">$i</option>\n";
+		$i++;
+	}
+	echo "	</select>\n";
+	echo "<br />\n";
+	echo $text['description-dashboard_column_span']."\n";
+	echo "</td>\n";
+	echo "</tr>\n";
+
 	echo "<tr>\n";
 	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
 	echo "	".$text['label-dashboard_order']."\n";

core/dashboard/index.php

@@ -70,6 +70,7 @@
 	$sql .= "dashboard_uuid, \n";
 	$sql .= "dashboard_name, \n";
 	$sql .= "dashboard_path, \n";
+	$sql .= "dashboard_column_span, \n";
 	$sql .= "dashboard_order, \n";
 	$sql .= "cast(dashboard_enabled as text), \n";
 	$sql .= "dashboard_description \n";
@@ -209,7 +210,7 @@
 }
 
 .widget {
-  /*background-color: #eee*/
+  /*background-color: #eee;*/
 }
 
 .widgets {
@@ -224,18 +225,56 @@
 @media (max-width: 575px) {
   .widgets { grid-template-columns: repeat(1, 1fr); }
   .col-num { grid-column: span 1; }
+	<?php
+		foreach($dashboard as $row) {
+			$dashboard_name = strtolower($row['dashboard_name']);
+			$dashboard_name = str_replace(" ", "_", $dashboard_name);
+			if (is_numeric($dashboard_column_span)) {
+				echo "#".$dashboard_name." {\n";
+				echo "	grid-column: span 1;\n";
+				echo "}\n";
+			}
+		}
+	?>
 }
 
 /* Screen larger than 550px? 2 columns */
 @media (min-width: 575px) {
   .widgets { grid-template-columns: repeat(2, 1fr); }
   .col-num { grid-column: span 2; }
+	<?php
+		foreach($dashboard as $row) {
+			$dashboard_name = strtolower($row['dashboard_name']);
+			$dashboard_name = str_replace(" ", "_", $dashboard_name);
+			$dashboard_column_span = 1;
+			if (is_numeric($dashboard_column_span)) {
+				if ($row['dashboard_column_span'] > 2) {
+					$dashboard_column_span = 2;
+				}
+				echo "#".$dashboard_name." {\n";
+				echo "	grid-column: span ".$dashboard_column_span.";\n";
+				echo "}\n";
+			}
+		}
+	?>
 }
 
 /* Screen larger than 1300px? 3 columns */
 @media (min-width: 1300px) {
   .widgets { grid-template-columns: repeat(3, 1fr); }
   .col-num { grid-column: span 2; }
+	<?php
+		foreach($dashboard as $row) {
+			$dashboard_name = strtolower($row['dashboard_name']);
+			$dashboard_name = str_replace(" ", "_", $dashboard_name);
+			$dashboard_column_span = $row['dashboard_column_span'];
+			if (is_numeric($dashboard_column_span)) {
+				echo "#".$dashboard_name." {\n";
+				echo "	grid-column: span ".$dashboard_column_span.";\n";
+				echo "}\n";
+			}
+		}
+	?>
 }
 
 /* Screen larger than 1500px? 4 columns */
@@ -295,8 +334,8 @@
 		}
 
 		.hud_box .hud_box:hover {
-			transform: none;
 			box-shadow: none;
+			transform: none;
 		}
 
 		.ghost {
@@ -306,6 +345,7 @@
 		</style>
 
 		<script>
+		//make widgets draggable
 		var widgets = document.getElementById('widgets');
 		var sortable = Sortable.create(widgets, {
 			animation: 150,
@@ -336,21 +376,24 @@
 			},
 		});
 
+		/*
+		//warn the user before leaving the page
 		var formSubmitting = false;
 		var setFormSubmitting = function() { formSubmitting = true; };
 
 		window.onload = function() {
-		    window.addEventListener("beforeunload", function (e) {
-		        var confirmationMessage = 'You have unsaved changes which will not be saved.';
+			window.addEventListener("beforeunload", function (e) {
+				var confirmationMessage = 'You have unsaved changes which will not be saved.';
 
-		        if (formSubmitting) {
-		            return undefined;
-		        }
+				if (formSubmitting) {
+					return undefined;
+				}
 
-		        (e || window.event).returnValue = confirmationMessage;
-		        return confirmationMessage;
-		    });
+				(e || window.event).returnValue = confirmationMessage;
+				return confirmationMessage;
+			});
 		};
+		*/
 		</script>
 		<?php
 	} //end edit