mobile: Support PF6 style

Author: Venefilyn

pkg/lib/ct-card.scss

@@ -29,7 +29,7 @@
 
 .ct-card.pf-v6-c-card .pf-v6-c-card__title-text {
   font-weight: normal;
-  font-size: var(--pf-v5-global--FontSize--2xl);
+  font-size: var(--pf-t--global--font--size--2xl);
 }
 
 // Remove excess top padding from top-level empty state in cards,

pkg/lib/patternfly/patternfly-6-overrides.scss

@@ -2,6 +2,8 @@
 // Pull in variables (for breakpoints)
 @use "global-variables" as *;
 
+$phone: 767px;
+
 // PF Select is deprecated - no issue reported upstream - this needs to be removed from our codebase
 // Make select have the expected width
 // REVIEW @Venefilyn: Check if still relevant
@@ -350,15 +352,24 @@ to wrap around when there isn't enough space.
   margin-inline: 0 var(--pf-v6-c-button__icon--m-start--MarginRight);
 }
 
-// Drop side padding in mobile mode,
-// intended mainly for PF PageSection elements (pf-v6-c-page__main-section).
-// It's similar to adding padding={{ default: 'noPadding', sm: 'padding' }},
-// except this only affects the sides, not the top and bottom.
-// @media screen and (max-width: $pf-v6-global--breakpoint--sm) {
-//   .pf-v6-c-page__main>section.pf-v6-c-page__main-section:not(.pf-m-padding) {
-//     padding-inline: 0;
-//   }
-// }
+
+@media screen and (max-width: $pf-v6-global--breakpoint--md) {
+  // Drop side padding in mobile mode,
+  // intended mainly for PF PageSection elements (pf-v6-c-page__main-section).
+  // It's similar to adding padding={{ default: 'noPadding', sm: 'padding' }},
+  // except this only affects the sides, not the top and bottom.
+  .pf-v6-c-page__main>section.pf-v6-c-page__main-section:not(.pf-m-padding) {
+    padding-inline: 0;
+  }
+
+  // Drop page padding and radius for page container in mobile mode. Make sure
+  // the page container is also covering as much as possible
+  .pf-v6-c-page {
+    --pf-v6-c-page--inset: 0;
+    --pf-v6-c-page__main-container--BorderRadius: 0;
+    --pf-v6-c-page__main-container--MaxHeight: 100%;
+  }
+}
 
 // Patch tabular number 0s to not have the slash inside
 // https://github.com/RedHatOfficial/RedHatFont/issues/53

pkg/shell/nav.scss

@@ -641,8 +641,8 @@ $desktop: $phone + 1px;
 .ct-nav-toggle:not(.pf-v6-c-menu) {
   &:hover, &:active, &.active, &.interact, &[aria-expanded="true"] {
     text-decoration: none;
-    // approximate --pf-v5-global--BackgroundColor--dark-400, but with opacity
-    background: var(--pf-t--global--background--color--secondary--hover) !important;
+    // add in opacity so the navigation colored line doesn't hide on hover
+    background: color-mix(in srgb, var(--pf-t--global--background--color--secondary--hover) 32%, transparent) !important;
 
     .hostname {
       text-decoration: underline;
@@ -749,8 +749,7 @@ $desktop: $phone + 1px;
     grid-template-rows: 28px 1fr;
     justify-content: center;
     justify-items: center;
-    color: var(--pf-v5-global--Color--light-100);
-    padding-block: var(--pf-t--global--spacer--sm);
+    // padding-block: var(--pf-t--global--spacer--sm);
     padding-inline: var(--pf-t--global--spacer--xs);
     align-items: center;
 
@@ -781,6 +780,17 @@ $desktop: $phone + 1px;
       max-inline-size: 100%;
     }
   }
+
+  // FIXME @Venefilyn: Some bug is causing the listener in SidebarToggle to trigger pointer clicks on internal elements causing the menu to not work.
+  // Setting it to initial means that the after content that covers up the whole button will still allow us to trigger it correctly.
+  #nav-system-item::after {
+    pointer-events: initial
+  }
+
+  // PF6 introduced toolbar column gap which is great in general. But not what we want for mobile view
+  .ct-topnav-content {
+    --pf-v6-c-toolbar__content-section--ColumnGap: 0;
+  }
 }
 
 // HACK: Don't span the navigation as wide or tall as possible

pkg/shell/nav.tsx

@@ -31,6 +31,7 @@ import { Status } from "notifications";
 import { Location, encode_location, ManifestItem } from "./util.jsx";
 import { ShellState } from "./state";
 import { ManifestKeyword } from "./manifests";
+import { Icon } from "@patternfly/react-core";
 
 const _ = cockpit.gettext;
 
