elysium/nile
elysium/nile
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[FIX] Fixed CSS not displaying properly for skills (#6)

Browse source 
Co-authored-by: dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.net/elysium/nile/pulls/6
This commit is contained in:
dunemask 2023-08-26 18:43:38 +00:00
parent c2fee6743a
commit d8a3f908cc
2 changed files with 9 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -149,7 +149,7 @@
const mediaCover = document.getElementById( const mediaCover = document.getElementById(
"loading-content-media-cover", "loading-content-media-cover",
); );
if (mediaCover === null && mediaCover.style === null) return; if (mediaCover === null || mediaCover.style === null) return;
mediaCover.style.display = "block"; mediaCover.style.display = "block";
} }

12
src/pages/delta/Skills.jsx
View file

@ -1,4 +1,4 @@
import React, { Suspense, useState } from "react"; import React, { Suspense, useState, useEffect } from "react";
import { FaReact, FaPython, FaJava, FaHtml5 } from "react-icons/fa"; import { FaReact, FaPython, FaJava, FaHtml5 } from "react-icons/fa";
import { SiJavascript } from "react-icons/si"; import { SiJavascript } from "react-icons/si";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
@ -13,7 +13,10 @@ const Carousel = React.lazy(() => import("react-material-ui-carousel"));
export default function Skills() { export default function Skills() {
const [image, setImage] = useState(); const [image, setImage] = useState();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [carouselInterval, setCarouselInterval] = useState(200);
useEffect(()=>{setTimeout(()=>setCarouselInterval(7000),500)},[]); // Mitigates bug where height doesn't load properly
function openPhoto(image) { function openPhoto(image) {
setImage(image); setImage(image);
setOpen(true); setOpen(true);
@ -177,15 +180,16 @@ export default function Skills() {
> >
<Suspense <Suspense
fallback={ fallback={
<Skeleton variant="rectangular" width="374px" height="374px" /> <Skeleton variant="rectangular" width="374px" height="100%" />
} }
> >
<Carousel <Carousel
interval={8000} interval={carouselInterval}
navButtonsAlwaysVisible navButtonsAlwaysVisible
indicatorContainerProps={{ style: { display: "none" } }} indicatorContainerProps={{ style: { display: "none" } }}
stopAutoPlayOnHover={true} stopAutoPlayOnHover={true}
sx={{ minHeight: 481 }} sx={{ height: "100%"}}
animation="slide"
> >
{skills.map((skill, i) => ( {skills.map((skill, i) => (
<React.Fragment key={skill}>{skill}</React.Fragment> <React.Fragment key={skill}>{skill}</React.Fragment>