Merge pull request #19 from jlmitch5/useCollapsedHeader

Use collapsed header

src/App.jsx

@@ -14,7 +14,10 @@ import {
   NavItem,
   Page,
   PageHeader,
-  PageSidebar
+  PageSidebar,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarItem
 } from '@patternfly/react-core';
 import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens';
 
@@ -87,6 +90,16 @@ class App extends React.Component {
     const { activeItem, activeGroup, isNavOpen } = this.state;
     const { logo, loginInfo } = this.props;
 
+    const PageToolbar = (
+      <Toolbar>
+        <ToolbarGroup>
+          <ToolbarItem>
+            <LogoutButton onDevLogout={() => this.onDevLogout()} />
+          </ToolbarItem>
+        </ToolbarGroup>
+      </Toolbar>
+    );
+
     return (
       <Router>
         <Fragment>
@@ -110,7 +123,7 @@ class App extends React.Component {
                 header={(
                   <PageHeader
                     logo={<TowerLogo onClick={this.onLogoClick} />}
-                    avatar={<LogoutButton onDevLogout={() => this.onDevLogout()} />}
+                    toolbar={PageToolbar}
                     showNavToggle
                     onNavToggle={this.onNavToggle}
                   />
@@ -329,6 +342,7 @@ class App extends React.Component {
                     )}
                   />
                 )}
+                useCondensed
               >
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => (<Redirect to="/home" />)} />
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} />

src/app.scss

@@ -1,56 +1,24 @@
 //
-// page layout
+// masthead overrides
 //
 
-.pf-l-page__header {
-  --pf-l-page__header--MinHeight: 0px;
-  display: flex;
-  align-items: center;
-  height: 60px;
-}
-
 .pf-l-page__header-brand {
-  display: flex;
-  align-self: center;
-  height: 60px;
   max-width: 255px;
-  padding: 0px;
-  margin: 0px;
-}
-
-.pf-l-page__header-tools {
-  align-self: center;
-  height: 60px;
-  padding-left: 255px;
-
-  .fa-user:hover {
-    // temporary dev logout
-    cursor: pointer;
-  }
 }
 
 .pf-l-page__header-brand-link {
   max-width: 85px;
-  align-self: center;
 }
 
 .pf-l-page__header-brand-link img {
   transform: scale(1.1, 1.1);
   position: relative;
-  top: 6px;
+  top: -4px;
 }
 
-.pf-l-page__header-brand-toggle {
+//
-  align-self: center;
+// sidebar overrides
-  position: relative;
+//
-  right: 14px;
-  --pf-l-page__header-brand-link--MarginLeft: 0px;
-  --pf-l-page__header-brand-link--MarginLeft: 0px;
-
-  button {
-    --pf-l-page__header-sidebar-toggle--FontSize: 18px;
-  }
-}
 
 .pf-l-page__sidebar{
   --pf-l-page__sidebar--Width--lg: 255px;
@@ -84,16 +52,11 @@
   }
 }
 
-.pf-l-page__main-section {
-  --pf-l-page__main-section--PaddingTop: 11px;
-  --pf-l-page__main-section--PaddingLeft: 11px;
-}
-
 //
-// toolbar layout
+// page header overrides
 //
 
-.pf-l-toolbar {
+.pf-l-page__main-section.pf-m-condensed {
-  align-self: center;
+  padding-top: 16px;
-  height: 60px;
+  padding-bottom: 16px;
 }

src/pages/Applications.jsx

@@ -11,7 +11,7 @@ class Applications extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Applications</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Applications</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/AuthSettings.jsx

@@ -11,7 +11,7 @@ class AuthSettings extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Authentication Settings</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Authentication Settings</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/CredentialTypes.jsx

@@ -11,7 +11,7 @@ class CredentialTypes extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Credential Types</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Credential Types</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Credentials.jsx

@@ -11,7 +11,7 @@ class Credentials extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Credentials</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Credentials</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Dashboard.jsx

@@ -11,7 +11,7 @@ class Dashboard extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Dashboard</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Dashboard</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/InstanceGroups.jsx

@@ -11,7 +11,7 @@ class InstanceGroups extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Instance Groups</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Instance Groups</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Inventories.jsx

@@ -11,7 +11,7 @@ class Inventories extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Inventories</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Inventories</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/InventoryScripts.jsx

@@ -11,7 +11,7 @@ class InventoryScripts extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Inventory Scripts</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Inventory Scripts</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Jobs.jsx

@@ -11,7 +11,7 @@ class Jobs extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Jobz</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Jobz</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/JobsSettings.jsx

@@ -11,7 +11,7 @@ class JobsSettings extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Jobs Settings</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Jobs Settings</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/License.jsx

@@ -11,7 +11,7 @@ class License extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">License</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">License</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/ManagementJobs.jsx

@@ -11,7 +11,7 @@ class ManagementJobs extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Management Jobs</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Management Jobs</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/NotificationTemplates.jsx

@@ -11,7 +11,7 @@ class NotificationTemplates extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Notification Templates</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Notification Templates</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Organizations.jsx

@@ -28,7 +28,7 @@ class Organizations extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}>
+        <PageSection variant={light} className="pf-m-condensed">
           <Title size="2xl">Organizations</Title>
         </PageSection>
         <PageSection variant={medium}>

src/pages/Portal.jsx

@@ -11,7 +11,7 @@ class Portal extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">My View</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">My View</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Projects.jsx

@@ -11,7 +11,7 @@ class Projects extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Projects</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Projects</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Schedules.jsx

@@ -11,7 +11,7 @@ class Schedules extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Schedules</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Schedules</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/SystemSettings.jsx

@@ -11,7 +11,7 @@ class SystemSettings extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">System Settings</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">System Settings</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Teams.jsx

@@ -11,7 +11,7 @@ class Teams extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Teams</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Teams</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Templates.jsx

@@ -11,7 +11,7 @@ class Templates extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Templates</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Templates</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/UISettings.jsx

@@ -11,7 +11,7 @@ class UISettings extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">User Interface Settings</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">User Interface Settings</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );

src/pages/Users.jsx

@@ -11,7 +11,7 @@ class Users extends Component {
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Users</Title></PageSection>
+        <PageSection variant={light} className="pf-m-condensed"><Title size="2xl">Users</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );