diff options
author | Felix Edel <felix.edel@bmw.de> | 2020-06-17 15:54:38 +0200 |
---|---|---|
committer | Felix Edel <felix.edel@bmw.de> | 2020-07-07 11:16:48 +0200 |
commit | 65653bcd012eed641171611cd6bf7f68af6338a2 (patch) | |
tree | 5e4241e7cd74491716ed9fe468233578b4728d2c /web/src/pages/OpenApi.jsx | |
parent | 22ddf90cc375f2576143656b8035c3fd8ccee954 (diff) | |
download | zuul-65653bcd012eed641171611cd6bf7f68af6338a2.tar.gz |
Introduce Patternfly 4
Since Patternfly 4 (PF4) is a complete rewrite of the framework that
doesn't require bootstrap and comes with a new npm package, it's
possible to include both side-by-side in a project.
This change includes the necessary PF4 packages and updates the header,
navbar, drawer (shows the config errors) and global page layout with PF4
components. Once this is done, we should be able to update the other
components step by step to PF4.
Points to keep in mind for the migration phase:
1. Some Patternfly 3 CSS rules are overridden by Patternfly 4
wildcards, mostly (re)setting the padding and margin of various
elements to 0.
To fix this unwanted behaviour, there is a pf4-migration.css file
included were we can keep track on those rules and ensure that the
old padding and margin values are re-applied after Patternfly 4 is
imported.
Change-Id: I77b81fa0f97fe718207ba5a506cee300371c693b
Diffstat (limited to 'web/src/pages/OpenApi.jsx')
-rw-r--r-- | web/src/pages/OpenApi.jsx | 5 |
1 files changed, 3 insertions, 2 deletions
diff --git a/web/src/pages/OpenApi.jsx b/web/src/pages/OpenApi.jsx index 114083c24..a765b2a61 100644 --- a/web/src/pages/OpenApi.jsx +++ b/web/src/pages/OpenApi.jsx @@ -17,6 +17,7 @@ import PropTypes from 'prop-types' import { connect } from 'react-redux' import SwaggerUi from 'swagger-ui' import 'swagger-ui/dist/swagger-ui.css' +import { PageSection, PageSectionVariants } from '@patternfly/react-core' import { fetchOpenApiIfNeeded } from '../actions/openapi' import Refreshable from '../containers/Refreshable' @@ -51,12 +52,12 @@ class OpenApiPage extends Refreshable { render() { return ( - <React.Fragment> + <PageSection variant={PageSectionVariants.light}> <div className="pull-right" style={{display: 'flex'}}> {this.renderSpinner()} </div> <div id="swaggerContainer" /> - </React.Fragment> + </PageSection> ) } } |