@@ -65,7 +66,9 @@ export const SidebarToggle = () => {
         <Button className={"pf-v6-c-select__toggle ct-nav-toggle " + (active ? "active" : "")}
                 id="nav-system-item" variant="plain"
                 onClick={() => setActive(!active)}>
-            <ContainerNodeIcon className="pf-v6-c-icon pf-m-lg" />
+            <Icon size="xl">
+                <ContainerNodeIcon />
+            </Icon>
             {_("System")}
         </Button>
     );

pkg/shell/shell.scss

@@ -130,7 +130,7 @@ $desktop: $phone + 1px;
   }
 
   .pf-v6-c-toolbar {
-    --pf-v5-c-toolbar--BackgroundColor: transparent;
+    --pf-v6-c-toolbar--BackgroundColor: transparent;
   }
 
   @media (max-width: $phone) {
@@ -169,6 +169,9 @@ $desktop: $phone + 1px;
     // Remove excess padding from masthead in mobile
     .pf-v6-c-masthead {
       --pf-v6-c-masthead--inset: 0;
+      --pf-v6-c-masthead--PaddingBlock: 0;
+      --pf-v6-c-masthead--PaddingInline: 0;
+      height: 100%;
     }
   }
 

pkg/shell/topnav.tsx

@@ -37,6 +37,7 @@ import { AboutCockpitModal, LangModal, OopsModal } from "./shell-modals.jsx";
 import { SuperuserIndicator } from "./superuser.jsx";
 import { read_os_release } from "os-release.js";
 import { DialogsContext } from "dialogs.jsx";
+import { Icon } from "@patternfly/react-core";
 
 const _ = cockpit.gettext;
 
