Refactor iframe height computation for responsiveness
Replaces the hard-coded iframe height logic with a computed property to dynamically adjust height based on screen width. This simplifies the code and improves maintainability while ensuring proper responsive design behavior.
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 ? `${IFRAME_HEIGHT}px` : '420px'"
|
:height="iframeHeight"
|
||||||
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>
|
||||||
@@ -11,40 +11,16 @@
|
|||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useDisplay } from 'vuetify'
|
import { useDisplay } from 'vuetify'
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
const { width } = useDisplay()
|
const { width } = useDisplay()
|
||||||
|
|
||||||
/**
|
// Configuration constants
|
||||||
* 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
|
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
|
const NUMBER_OF_GRAPHS = 4
|
||||||
/**
|
|
||||||
* Represents the height of an iframe calculated dynamically based on the number of graphs
|
// Computed property for responsive iframe height
|
||||||
* and the height of each graph.
|
const iframeHeight = computed(() =>
|
||||||
*
|
width.value <= 800 ? `${NUMBER_OF_GRAPHS * GRAPH_HEIGHT}px` : '420px'
|
||||||
* 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