Use grid for layout, fixing scroll and resize on select

This also paves the path for better mobile support too.
cockpit-project · Jun 5, 2024 · bc6a252 · bc6a252
1 parent 3a2cdf8
commit bc6a252
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 13 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -4,6 +4,64 @@
 
 @import "@patternfly/patternfly/components/Button/button.css";
 
+.pf-v5-c-page {
+    container-type: size;
+}
+
+// Passthrough for layout and styling purposes, to enable main page parts to participate in the grid
+.pf-v5-c-page__main-section,
+.pf-v5-c-sidebar,
+.pf-v5-c-sidebar__main,
+.pf-v5-c-sidebar__content {
+    display: contents;
+}
+
+.pf-v5-c-page__main-breadcrumb {
+    grid-area: topbar;
+    margin-block-end: 1rem;
+}
+
+.pf-v5-c-sidebar__content > .pf-v5-c-card {
+    grid-area: content;
+}
+
+.pf-v5-c-sidebar__content > .pf-v5-c-card,
+#files-card-parent,
+.sidebar-panel {
+    overflow: auto;
+}
+
+.sidebar-panel {
+    grid-area: sidebar;
+}
+
+.pf-v5-c-page__main {
+    display: grid;
+    // grid-template: auto 1fr 1fr / 1fr 1fr auto;
+    grid-template:
+        "topbar topbar" auto
+        "content sidebar" 1fr
+        / 1fr 18rem;
+    gap: 0 1rem;
+    inline-size: 100vw;
+    block-size: 100vh;
+}
+
+@container (width < 768px) {
+    .pf-v5-c-page__main {
+        grid-template:
+            "topbar" auto
+            "content" 1fr
+            "sidebar" 8rem
+            / 1fr;
+    }
+}
+
+#description-list-sidebar {
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+}
+
+
 /* Style the list cards as ct-cards */
 .pf-c-page__main-section > .pf-c-card {
     @extend .ct-card;
@@ -42,7 +100,7 @@ button.breadcrumb-edit-cancel-button {
 
 // Make the card heading sticky
 .card-actionbar {
-    position: sticky;
+    // position: sticky;
     // Background bleeds through, so we need we need to add a local background
     background: var(--pf-v5-global--BackgroundColor--100);
     // Breadcrumb header size + padding?
@@ -53,7 +111,7 @@ button.breadcrumb-edit-cancel-button {
 
 // Make the sidebar sticky
 .pf-v5-c-sidebar__panel {
-    --pf-v5-c-sidebar__panel--Position: sticky;
+    // --pf-v5-c-sidebar__panel--Position: sticky;
 }
 
 .pf-v5-l-gallery {
@@ -70,7 +128,7 @@ button.breadcrumb-edit-cancel-button {
 
 .sidebar-panel {
     background-color: var(--pf-c-page__main-section--BackgroundColor);
-    inset-block-start: 3rem;
+    // inset-block-start: 3rem;
 }
 
 #description-list-sidebar {

diff --git a/src/files-card-body.scss b/src/files-card-body.scss
@@ -1,10 +1,3 @@
-/* Stretch the view to fill the page */
-.pf-v5-c-sidebar__main,
-.pf-v5-c-sidebar__content,
-.pf-v5-c-sidebar__content > .pf-v5-c-card {
-    block-size: 100%;
-}
-
 .fileview {
     .row-selected {
       background-color: var(--pf-v5-c-card--m-selectable--m-selected--BackgroundColor);
@@ -136,9 +129,9 @@
 
     &.view-details {
         --icon-size: 16px;
-        inline-size: calc(100% - var(--pf-v5-global--spacer--md));
-        margin-block: var(--pf-v5-global--spacer--sm);
-        margin-inline: auto;
+        inline-size: 100%;
+        margin: 0;
+
 
         tbody tr {
             border-block: 1px solid var(--pf-v5-global--BorderColor--100);
@@ -170,6 +163,14 @@
                 justify-content: end;
             }
         }
+
+        :first-child:is(td, th) {
+            padding-inline-start: var(--pf-v5-global--spacer--md);
+        }
+
+        :last-child:is(td, th) {
+            padding-inline-end: var(--pf-v5-global--spacer--md);
+        }
     }
 
     &.view-grid {