Commit b31da66e authored by Imran Salam's avatar Imran Salam
Browse files

fix height styling for track panel when toggling launchbar

parent 779c631d
......@@ -65,6 +65,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
{props.trackPanelOpened ? (
<TrackPanelList
currentTrack={props.currentTrack}
launchbarExpanded={props.launchbarExpanded}
toggleDrawer={props.toggleDrawer}
updateTrack={props.changeCurrentTrack}
/>
......
......@@ -2,10 +2,13 @@
.trackPanelBar {
background: $ens-light-grey;
height: calc(100vh - 177px);
width: 36px;
&.expanded {
&.shorter {
height: calc(100vh - 177px);
}
&.taller {
height: calc(100vh - 129px);
}
......
......@@ -29,9 +29,11 @@ const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = (
}, [props.drawerOpened, props.toggleDrawer, props.toggleTrackPanel]);
const getClassNames = () => {
const expandClass: string = props.launchbarExpanded ? '' : styles.expanded;
const heightClass: string = props.launchbarExpanded
? styles.shorter
: styles.taller;
return `${styles.trackPanelBar} ${expandClass}`;
return `${styles.trackPanelBar} ${heightClass}`;
};
return (
......
......@@ -5,11 +5,18 @@
box-sizing: border-box;
display: flex;
flex-direction: column;
height: calc(100vh - 177px);
overflow: auto;
padding: 15px;
width: 320px;
&.shorter {
height: calc(100vh - 177px);
}
&.taller {
height: calc(100vh - 129px);
}
h4 {
border-bottom: 1px solid $ens-grey;
color: $ens-grey;
......
......@@ -11,6 +11,7 @@ import styles from './TrackPanelList.scss';
type TrackPanelListProps = {
currentTrack: string;
launchbarExpanded: boolean;
toggleDrawer: (drawerOpened: boolean) => void;
updateTrack: (currentTrack: string) => void;
};
......@@ -25,6 +26,14 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
toggleDrawer(true);
};
const getTrackPanelClasses = () => {
const heightClass: string = props.launchbarExpanded
? styles.shorter
: styles.taller;
return `${styles.trackPanelList} ${heightClass}`;
};
const getTrackClass = (trackName: string): string => {
if (props.currentTrack === trackName) {
return 'currentTrack';
......@@ -34,7 +43,7 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
};
return (
<div className={styles.trackPanelList}>
<div className={getTrackPanelClasses()}>
<section>
<dl>
<TrackPanelListItem
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment