particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cockpit: page section wrapper for entrypoint

Browse source 
Wrap the AppCockpit entrypoint in `Page` & `PageSection` wrappers so
that it is more consistent with other cockpit elements.
This commit is contained in:
Gianluca Zuccarelli 2025-06-05 10:49:55 +00:00 • committed by Simon Steinbeiß
parent 40fe892dbf
commit e7bf1d3540
3 changed files with 34 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

10
cockpit/public/index.html
View file

@ -1,15 +1,15 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en-us" class="layout-pf pf-m-redhat-font">
<head>
<meta charset="utf-8">
<meta charset="utf-8" />
<title>Image-Builder</title>
<!-- js dependencies -->
<script type="text/javascript" src="../base1/cockpit.js"></script>
<link href="main.css" rel="stylesheet">
<script defer src="main.js"></script>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div id="main"></div>
<script defer src="main.js"></script>
<div class="ct-page-fill" id="main"></div>
</body>
</html>

18
src/AppCockpit.scss Normal file
View file

@ -0,0 +1,18 @@
// Override as PF Page doesn't allow empty masthead and sidebar
@media (min-width: 75rem) {
.pf-v6-c-page.no-masthead-sidebar {
/* custom class to scope this style to a specific page component instance */
--pf-v6-c-page__main-container--GridArea: var(
--pf-v6-c-page--masthead--main-container--GridArea
);
}
}
.pf-v6-c-page__main-section {
padding-inline: 0;
padding-block-start: 0;
}
.pf-v6-c-page__main > section.pf-v6-c-page__main-section:not(.pf-m-padding) {
padding-inline: 0;
}

6
src/AppCockpit.tsx
View file

@ -3,11 +3,13 @@ import '@patternfly/patternfly/patternfly-addons.css';
import React from 'react';
import { Page, PageSection } from '@patternfly/react-core';
import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { HashRouter } from 'react-router-dom';
import './AppCockpit.scss';
import { NotReady, RequireAdmin } from './Components/Cockpit';
import { Router } from './Router';
import { onPremStore as store } from './store';
@ -37,7 +39,11 @@ const Application = () => {
};
const ImageBuilder = () => (
<Provider store={store}>
<Page className="no-masthead-sidebar" isContentFilled>
<PageSection>
<Application />
</PageSection>
</Page>
</Provider>
);