Fluid chart images (hestiacp#3248)

* Responsive chart images

* Bump npm dependencies

Author: AlecRust

package.json

@@ -23,10 +23,10 @@
 	},
 	"devDependencies": {
 		"@prettier/plugin-php": "^0.19.3",
-		"@typescript-eslint/eslint-plugin": "^5.48.2",
-		"@typescript-eslint/parser": "^5.48.2",
+		"@typescript-eslint/eslint-plugin": "^5.50.0",
+		"@typescript-eslint/parser": "^5.50.0",
 		"cssnano": "^5.1.14",
-		"eslint": "^8.32.0",
+		"eslint": "^8.33.0",
 		"eslint-config-prettier": "^8.6.0",
 		"eslint-plugin-editorconfig": "^4.0.2",
 		"husky": "^8.0.3",
@@ -36,7 +36,7 @@
 		"postcss-cli": "^10.1.0",
 		"postcss-import": "^15.1.0",
 		"postcss-path-replace": "^1.0.4",
-		"postcss-preset-env": "^7.8.3",
+		"postcss-preset-env": "^8.0.1",
 		"postcss-size": "^4.0.1",
 		"prettier": "^2.8.3",
 		"prettier-plugin-nginx": "^1.0.2",
@@ -45,8 +45,8 @@
 		"stylelint": "^14.16.1",
 		"stylelint-config-prettier": "^9.0.4",
 		"stylelint-config-standard": "^29.0.0",
-		"typescript": "^4.9.4",
-		"vitepress": "1.0.0-alpha.40",
-		"vue": "^3.2.45"
+		"typescript": "^4.9.5",
+		"vitepress": "1.0.0-alpha.45",
+		"vue": "^3.2.47"
 	}
 }

web/css/src/utilities.css

@@ -113,6 +113,10 @@
 	padding-left: 30px !important;
 }
 
+.u-rounded {
+	border-radius: var(--border-radius-base) !important;
+}
+
 .u-pos-relative {
 	position: relative !important;
 }
@@ -139,6 +143,11 @@
 	align-items: center !important;
 }
 
+.u-image-fluid {
+	max-width: 100% !important;
+	height: auto !important;
+}
+
 .u-list-bulleted {
 	list-style: disc !important;
 	padding-left: 40px !important;

web/css/themes/default.min.css

@@ -19,15 +19,13 @@
 	<div class="form-container form-container-wide">
 		<!-- Begin graph list item loop -->
 		<?php foreach ($data as $key => $value) { ?>
-			<div class="u-mb20">
-				<h2 class="l-unit__name separate">
+			<div class="u-mb40">
+				<h2 class="u-mb20">
 					<?= _($data[$key]["TITLE"]) ?>
 				</h2>
-				<div>
-				   <a href="/list/rrd/image.php?/rrd/<?=$data[$key]['TYPE']."/".$period."-".$data[$key]['RRD'].".png"?>" class="u-block" target="_blank">
-					 <img class="graph-rounded" src="/list/rrd/image.php?/rrd/<?=$data[$key]['TYPE']."/".$period."-".$data[$key]['RRD'].".png"?>" alt="">
-				   </a>
-				</div>
+				<a href="/list/rrd/image.php?/rrd/<?=$data[$key]['TYPE']."/".$period."-".$data[$key]['RRD'].".png"?>" class="u-block" target="_blank">
+					<img class="u-image-fluid u-rounded" src="/list/rrd/image.php?/rrd/<?=$data[$key]['TYPE']."/".$period."-".$data[$key]['RRD'].".png"?>" alt="">
+				</a>
 			</div>
 		<?php } ?>
 	</div>