Skip to content

Commit

Permalink
fix layout for chroma/level selectors
Browse files Browse the repository at this point in the history
  • Loading branch information
colinhartigan committed Mar 20, 2022
1 parent 0e3f76f commit 2c8df0b
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 15 deletions.
31 changes: 16 additions & 15 deletions client/src/components/weaponEditor/WeaponEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,9 @@ const useStyles = makeStyles((theme) => ({
paperOnTopContent: {
width: "93%",
background: "#424242",
paddingBottom: "10px",
display: "flex",
flexDirection: "column",
paddingBottom: "5px",
position: "sticky",
top: 0,
zIndex: 4,
Expand All @@ -78,7 +78,6 @@ const useStyles = makeStyles((theme) => ({
paperCustomizingContent: {
width: "93%",
height: "auto",
marginTop: "5px",
display: "flex",
flexDirection: "column",
overflowY: "auto",
Expand All @@ -91,7 +90,6 @@ const useStyles = makeStyles((theme) => ({
flexDirection: "row",
width: "100%",
flexGrow: 1,
marginBottom: "15px",
transition: "all .2s ease",
},

Expand Down Expand Up @@ -231,7 +229,7 @@ function WeaponEditor(props) {
setHasUpgrades(true);
}

if(skinData.wallpaper !== null){
if (skinData.wallpaper !== null) {
setHasWallpaper(true);
} else {
setHasWallpaper(false);
Expand Down Expand Up @@ -452,11 +450,11 @@ function WeaponEditor(props) {

<div style={{ width: "100%", display: "flex", flexDirection: "row" }}>

<Paper
variant="outlined"
outlinecolor="secondary"
<Paper
variant="outlined"
outlinecolor="secondary"
className={classes.mainSkinMedia}
style={{ height: (showingVideo ? "35vh" : "125px"), backgroundImage: (hasWallpaper ? `linear-gradient(90deg, rgba(66, 66, 66,.5) 0%, rgba(66, 66, 66,.5) 100%), url(${selectedSkinData.wallpaper})` : null), backgroundSize: "cover", backgroundPosition: "center", transition: "background-image 0.5s ease, height 0.2s ease"}}
style={{ height: (showingVideo ? "35vh" : "125px"), backgroundImage: (hasWallpaper ? `linear-gradient(90deg, rgba(66, 66, 66,.5) 0%, rgba(66, 66, 66,.5) 100%), url(${selectedSkinData.wallpaper})` : null), backgroundSize: "cover", backgroundPosition: "center", transition: "background-image 0.5s ease, height 0.2s ease" }}
>
{getSkinMedia()}
</Paper>
Expand All @@ -476,23 +474,26 @@ function WeaponEditor(props) {
/>

</div>
</div>

<div className={classes.paperCustomizingContent} style={{transition: "all 0.5s ease"}}>

<div className={classes.levelSelectors} style={{ height: (hasUpgrades ? "auto" : "0px") }}>
<div className={classes.levelSelectors} style={{ marginTop: (hasUpgrades ? "12px" : "0px"), height: (hasUpgrades ? "auto" : "0px"), trainsition: "height 0.5s ease" }}>
<Grid container spacing={0}>
<Grid item xs={12} sm={6} style={{display: "flex", flexDirection: "row", justifyContent: "flex-start"}}>
<Grid item xs={12} sm={6} style={{ display: "flex", flexDirection: "row", justifyContent: "flex-start" }}>
<LevelSelector levelData={selectedSkinData.levels} selectedLevelIndex={selectedLevelData.index} selectedChromaIndex={selectedChromaData.index} setter={setselectedLevelData} />
</Grid>
<Grid item xs={12} sm={6} style={{display: "flex", flexDirection: "row", justifyContent: "flex-end"}}>
<Grid item xs={12} sm={6} style={{ display: "flex", flexDirection: "row", justifyContent: "flex-end" }}>
<ChromaSelector levelData={selectedSkinData.levels} chromaData={selectedSkinData.chromas} selectedLevelIndex={selectedLevelData.index} selectedChromaIndex={selectedChromaData.index} setter={setselectedChromaData} />
</Grid>
</Grid>

</div>

{hasUpgrades ? <Divider variant="middle" /> : null}
{hasUpgrades ? <Divider variant="middle" style={{marginTop: "10px",}} /> : null}


</div>

<div className={classes.paperCustomizingContent} style={{ transition: "all 0.5s ease" }}>


<div className={classes.skinSelector}>
<Grid style={{ width: "100%", height: "100%", justifySelf: "center" }} container justifyContent="flex-start" direction="row" alignItems="center" spacing={2}>
Expand Down
32 changes: 32 additions & 0 deletions client/src/services/useEventListener.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { useState, useRef, useEffect, useCallback } from "react";

function useEventListener(eventName, handler, element = window) {
// Create a ref that stores handler
const savedHandler = useRef();
// Update ref.current value if handler changes.
// This allows our effect below to always get latest handler ...
// ... without us needing to pass it in effect deps array ...
// ... and potentially cause effect to re-run every render.
useEffect(() => {
savedHandler.current = handler;
}, [handler]);
useEffect(
() => {
// Make sure element supports addEventListener
// On
const isSupported = element && element.addEventListener;
if (!isSupported) return;
// Create event listener that calls handler function stored in ref
const eventListener = (event) => savedHandler.current(event);
// Add event listener
element.addEventListener(eventName, eventListener);
// Remove event listener on cleanup
return () => {
element.removeEventListener(eventName, eventListener);
};
},
[eventName, element] // Re-run if eventName or element changes
);
}

export default useEventListener

0 comments on commit 2c8df0b

Please sign in to comment.