Update iframe height logic for responsive graph display
Replaced hardcoded iframe height with a dynamically calculated value based on graph count and individual graph height. This improves maintainability and ensures consistent resizing across different device widths.
This commit is contained in:
@@ -2,7 +2,7 @@
|
|||||||
<v-sheet class="mt-2" color="transparent">
|
<v-sheet class="mt-2" color="transparent">
|
||||||
<h5 class="text-h5">Buildserver Stats</h5>
|
<h5 class="text-h5">Buildserver Stats</h5>
|
||||||
<iframe
|
<iframe
|
||||||
:height="width <= 800 ? '1050px' : '420px'"
|
:height="width <= 800 ? `${IFRAME_HEIGHT}px` : '420px'"
|
||||||
allowtransparency="true"
|
allowtransparency="true"
|
||||||
class="w-100 border-0"
|
class="w-100 border-0"
|
||||||
src="https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1"></iframe>
|
src="https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1"></iframe>
|
||||||
@@ -13,4 +13,38 @@
|
|||||||
import { useDisplay } from 'vuetify'
|
import { useDisplay } from 'vuetify'
|
||||||
|
|
||||||
const { width } = useDisplay()
|
const { width } = useDisplay()
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Represents the height of a graph in pixels.
|
||||||
|
* This constant is used to define the vertical dimension of the graph
|
||||||
|
* when rendering it in a user interface or graphical representation.
|
||||||
|
*
|
||||||
|
* @constant {number} GRAPH_HEIGHT
|
||||||
|
*/
|
||||||
|
const GRAPH_HEIGHT = 335
|
||||||
|
/**
|
||||||
|
* Represents the total number of graphs to be processed or displayed.
|
||||||
|
*
|
||||||
|
* This variable is used to define the fixed amount of graphs that the system
|
||||||
|
* is intended to handle at a given time. It can be leveraged to set limits
|
||||||
|
* on iterations, arrays, or display logic related to graph management.
|
||||||
|
*
|
||||||
|
* Default value: 4
|
||||||
|
*
|
||||||
|
* Type: number
|
||||||
|
*/
|
||||||
|
const NUMBER_OF_GRAPHS = 4
|
||||||
|
/**
|
||||||
|
* Represents the height of an iframe calculated dynamically based on the number of graphs
|
||||||
|
* and the height of each graph.
|
||||||
|
*
|
||||||
|
* IFRAME_HEIGHT is determined by multiplying the number of graphs (`NUMBER_OF_GRAPHS`)
|
||||||
|
* displayed in the iframe by the height of a single graph (`GRAPH_HEIGHT`).
|
||||||
|
*
|
||||||
|
* This variable is commonly used to ensure the iframe adjusts correctly to accommodate
|
||||||
|
* all graphs without introducing unnecessary scrollbars.
|
||||||
|
*
|
||||||
|
* @constant {number} IFRAME_HEIGHT
|
||||||
|
*/
|
||||||
|
const IFRAME_HEIGHT = NUMBER_OF_GRAPHS * GRAPH_HEIGHT
|
||||||
</script>
|
</script>
|
||||||
|
Reference in New Issue
Block a user