Fixed plugin boxes overlapping

When switching between plugins tabs on player page the Y height of the first
plugins tab was used, which caused overlapping when another tab had more
plugins than the other one
This commit is contained in:
Aurora Lahtela 2023-03-04 13:36:05 +02:00
parent e736055898
commit 2da4357527
3 changed files with 7 additions and 7 deletions

View File

@ -3,7 +3,7 @@
"name": "dashboard",
"version": "0.1.0",
"private": true,
"proxy": "https://localhost:8804",
"proxy": "http://localhost:8800",
"dependencies": {
"@fortawesome/fontawesome-free": "^6.3.0",
"@fortawesome/fontawesome-svg-core": "^6.3.0",

View File

@ -22,9 +22,9 @@ const PlayerPluginData = () => {
return () => {
if (masonry.element) masonry.destroy();
}
}, [])
}, [serverName])
if (!extensions) {
if (!extensions?.extensionData?.length) {
return (
<LoadIn>
<section className="player_plugin_data">

View File

@ -1,4 +1,4 @@
import React, {useEffect} from 'react';
import React, {useEffect, useMemo} from 'react';
import Masonry from "masonry-layout";
import LoadIn from "../../components/animation/LoadIn";
import {Card, Col, Row} from "react-bootstrap";
@ -11,7 +11,7 @@ import ErrorView from "../ErrorView";
const ServerPluginData = () => {
const {t} = useTranslation();
const {extensionData, extensionDataLoadingError} = useServerExtensionContext();
const extensions = extensionData ? extensionData.extensions.filter(extension => !extension.wide) : [];
const extensions = useMemo(() => extensionData ? extensionData.extensions.filter(extension => !extension.wide) : [], [extensionData]);
useEffect(() => {
const masonryRow = document.getElementById('extension-masonry-row');
@ -24,11 +24,11 @@ const ServerPluginData = () => {
return () => {
if (masonry.element) masonry.destroy();
}
}, [])
}, [extensions]);
if (extensionDataLoadingError) return <ErrorView error={extensionDataLoadingError}/>;
if (!extensions || !extensions.length) {
if (!extensions?.length) {
return (
<LoadIn>
<section className="server_plugin_data">