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

fix: hms-8708 landing page sticky header

Browse source
This commit is contained in:
CD Cabrera 2025-07-01 15:53:00 -04:00 • committed by Klara Simickova
parent 3f1a80fbe2
commit 9a29eeb28d
2 changed files with 72 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

140
src/Components/LandingPage/LandingPage.tsx
View file

@ -86,26 +86,65 @@ export const LandingPage = () => {
return (
<>
<ImageBuilderHeader activeTab={activeTabKey} />
{edgeParityFlag ? (
<Tabs
className="pf-c-tabs pf-c-page-header pf-c-table"
activeKey={activeTabKey}
onSelect={handleTabClick}
>
<Tab
eventKey={0}
title={<TabTitleText> Conventional (RPM-DNF){''} </TabTitleText>}
actions={
<HelpPopover
header={'Conventional (RPM-DNF)'}
body={
<div>
<PageSection hasBodyWrapper={false}>
{edgeParityFlag ? (
<Tabs
className="pf-c-tabs pf-c-page-header pf-c-table"
activeKey={activeTabKey}
onSelect={handleTabClick}
>
<Tab
eventKey={0}
title={<TabTitleText> Conventional (RPM-DNF){''} </TabTitleText>}
actions={
<HelpPopover
header={'Conventional (RPM-DNF)'}
body={
<div>
<Content>
<Content>
With RPM-DNF, you can manage the system software by
using the DNF package manager and updated RPM
packages. This is a simple and adaptive method of
managing and modifying the system over its lifecycle.
</Content>
<Content>
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={MANAGING_WITH_DNF_URL}
>
Learn more about managing images with DNF
</Button>
</Content>
</Content>
</div>
}
/>
}
>
{imageList}
</Tab>
<Tab
eventKey={1}
title={<TabTitleText>Immutable (OSTree) </TabTitleText>}
actions={
<HelpPopover
header={'Immutable (OSTree)'}
body={
<Content>
<Content>
With RPM-DNF, you can manage the system software by
using the DNF package manager and updated RPM packages.
This is a simple and adaptive method of managing and
modifying the system over its lifecycle.
With OSTree, you can manage the system software by
referencing a central image repository. OSTree images
contain a complete operating system ready to be remotely
installed at scale. You can track updates to images
through commits and enable secure updates that only
address changes and keep the operating system unchanged.
The updates are quick, and the rollbacks are easy.
</Content>
<Content>
<Button
@ -115,61 +154,24 @@ export const LandingPage = () => {
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={MANAGING_WITH_DNF_URL}
href={OSTREE_URL}
>
Learn more about managing images with DNF
Learn more about OSTree
</Button>
</Content>
</Content>
</div>
}
/>
}
>
{imageList}
</Tab>
<Tab
eventKey={1}
title={<TabTitleText>Immutable (OSTree) </TabTitleText>}
actions={
<HelpPopover
header={'Immutable (OSTree)'}
body={
<Content>
<Content>
With OSTree, you can manage the system software by
referencing a central image repository. OSTree images
contain a complete operating system ready to be remotely
installed at scale. You can track updates to images
through commits and enable secure updates that only
address changes and keep the operating system unchanged.
The updates are quick, and the rollbacks are easy.
</Content>
<Content>
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={OSTREE_URL}
>
Learn more about OSTree
</Button>
</Content>
</Content>
}
/>
}
>
<EdgeImagesTable />
</Tab>
</Tabs>
) : (
imageList
)}
<Outlet />
}
/>
}
>
<EdgeImagesTable />
</Tab>
</Tabs>
) : (
imageList
)}
<Outlet />
</PageSection>
</>
);
};

2
src/Components/sharedComponents/ImageBuilderHeader.tsx
View file

@ -105,7 +105,7 @@ export const ImageBuilderHeader = ({
isOpen={showImportModal}
/>
)}
<PageHeader>
<PageHeader className="pf-m-sticky-top">
<PageHeaderTitle
className="title"
title={