diff --git a/OHIFViewer-react/src/Header/Header.css b/OHIFViewer-react/src/Header/Header.css index 52bd48a59..df92c7e8f 100644 --- a/OHIFViewer-react/src/Header/Header.css +++ b/OHIFViewer-react/src/Header/Header.css @@ -1,16 +1,38 @@ -.header { +.entry-header { padding: 10px 10px 0; - height: var(--top-bar-height); - overflow: hidden; +} + +.entry-header.header-big { + background: rgba(21,25,30,0.7); + padding: 10px var(--study-list-padding); + height: auto; + display: inline-block; + width: 100%; +} + +.header-left-box { + display: inline-block; + position: relative; +} + +.header-viewerLink { + float: left; } .header-brand { height: 30px; text-decoration: none; float: left; + clear: both; } +.entry-header.header-big .header-brand { + height: auto; + padding: 25px 0; +} + + .header-logo-image { fill: transparent; height: 100%; @@ -19,6 +41,12 @@ float: left; } +.entry-header.header-big .header-logo-image { + margin: 0 20px 0 0; + width: 50px; + height: 50px; +} + .header-logo-text { display: inline-block; font-family: var(--logo-font-family); @@ -28,6 +56,11 @@ line-height: 30px; } +.entry-header.header-big .header-logo-text { + font-size: 30px; + line-height: 36px; +} + .header-btn { color: var(--text-secondary-color); cursor: pointer; @@ -48,6 +81,7 @@ border-left: var(--ui-border-thickness) solid var(--ui-border-color); margin: 3px 0 0 10px; padding: 0 0 0 10px; + display: inline-block; } .header-menu { @@ -60,3 +94,7 @@ text-decoration: none; margin-right: 10px; } + +.entry-header.header-big .header-menu { + margin-right: 0; +} diff --git a/OHIFViewer-react/src/Header/Header.js b/OHIFViewer-react/src/Header/Header.js index 30b13a877..77400270b 100644 --- a/OHIFViewer-react/src/Header/Header.js +++ b/OHIFViewer-react/src/Header/Header.js @@ -1,21 +1,38 @@ import React from 'react' -import { Link } from 'react-router-dom' +import { Link, withRouter } from 'react-router-dom' import { Dropdown } from "../components" import Icons from "../images/icons.svg" import './Header.css' import list from './HeaderMenuList.json' -function Header() { - return ( -