Fluid chart images (#3248)

* Responsive chart images

* Bump npm dependencies

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/flat.min.css

@@ -1 +1 @@
-:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-usage-inner{text-shadow:none}.top-bar-notifications-list{border:1px solid #ccc;box-shadow:none}.top-bar-menu-link{text-shadow:none}.top-bar-menu-link:active,.top-bar-menu-link:hover{background:#fff;box-shadow:none}.top-bar-menu-link.active{background:#fff}.toolbar-sorting-menu{background-color:#fff;border-color:#ccc;box-shadow:none}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:visited{color:#5f7eb3}.l-unit__stat-col--left a:hover{color:#474747}.badge,.l-unit:hover,.units .l-unit:hover{box-shadow:none}.collapse-header{background:#fafafa;box-shadow:none}.button,.form-control,.form-select{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active,.button:focus{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger{&:active,:focus{background:#a91200;border-color:#f4301a;color:#fff}}.ui-dialog{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2){box-shadow:none}.body-login,.body-reset{background:#5f7eb3}@media (min-width:480px){.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}}
+:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-usage-inner{text-shadow:none}.top-bar-notifications-list{border:1px solid #ccc;box-shadow:none}.top-bar-menu-link{text-shadow:none}.top-bar-menu-link:active,.top-bar-menu-link:hover{background:#fff;box-shadow:none}.top-bar-menu-link.active{background:#fff}.toolbar-sorting-menu{background-color:#fff;border-color:#ccc;box-shadow:none}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:visited{color:#5f7eb3}.l-unit__stat-col--left a:hover{color:#474747}.badge,.l-unit:hover,.units .l-unit:hover{box-shadow:none}.collapse-header{background:#fafafa;box-shadow:none}.button,.form-control,.form-select{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active,.button:focus{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger :focus,.button-danger:active{background:#a91200;border-color:#f4301a;color:#fff}.ui-dialog{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2){box-shadow:none}.body-login,.body-reset{background:#5f7eb3}@media (min-width:480px){.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}}

web/templates/pages/list_rrd.php

@@ -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>