Merge pull request #13 from KPMP/KPMP-591_Header_Text_Adjust

Kpmp 591 header text adjust
KPMP · Dec 20, 2018 · 00deb25 · 00deb25
2 parents 487504e + 0857199
commit 00deb25
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 13 deletions.
diff --git a/public/img/logo.png b/public/img/logo.png
diff --git a/public/index.html b/public/index.html
@@ -14,7 +14,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>DPR Demo</title>
+    <title>Slide Viewer Concept</title>
     <script> Function.prototype.call = function(t) { return this.apply(t, Array.prototype.slice.apply(arguments, [1])); } </script>
   </head>
   <body>

diff --git a/src/components/Nav/NavBar.js b/src/components/Nav/NavBar.js
@@ -1,17 +1,20 @@
 import React, { Component } from 'react';
-import { Row, NavbarBrand, Col } from 'reactstrap';
+import { Row, NavbarBrand, Col, Button } from 'reactstrap';
 
 class NavBar extends Component {
 	render() {
 		return (
 			<Row className="nav-container container-fluid">
-				<Col sm="1">
+				<Col xs="3">
 					<NavbarBrand href={process.env.PUBLIC_URL + "/"}>
 						<img src="img/logo.png" alt="Digital Pathology Repository" className="logo"/>
 					</NavbarBrand>
 				</Col>
-				<Col sm="11">
-					<div className="demo-text"><span className="highlight">DEMO:</span> Digital Pathology Repository - Slide Viewer Functionality</div>
+				<Col xs="6" id="demo-text">Slide Viewer Concept
+				</Col>
+				<Col xs="6" id="demo-text-small"></Col>
+				<Col xs="3">
+					<div className="float-right" id="feedback-button"><Button color="primary" onClick={() => window.open("", "_blank")}>Send Feedback</Button></div>
 				</Col>
 			</Row>
 

diff --git a/src/index.scss b/src/index.scss
@@ -15,14 +15,20 @@
 	text-align: center;
 }
 
-.demo-text {
+#demo-text {
 	line-height: $header-height;
-	padding-left: 15px;
-	padding-right: 15px;
 	font-size: 20px;
 	font-weight: 500;
-	left: 28%;
-	position: relative;
+	text-align: center;
+	@media only screen and (max-width: 767px) {
+		display: none;
+	}
+}
+
+#demo-text-small {
+	@media only screen and (min-width: 768px) {
+		display: none;
+	}
 }
 
 .highlight {
@@ -94,15 +100,19 @@ canvas {
 	background: white;
 
 	.logo {
-		margin-top: 10px;
-		margin-left: 10px;
-		height: 40px;
+		margin-top: 5px;
+		margin-left: 5px;
+		height: 50px;
 	}
 
 	.navbar-brand {
 		padding-top: 0px !important;
 		padding-bottom: 0px !important;
 	}
+
+	#feedback-button {
+		margin-top: 10px;
+	}
 }
 
 #landing-page {