From 2785736c7c63dcac1a3e2863b0e63e6521ff5530 Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Wed, 7 Feb 2018 12:58:31 -0500 Subject: [PATCH] UI: Use VerticalNav component, fix toolbar settings (#641) --- client/package.json | 2 +- client/src/components/app.js | 125 +++++++++++++----- client/src/components/content/content.js | 20 +-- .../createCredentialDialog.js | 2 +- .../credentials/credentialListItem.js | 9 +- .../credentials/credentialsToolbar.js | 14 +- client/src/components/masthead/masthead.js | 55 -------- client/src/components/scans/scanListItem.js | 9 +- client/src/components/scans/scansToolbar.js | 28 ++-- .../src/components/sources/sourceListItem.js | 9 +- .../src/components/sources/sourcesToolbar.js | 14 +- .../verticalNavigation/verticalNavigation.js | 73 ---------- .../redux/constants/viewToolbarConstants.js | 9 +- .../src/redux/reducers/credentialsReducer.js | 3 +- .../reducers/credentialsToolbarReducer.js | 4 + .../src/redux/reducers/scansToolbarReducer.js | 4 + .../redux/reducers/sourcesToolbarReducer.js | 4 + client/src/routes.js | 6 +- client/src/styles/entitlements/_masthead.scss | 4 - .../src/styles/entitlements/_overrides.scss | 12 +- client/src/styles/entitlements/_views.scss | 17 +++ 21 files changed, 202 insertions(+), 221 deletions(-) delete mode 100644 client/src/components/masthead/masthead.js delete mode 100644 client/src/components/verticalNavigation/verticalNavigation.js diff --git a/client/package.json b/client/package.json index 5dd22df1b..c66d1997c 100644 --- a/client/package.json +++ b/client/package.json @@ -41,7 +41,7 @@ "jquery": "^3.3.1", "js-cookie": "^2.2.0", "patternfly": "^3.37.8", - "patternfly-react": "^1.6.0", + "patternfly-react": "^1.7.0", "rcue": "^3.38.0", "react": "^16.2.0", "react-bootstrap": "^0.32.0", diff --git a/client/src/components/app.js b/client/src/components/app.js index a33dabd3c..5cb94eddf 100644 --- a/client/src/components/app.js +++ b/client/src/components/app.js @@ -1,19 +1,28 @@ import React from 'react'; +import PropTypes from 'prop-types'; + import { connect } from 'react-redux'; import { withRouter } from 'react-router'; -import PropTypes from 'prop-types'; -import { AboutModal } from 'patternfly-react'; + +import { + AboutModal, + Dropdown, + Icon, + MenuItem, + VerticalNav +} from 'patternfly-react'; import { routes } from '../routes'; import Store from '../redux/store'; + import Content from './content/content'; -import Masthead from './masthead/masthead'; import ToastNotificationsList from './toastNotificationList/toastNotificatinsList'; -import VerticalNavigation from './verticalNavigation/verticalNavigation'; import ConfirmationModal from './confirmationModal/confirmationModal'; import logo from '../styles/images/Red_Hat_logo.svg'; import productTitle from '../styles/images/title.svg'; +import _ from 'lodash'; +import { aboutTypes } from '../redux/constants'; class App extends React.Component { constructor() { @@ -21,44 +30,94 @@ class App extends React.Component { this.menu = routes(); } + navigateTo(path) { + const { history } = this.props; + history.push(path); + } + + renderMenuItems() { + const { location } = this.props; + + return this.menu.map(item => { + return ( + this.navigateTo(item.to)} + /> + ); + }); + } + + showAboutModal() { + Store.dispatch({ type: aboutTypes.ABOUT_DIALOG_OPEN }); + } + render() { const { showAbout } = this.props; let closeAbout = () => Store.dispatch({ type: 'ABOUT_DIALOG_CLOSE' }); - return [ - , - , - , - - } - logo={logo} - altLogo="RH ER" - trademarkText="Copyright (c) 2018 Red Hat Inc." - > - - - - - - - - - - , - , - - ]; + return ( +
+ + + + + + {this.renderMenuItems()} + +
+ +
+ + } + logo={logo} + altLogo="RH ER" + trademarkText="Copyright (c) 2018 Red Hat Inc." + > + + + + + + + + + + + + +
+ ); } } App.propTypes = { - showAbout: PropTypes.bool + showAbout: PropTypes.bool, + location: PropTypes.object, + history: PropTypes.shape({ + push: PropTypes.func.isRequired + }).isRequired }; function mapStateToProps(state, ownProps) { diff --git a/client/src/components/content/content.js b/client/src/components/content/content.js index 050b33332..2ee6b6e52 100644 --- a/client/src/components/content/content.js +++ b/client/src/components/content/content.js @@ -1,10 +1,6 @@ -import ClassNames from 'classnames'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; import React from 'react'; import { Redirect, Route, Switch } from 'react-router-dom'; import { routes } from '../../routes'; -import { withRouter } from 'react-router'; class Content extends React.Component { renderRoutes() { @@ -23,15 +19,10 @@ class Content extends React.Component { } render() { - let classes = ClassNames({ - 'container-pf-nav-pf-vertical': true, - 'collapsed-nav': this.props.navigationBar.collapsed - }); - const { renderRoutes, redirectRoot } = this.renderRoutes(); return ( -
+
{renderRoutes} {redirectRoot} @@ -40,12 +31,5 @@ class Content extends React.Component { ); } } -Content.propTypes = { - navigationBar: PropTypes.object -}; - -function mapStateToProps(state, ownProps) { - return state; -} -export default withRouter(connect(mapStateToProps)(Content)); +export default Content; diff --git a/client/src/components/createCredentialDialog/createCredentialDialog.js b/client/src/components/createCredentialDialog/createCredentialDialog.js index 1e331060a..b5589c7d1 100644 --- a/client/src/components/createCredentialDialog/createCredentialDialog.js +++ b/client/src/components/createCredentialDialog/createCredentialDialog.js @@ -598,7 +598,7 @@ CreateCredentialDialog.propTypes = { credentials: PropTypes.array, newCredential: PropTypes.object, - newCredentialType: PropTypes.string, + newCredentialType: PropTypes.string, // eslint-disable-line react/no-unused-prop-types addCredential: PropTypes.func, addFulfilled: PropTypes.bool, addError: PropTypes.bool, diff --git a/client/src/components/credentials/credentialListItem.js b/client/src/components/credentials/credentialListItem.js index d8a984c51..7504e547f 100644 --- a/client/src/components/credentials/credentialListItem.js +++ b/client/src/components/credentials/credentialListItem.js @@ -13,8 +13,13 @@ class CredentialListItem extends React.Component { toggleExpand(expandType) { const { item } = this.props; - item.expanded = !item.expanded; - item.expandType = expandType; + + if (expandType === item.expandType) { + item.expanded = !item.expanded; + } else { + item.expanded = true; + item.expandType = expandType; + } this.forceUpdate(); } diff --git a/client/src/components/credentials/credentialsToolbar.js b/client/src/components/credentials/credentialsToolbar.js index d0370cd6c..4492f6e07 100644 --- a/client/src/components/credentials/credentialsToolbar.js +++ b/client/src/components/credentials/credentialsToolbar.js @@ -68,6 +68,7 @@ class CredentialsToolbar extends React.Component { let filter = { field: field, value: value, label: filterText }; Store.dispatch({ type: viewToolbarTypes.ADD_FILTER, + viewType: viewToolbarTypes.CREDENTIALS_VIEW, filter }); } @@ -75,6 +76,7 @@ class CredentialsToolbar extends React.Component { selectFilterType(filterType) { Store.dispatch({ type: viewToolbarTypes.SET_FILTER_TYPE, + viewType: viewToolbarTypes.CREDENTIALS_VIEW, filterType }); } @@ -85,6 +87,7 @@ class CredentialsToolbar extends React.Component { let filterValue = newFilterValue; Store.dispatch({ type: viewToolbarTypes.SET_FILTER_VALUE, + viewType: viewToolbarTypes.CREDENTIALS_VIEW, filterValue }); if (newFilterValue) { @@ -96,6 +99,7 @@ class CredentialsToolbar extends React.Component { let filterValue = event.target.value; Store.dispatch({ type: viewToolbarTypes.SET_FILTER_VALUE, + viewType: viewToolbarTypes.CREDENTIALS_VIEW, filterValue }); } @@ -113,26 +117,30 @@ class CredentialsToolbar extends React.Component { removeFilter(filter) { Store.dispatch({ type: viewToolbarTypes.REMOVE_FILTER, + viewType: viewToolbarTypes.CREDENTIALS_VIEW, filter }); } clearFilters() { Store.dispatch({ - type: viewToolbarTypes.CLEAR_FILTERS + type: viewToolbarTypes.CLEAR_FILTERS, + viewType: viewToolbarTypes.CREDENTIALS_VIEW }); } updateCurrentSortType(sortType) { Store.dispatch({ type: viewToolbarTypes.SET_SORT_TYPE, + viewType: viewToolbarTypes.CREDENTIALS_VIEW, sortType }); } toggleCurrentSortDirection() { Store.dispatch({ - type: viewToolbarTypes.TOGGLE_SORT_ASCENDING + type: viewToolbarTypes.TOGGLE_SORT_ASCENDING, + viewType: viewToolbarTypes.CREDENTIALS_VIEW }); } @@ -247,7 +255,7 @@ class CredentialsToolbar extends React.Component { {activeFilters && activeFilters.length > 0 ? `${filteredCount} of ` : null} - {totalCount + (totalCount > 1 ? ' Results' : ' Result')} + {totalCount + (totalCount > 1 ? ' Credentials' : ' Credential')} ); } diff --git a/client/src/components/masthead/masthead.js b/client/src/components/masthead/masthead.js deleted file mode 100644 index f8bd9748e..000000000 --- a/client/src/components/masthead/masthead.js +++ /dev/null @@ -1,55 +0,0 @@ -import React, { Component } from 'react'; -import Store from '../../redux/store'; - -import { ButtonGroup, DropdownButton, MenuItem } from 'react-bootstrap'; -import { aboutTypes, navigationBarTypes } from '../../redux/constants'; -import productTitle from '../../styles/images/title.svg'; - -class NavBar extends Component { - render() { - let toggleCollapse = () => - Store.dispatch({ type: navigationBarTypes.NAV_TOGGLE_COLLAPSE }); - let showAbout = () => - Store.dispatch({ type: aboutTypes.ABOUT_DIALOG_OPEN }); - - return ( - - ); - } -} - -export default NavBar; diff --git a/client/src/components/scans/scanListItem.js b/client/src/components/scans/scanListItem.js index 7e4c3c80c..99361c3a9 100644 --- a/client/src/components/scans/scanListItem.js +++ b/client/src/components/scans/scanListItem.js @@ -24,8 +24,13 @@ class ScanListItem extends React.Component { toggleExpand(expandType) { const { item } = this.props; - item.expanded = !item.expanded; - item.expandType = expandType; + + if (expandType === item.expandType) { + item.expanded = !item.expanded; + } else { + item.expanded = true; + item.expandType = expandType; + } this.forceUpdate(); } diff --git a/client/src/components/scans/scansToolbar.js b/client/src/components/scans/scansToolbar.js index 948178cb3..697bf4dc1 100644 --- a/client/src/components/scans/scansToolbar.js +++ b/client/src/components/scans/scansToolbar.js @@ -8,7 +8,7 @@ import { bindMethods } from '../../common/helpers'; import { ScanFilterFields, ScanSortFields } from './scanConstants'; import Store from '../../redux/store'; -import { viewToolbarTypes as dispatchTypes } from '../../redux/constants/'; +import { viewToolbarTypes } from '../../redux/constants'; class ScansToolbar extends React.Component { constructor() { @@ -56,14 +56,16 @@ class ScansToolbar extends React.Component { let filter = { field: field, value: value, label: filterText }; Store.dispatch({ - type: dispatchTypes.ADD_FILTER, + type: viewToolbarTypes.ADD_FILTER, + viewType: viewToolbarTypes.SCANS_VIEW, filter }); } selectFilterType(filterType) { Store.dispatch({ - type: dispatchTypes.SET_FILTER_TYPE, + type: viewToolbarTypes.SET_FILTER_TYPE, + viewType: viewToolbarTypes.SCANS_VIEW, filterType }); } @@ -73,7 +75,8 @@ class ScansToolbar extends React.Component { let filterValue = newFilterValue; Store.dispatch({ - type: dispatchTypes.SET_FILTER_VALUE, + type: viewToolbarTypes.SET_FILTER_VALUE, + viewType: viewToolbarTypes.SCANS_VIEW, filterValue }); if (newFilterValue) { @@ -84,7 +87,8 @@ class ScansToolbar extends React.Component { updateCurrentValue(event) { let filterValue = event.target.value; Store.dispatch({ - type: dispatchTypes.SET_FILTER_VALUE, + type: viewToolbarTypes.SET_FILTER_VALUE, + viewType: viewToolbarTypes.SCANS_VIEW, filterValue }); } @@ -101,27 +105,31 @@ class ScansToolbar extends React.Component { removeFilter(filter) { Store.dispatch({ - type: dispatchTypes.REMOVE_FILTER, + type: viewToolbarTypes.REMOVE_FILTER, + viewType: viewToolbarTypes.SCANS_VIEW, filter }); } clearFilters() { Store.dispatch({ - type: dispatchTypes.CLEAR_FILTERS + type: viewToolbarTypes.CLEAR_FILTERS, + viewType: viewToolbarTypes.SCANS_VIEW }); } updateCurrentSortType(sortType) { Store.dispatch({ - type: dispatchTypes.SET_SORT_TYPE, + type: viewToolbarTypes.SET_SORT_TYPE, + viewType: viewToolbarTypes.SCANS_VIEW, sortType }); } toggleCurrentSortDirection() { Store.dispatch({ - type: dispatchTypes.TOGGLE_SORT_ASCENDING + type: viewToolbarTypes.TOGGLE_SORT_ASCENDING, + viewType: viewToolbarTypes.SCANS_VIEW }); } @@ -210,7 +218,7 @@ class ScansToolbar extends React.Component { {activeFilters && activeFilters.length > 0 ? `${filteredCount} of ` : null} - {totalCount + (totalCount > 1 ? ' Results' : ' Result')} + {totalCount + (totalCount > 1 ? ' Scans' : ' Scan')} ); } diff --git a/client/src/components/sources/sourceListItem.js b/client/src/components/sources/sourceListItem.js index 50136b971..602449243 100644 --- a/client/src/components/sources/sourceListItem.js +++ b/client/src/components/sources/sourceListItem.js @@ -16,8 +16,13 @@ class SourceListItem extends React.Component { toggleExpand(expandType) { const { item } = this.props; - item.expanded = !item.expanded; - item.expandType = expandType; + + if (expandType === item.expandType) { + item.expanded = !item.expanded; + } else { + item.expanded = true; + item.expandType = expandType; + } this.forceUpdate(); } diff --git a/client/src/components/sources/sourcesToolbar.js b/client/src/components/sources/sourcesToolbar.js index 1e851bc5f..4b6193b16 100644 --- a/client/src/components/sources/sourcesToolbar.js +++ b/client/src/components/sources/sourcesToolbar.js @@ -57,6 +57,7 @@ class SourcesToolbar extends React.Component { let filter = { field: field, value: value, label: filterText }; Store.dispatch({ type: viewToolbarTypes.ADD_FILTER, + viewType: viewToolbarTypes.SOURCES_VIEW, filter }); } @@ -64,6 +65,7 @@ class SourcesToolbar extends React.Component { selectFilterType(filterType) { Store.dispatch({ type: viewToolbarTypes.SET_FILTER_TYPE, + viewType: viewToolbarTypes.SOURCES_VIEW, filterType }); } @@ -74,6 +76,7 @@ class SourcesToolbar extends React.Component { let filterValue = newFilterValue; Store.dispatch({ type: viewToolbarTypes.SET_FILTER_VALUE, + viewType: viewToolbarTypes.SOURCES_VIEW, filterValue }); if (newFilterValue) { @@ -85,6 +88,7 @@ class SourcesToolbar extends React.Component { let filterValue = event.target.value; Store.dispatch({ type: viewToolbarTypes.SET_FILTER_VALUE, + viewType: viewToolbarTypes.SOURCES_VIEW, filterValue }); } @@ -102,26 +106,30 @@ class SourcesToolbar extends React.Component { removeFilter(filter) { Store.dispatch({ type: viewToolbarTypes.REMOVE_FILTER, + viewType: viewToolbarTypes.SOURCES_VIEW, filter }); } clearFilters() { Store.dispatch({ - type: viewToolbarTypes.CLEAR_FILTERS + type: viewToolbarTypes.CLEAR_FILTERS, + viewType: viewToolbarTypes.SOURCES_VIEW }); } updateCurrentSortType(sortType) { Store.dispatch({ type: viewToolbarTypes.SET_SORT_TYPE, + viewType: viewToolbarTypes.SOURCES_VIEW, sortType }); } toggleCurrentSortDirection() { Store.dispatch({ - type: viewToolbarTypes.TOGGLE_SORT_ASCENDING + type: viewToolbarTypes.TOGGLE_SORT_ASCENDING, + viewType: viewToolbarTypes.SOURCES_VIEW }); } @@ -219,7 +227,7 @@ class SourcesToolbar extends React.Component { {activeFilters && activeFilters.length > 0 ? `${filteredCount} of ` : null} - {totalCount + (totalCount > 1 ? ' Results' : ' Result')} + {totalCount + (totalCount > 1 ? ' Sources' : ' Source')} ); } diff --git a/client/src/components/verticalNavigation/verticalNavigation.js b/client/src/components/verticalNavigation/verticalNavigation.js deleted file mode 100644 index cb75a9622..000000000 --- a/client/src/components/verticalNavigation/verticalNavigation.js +++ /dev/null @@ -1,73 +0,0 @@ -import ClassNames from 'classnames'; -import { connect } from 'react-redux'; -import { Link } from 'react-router-dom'; -import React from 'react'; -import PropTypes from 'prop-types'; -import { withRouter } from 'react-router'; - -import _ from 'lodash'; -import { OverlayTrigger, Tooltip } from 'patternfly-react'; - -class VerticalNavigation extends React.Component { - renderMenuItems() { - return this.props.menuItems.map((item, index) => { - let icon = null; - if (item.icon !== undefined) { - if (this.props.navigationBar.collapsed) { - let tooltip = ( - -
{item.title}
- - ); - icon = ( - - - - ); - } else { - icon = ; - } - } - - let classes = ClassNames({ - 'list-group-item': true, - active: _.startsWith(this.props.location.pathname, item.to) - }); - - return ( -
  • - - {icon} - {item.title} - -
    • - ); - }); - } - - render() { - let classes = ClassNames({ - 'nav-pf-vertical': true, - 'nav-pf-vertical-with-sub-menus': true, - collapsed: this.props.navigationBar.collapsed - }); - - return ( -
    -
      {this.renderMenuItems()}
    -
    - ); - } -} - -VerticalNavigation.propTypes = { - location: PropTypes.object, - menuItems: PropTypes.array.isRequired, - navigationBar: PropTypes.object -}; - -function mapStateToProps(state, ownProps) { - return state; -} - -export default withRouter(connect(mapStateToProps)(VerticalNavigation)); diff --git a/client/src/redux/constants/viewToolbarConstants.js b/client/src/redux/constants/viewToolbarConstants.js index ea6793924..52c5b0c1f 100644 --- a/client/src/redux/constants/viewToolbarConstants.js +++ b/client/src/redux/constants/viewToolbarConstants.js @@ -6,6 +6,10 @@ const CLEAR_FILTERS = 'CLEAR_FILTERS'; const SET_SORT_TYPE = 'SET_SORT_TYPE'; const TOGGLE_SORT_ASCENDING = 'TOGGLE_SORT_ASCENDING'; +const SOURCES_VIEW = 'SOURCES_VIEW'; +const SCANS_VIEW = 'SCANS_VIEW'; +const CREDENTIALS_VIEW = 'CREDENTIALS_VIEW'; + export { SET_FILTER_TYPE, SET_FILTER_VALUE, @@ -13,5 +17,8 @@ export { REMOVE_FILTER, CLEAR_FILTERS, SET_SORT_TYPE, - TOGGLE_SORT_ASCENDING + TOGGLE_SORT_ASCENDING, + SOURCES_VIEW, + SCANS_VIEW, + CREDENTIALS_VIEW }; diff --git a/client/src/redux/reducers/credentialsReducer.js b/client/src/redux/reducers/credentialsReducer.js index 25021f48f..bca6019c0 100644 --- a/client/src/redux/reducers/credentialsReducer.js +++ b/client/src/redux/reducers/credentialsReducer.js @@ -122,8 +122,9 @@ function credentialsReducer(state = initialState, action) { case credentialsTypes.GET_CREDENTIAL_FULFILLED: case credentialsTypes.GET_CREDENTIALS_FULFILLED: + console.dir(action.payload); return Object.assign({}, state, { - credentials: action.payload, + credentials: action.payload.results, getFulfilled: true, getPending: false }); diff --git a/client/src/redux/reducers/credentialsToolbarReducer.js b/client/src/redux/reducers/credentialsToolbarReducer.js index c6670a2cf..8e9d39d3d 100644 --- a/client/src/redux/reducers/credentialsToolbarReducer.js +++ b/client/src/redux/reducers/credentialsToolbarReducer.js @@ -12,6 +12,10 @@ export default function credentialsToolbarReducer( state = initialState, action ) { + if (action.viewType !== viewToolbarTypes.CREDENTIALS_VIEW) { + return state; + } + switch (action.type) { case viewToolbarTypes.SET_FILTER_TYPE: if (state.filterType === action.filterType) { diff --git a/client/src/redux/reducers/scansToolbarReducer.js b/client/src/redux/reducers/scansToolbarReducer.js index 4040b4cbc..fa4d83f50 100644 --- a/client/src/redux/reducers/scansToolbarReducer.js +++ b/client/src/redux/reducers/scansToolbarReducer.js @@ -9,6 +9,10 @@ const initialState = { }; export default function scansToolbarReducer(state = initialState, action) { + if (action.viewType !== viewToolbarTypes.SCANS_VIEW) { + return state; + } + switch (action.type) { case viewToolbarTypes.SET_FILTER_TYPE: if (state.filterType === action.filterType) { diff --git a/client/src/redux/reducers/sourcesToolbarReducer.js b/client/src/redux/reducers/sourcesToolbarReducer.js index fcebce2ed..6101588d0 100644 --- a/client/src/redux/reducers/sourcesToolbarReducer.js +++ b/client/src/redux/reducers/sourcesToolbarReducer.js @@ -9,6 +9,10 @@ const initialState = { }; export default function sourcesToolbarReducer(state = initialState, action) { + if (action.viewType !== viewToolbarTypes.SOURCES_VIEW) { + return state; + } + switch (action.type) { case viewToolbarTypes.SET_FILTER_TYPE: if (state.filterType === action.filterType) { diff --git a/client/src/routes.js b/client/src/routes.js index d0afc8930..20d5061fc 100644 --- a/client/src/routes.js +++ b/client/src/routes.js @@ -10,20 +10,20 @@ const baseName = '/client'; */ const routes = () => [ { - icon: 'pficon pficon-network', + iconClass: 'pficon pficon-network', title: 'Sources', to: '/sources', redirect: true, component: Sources }, { - icon: 'fa fa-wifi', + iconClass: 'fa fa-wifi', title: 'Scans', to: '/scans', component: Scans }, { - icon: 'fa fa-key', + iconClass: 'fa fa-key', title: 'Credentials', to: '/credentials', component: Credentials diff --git a/client/src/styles/entitlements/_masthead.scss b/client/src/styles/entitlements/_masthead.scss index 9eb9eaeea..ee8cd21ff 100644 --- a/client/src/styles/entitlements/_masthead.scss +++ b/client/src/styles/entitlements/_masthead.scss @@ -38,7 +38,3 @@ } } -.navbar-pf-vertical .navbar-brand .navbar-brand-txt { - height: 11px; - margin-top: 13px; -} diff --git a/client/src/styles/entitlements/_overrides.scss b/client/src/styles/entitlements/_overrides.scss index ab9b2b71e..21c5d7b41 100644 --- a/client/src/styles/entitlements/_overrides.scss +++ b/client/src/styles/entitlements/_overrides.scss @@ -21,15 +21,9 @@ button.unavailable:hover, li.unavailable > a:hover { } } -// Override so that we get internal vertical scroll -.layout-pf.layout-pf-fixed .container-pf-nav-pf-vertical { - bottom: 0; - top: $navbar-pf-vertical-height; - position: fixed; - width: unquote("calc(100% - #{$nav-pf-vertical-width})"); - &.collapsed-nav { - width: unquote("calc(100% - #{$nav-pf-vertical-collapsed-width})"); - } +.navbar-pf-vertical .navbar-brand .navbar-brand-name { + height: 11px; + margin-top: 13px; } .list-view-pf-top-align .list-view-pf-additional-info { diff --git a/client/src/styles/entitlements/_views.scss b/client/src/styles/entitlements/_views.scss index 7a5236526..89cf4d5de 100644 --- a/client/src/styles/entitlements/_views.scss +++ b/client/src/styles/entitlements/_views.scss @@ -1,4 +1,21 @@ /* _views.scss */ + +// Setup for internal vertical scroll +.quipucords-content { + bottom: 0; + top: $navbar-pf-vertical-height; + right: 0; + position: fixed; + left: $nav-pf-vertical-width; + .collapsed-nav & { + left: $nav-pf-vertical-collapsed-width; + } + .hidden-nav & { + left: 0; + } +} + + .quipucords-view-container { display: flex; flex-direction: column;