Kpmp 577 migrate functionality

src/components/Slides/Menu/Header.js

@@ -45,20 +45,22 @@ class Header extends Component {
         SlidePrintManager.getInstance().beforePrint();
         setTimeout(window.print, 10);
     }
-    
+
 	render() {
 		return(
 			<div className="menu-slide-list-header">
 				<Row>
-					<Col sm="11" className="menu-title">WHOLE SLIDE IMAGES</Col>
-					<Col sm="1" className="menu-control"><FontAwesomeIcon icon={faCaretLeft} className="clickable" onClick={this.props.toggleMenu} size="lg"/></Col>
-				</Row>
+					<Col className="menu-title">WHOLE SLIDE IMAGES</Col>
+                    <div className="float-right">
+					    <Col className="menu-control"><FontAwesomeIcon icon={faCaretLeft} className="clickable" onClick={this.props.toggleMenu} size="lg"/></Col>
+				    </div>
+                </Row>
 				<Row>
-					<Col className="float-left" sm="6">
+					<Col className="float-left" xs="6">
 						<FontAwesomeIcon icon={faChevronLeft} className="clickable hoverable pad-right" onClick={() => this.handlePreviousSlide()} size="lg"/>
 						<FontAwesomeIcon icon={faChevronRight} className="clickable hoverable" onClick={() => this.handleNextSlide()} size="lg"/>
 					</Col>
-				    <Col sm="6">
+				    <Col xs="6">
 				    	<div className="float-right">
 				    		<FontAwesomeIcon icon={faPrint} onClick={this.onPrint} className="clickable hoverable pad-right" size="lg"/>
 				            <a id="download" //eslint-disable-line

src/components/Slides/Menu/Menu.js

@@ -9,7 +9,7 @@ class Menu extends Component {
 
 	constructor(props) {
 		super(props);
-		this.state = { isOpen: true };
+		this.state = { isOpen: false };
 	}
 
 	toggleMenu = (newState) => {
@@ -23,7 +23,7 @@ class Menu extends Component {
 	render() {
 		return (
 			<div id="side-menu">
-				<BurgerMenu isOpen={ this.state.isOpen } width={ '450px' } noOverlay customBurgerIcon={ <FontAwesomeIcon icon={faBars} /> }
+				<BurgerMenu id={ "bm-menu-wrap" } width={"33%"} isOpen={ this.state.isOpen } noOverlay customBurgerIcon={ <FontAwesomeIcon icon={faBars} /> }
 					customCrossIcon={ false } >
 					<SlideListContainer toggleMenu={this.toggleMenu}/>
 				</BurgerMenu>

src/components/Slides/Menu/SlideList.js

@@ -23,15 +23,16 @@ class SlideList extends Component {
 		return (
 			<div id="menu-slide-list">
 				<Header {...this.props}/>
-				<Col>
+				<Col id="slides-col">
     				<div id="menu-slide-list-slides">
     				{
     					this.props.selectedPatient.slides.map(function(slide, index) {
     						let highlightedClass = this.props.selectedPatient.selectedSlide.id === slide.id ? " slide-highlighted" : "";
+							let thumbnailSrc = "/img/thumbnail_stain_" + slide.stain.type.toLowerCase() + ".png";
     						return (
 	    						<Row className={"slide-menu-item " + highlightedClass} onClick={() => this.handleSelectSlide(slide)}>
-		    						<Col sm="2" className="no-padding"><img className="thumbnail" src="/img/tn_KPMP-Ex2_TRI_1of1.jpeg" alt=""/></Col>
-		    						<Col sm="10" className="slide-name">{slide.slideName}</Col>
+		    						<Col xs={{size: "auto"}} className="no-padding"><img className="thumbnail" src={thumbnailSrc} alt=""/></Col>
+		    						<Col xs={{size: "auto"}} className="slide-name">{slide.slideName}</Col>
 	    						</Row>
     						)
     					}, this)

src/components/Slides/SlideViewer.js

@@ -16,8 +16,8 @@ class SlideViewer extends Component {
 			visibilityRatio: 0.5,
 			constrainDuringPan: false,
 			defaultZoomLevel: 1,
-			minZoomLevel: 1,
-			maxZoomLevel: 10,
+			minZoomLevel: 0.5,
+			maxZoomLevel: 120,
 			zoomInButton: 'zoom-in',
 			zoomOutButton: 'zoom-out',
 			homeButton: 'reset',

src/menu.scss

@@ -73,7 +73,16 @@ $menu-header-height: 80px;
 	max-height: calc(100vh - #{$header-height});
 	overflow: hidden;
 	border-right: 1px solid silver;
-
+
+	#bm-menu-wrap {
+		@media only screen and (max-width: 767px) {
+			width: 66% !important;
+		}
+		@media only screen and (min-width: 768px) {
+			width: 33% !important;
+		}
+	}
+
 	.row {
 		margin-right: 0px !important;
 		margin-left: 0px !important;
@@ -115,7 +124,7 @@ $menu-header-height: 80px;
 		background: white;
 		border-bottom: 1px solid silver;
 
-		.col {
+		#slides-col {
 			padding-left: 0px;
 			padding-right: 0px;
 		}
@@ -138,8 +147,7 @@ $menu-header-height: 80px;
 				}
 
 				.slide-name {
-					padding-left: 10px;
-					margin: auto;
+					text-align: left;
 					height: $thumbnail-height;
 					line-height: $thumbnail-height;
 					color: $link-blue;