@@ -176,15 +177,15 @@ export class TopNav extends React.Component {
 
         // HACK: This should be a DropdownItem so the normal onSelect closing behaviour works, but we can't embed a button in a button
         const main_menu = [
-            <div // eslint-disable-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
-              id="super-user-indicator-mobile"
-              className="mobile_v"
-              key="superusermobile"
-              onClick={() => {
-                  this.setState((prevState: TopNavState) => { return { menuOpened: !prevState.menuOpened } });
-              }}>
-                <SuperuserIndicator proxy={this.superuser} host={current_machine.connection_string} />
-            </div>,
+            <li // eslint-disable-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
+                id="super-user-indicator-mobile"
+                className="pf-v6-c-menu__list-item pf-v6-c-menu__item mobile_v"
+                key="superusermobile"
+                onClick={() => {
+                    this.setState((prevState: TopNavState) => { return { menuOpened: !prevState.menuOpened } });
+                }}>
+                    <SuperuserIndicator proxy={this.superuser} host={current_machine.connection_string} />
+            </li>,
             <Divider key="separator2" className="mobile_v" />,
             <DropdownGroup label={_("Style")} key="dark-switcher">
                 <DropdownList>
@@ -264,8 +265,9 @@ export class TopNav extends React.Component {
                                         <MenuToggle
                                           ref={toggleRef}
                                           id="toggle-docs"
+                                          variant="plain"
                                           className="ct-nav-toggle"
-                                          icon={<HelpIcon className="toggle-docs-icon pf-v6-c-icon pf-m-lg" />}
+                                          icon={<Icon size="lg"><HelpIcon className="toggle-docs-icon" /></Icon>}
                                           isExpanded={this.state.docsOpened}
                                           isFullHeight
                                           onClick={() => {
@@ -298,8 +300,9 @@ export class TopNav extends React.Component {
                                         <MenuToggle
                                           ref={toggleRef}
                                           id="toggle-menu"
+                                          variant="plain"
                                           className="ct-nav-toggle"
-                                          icon={<CogIcon className="pf-v6-c-icon pf-m-lg" />}
+                                          icon={<Icon size="lg"><CogIcon /></Icon>}
                                           isExpanded={this.state.menuOpened}
                                           isFullHeight
                                           onClick={(event) => {

pkg/systemd/overview.scss

@@ -20,23 +20,15 @@
   //
   // When we have the upcoming version of PF4 in Cockpit, we should drop this code
   // (and adjust things for the button to show up on the side of desktop mode instead)
-  @media (max-width: $pf-v6-global--breakpoint--lg) {
-    grid-template-areas: "icon title" ". content" ". action";
-    grid-gap: var(--pf-v5-global--spacer--sm) 0;
+  @media (max-width: $pf-v6-global--breakpoint--md) {
+    --pf-v6-c-alert--GridTemplateAreas: "icon title" ". description" ". action";
+    --pf-v6-c-alert__action--MarginBlockStart: 0;
   }
 
   @media (max-width: 320px) {
     // Allow the action button to have a bit more space on iPhone SE sized phones
-    grid-template-areas: "icon title" ". content" "action action";
-  }
-
-  > .pf-v6-c-alert__action {
-    margin-inline: var(--pf-v5-global--spacer--md) 0;
-  }
-
-  // Align left content with the rest of the page
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    padding-inline-start: var(--pf-v5-global--spacer--lg);
+    --pf-v6-c-alert--GridTemplateAreas: "icon title" "description description" "action action";
+    --pf-v6-c-alert__action--MarginBlockStart: 0;
   }
 }
 
@@ -83,16 +75,16 @@
 
 .pf-v6-l-gallery.ct-system-overview {
   --cards: 2;
-  --pf-v5-l-gallery--GridTemplateColumns: repeat(var(--cards), 1fr);
+  --pf-v6-l-gallery--GridTemplateColumns: repeat(var(--cards), 1fr);
 
   // Small mobile: Reduce spacing
   @media (max-width: 320px) {
-    // --pf-v5-l-gallery--m-gutter--GridGap: 0.25rem;
+    --pf-v6-l-gallery--m-gutter--GridGap: 0.25rem;
   }
 
   // Mobile: reduce to 1 card wide and minimize spacing
   @media (max-width: 680px) {
-    --pf-v5-l-gallery--m-gutter--GridGap: var(--pf-v5-global--spacer--sm);
+    --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--sm);
     --cards: 1;
   }
 
@@ -102,18 +94,18 @@
   }
 
   // Extra large desktop: Let cards align to the left at an optimal size
-  @media (min-width: 110rem) {
-    --pf-v5-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(min-content, 26rem));
+  @media (min-width: 113rem) {
+    --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(min-content, 26rem));
   }
 
   // VMs @ 1024x768; add a little leeway For titlebars, start bar, etc.
   @media (orientation: landscape) and (min-width: 684px) and (max-width: 832px) and (max-height: 703px) {
-    --pf-v5-l-gallery--m-gutter--GridGap: var(--pf-v5-global--spacer--sm);
+    --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--sm);
 
     // Also skim off some vertical space for the cards
     .pf-v6-c-card {
-      --pf-v5-c-card--first-child--PaddingTop: var(--pf-v5-global--spacer--md);
-      --pf-v5-c-card--child--PaddingRight: var(--pf-v5-global--spacer--md);
+      --pf-v6-c-card--first-child--PaddingTop: var(--pf-t--global--spacer--md);
+      --pf-v6-c-card--child--PaddingRight: var(--pf-t--global--spacer--md);
     }
   }
 
@@ -123,8 +115,8 @@
 
   .pf-v6-c-card {
     &__title-text {
-      font-size: var(--pf-v5-global--FontSize--xl);
-      font-weight: var(--pf-v5-global--FontWeight--normal);
+      font-size: var(--pf-t--global--font--size--xl);
+      font-weight: var(--pf-t--global--font--weight--body);
     }
 
     &__body {
@@ -136,7 +128,7 @@
       p {
         + p,
         + button {
-          margin-block-start: calc(var(--pf-v5-global--LineHeight--md) * 1rem);
+          margin-block-start: calc(var(--pf-t--global--font--line-height--body) * 1rem);
         }
       }
 
@@ -145,7 +137,7 @@
       }
 
       th {
-        font-size: var(--pf-v5-global--FontSize--sm);
+        font-size: var(--pf-t--global--font--size--sm);
       }
     }
   }
@@ -191,15 +183,15 @@
   /* Reduce gutter & padding on smaller widths, for desktop & mobile */
 
   .pf-v6-l-gallery.ct-system-overview {
-    --pf-v5-l-gallery--m-gutter--GridGap: calc(var(--pf-v5-global--gutter--md)/2);
+    --pf-v6-l-gallery--m-gutter--GridGap: calc(var(--pf-t--global--spacer--md)/2);
   }
 
   .pf-v6-c-card {
-    --pf-v5-c-card--first-child--PaddingTop: var(--pf-v5-global--spacer--md);
-    --pf-v5-c-card--child--PaddingRight: var(--pf-v5-global--spacer--md);
-    --pf-v5-c-card--child--PaddingBottom: var(--pf-v5-global--spacer--md);
-    --pf-v5-c-card--child--PaddingLeft: var(--pf-v5-global--spacer--md);
-    --pf-v5-c-card__title--not-last-child--PaddingBottom: var(--pf-v5-global--spacer--sm);
+    --pf-v6-c-card--first-child--PaddingTop: var(--pf-t--global--spacer--md);
+    --pf-v6-c-card--child--PaddingRight: var(--pf-t--global--spacer--md);
+    --pf-v6-c-card--child--PaddingBottom: var(--pf-t--global--spacer--md);
+    --pf-v6-c-card--child--PaddingLeft: var(--pf-t--global--spacer--md);
+    --pf-v6-c-card__title--not-last-child--PaddingBottom: var(--pf-t--global--spacer--sm);
   }
 }