Lay out content header using CSS grid

TrestleAdmin · Jul 22, 2024 · 58b4e7f · 58b4e7f
1 parent 46a0bd0
commit 58b4e7f
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 69 deletions.
diff --git a/app/assets/bundle/trestle/admin.css b/app/assets/bundle/trestle/admin.css
diff --git a/app/views/trestle/application/_header.html.erb b/app/views/trestle/application/_header.html.erb
@@ -1,16 +1,6 @@
 <header class="content-header">
   <div class="content-header-title">
     <h1><%= title %></h1>
-
-    <% unless local_assigns.fetch(:hide_breadcrumbs, false) %>
-    <ol class="breadcrumb">
-      <% breadcrumbs.each do |breadcrumb| %>
-        <li class="breadcrumb-item<% if breadcrumb == breadcrumbs.last %> active<% end %>">
-          <%= link_to breadcrumb.label, breadcrumb.path, data: { turbo_frame: "_top" } %>
-        </li>
-      <% end %>
-    </ol>
-    <% end %>
   </div>
 
   <div class="content-header-toolbars">
@@ -24,4 +14,16 @@
       <%= deprecated_toolbar(:secondary) %>
     </div>
   </div>
+
+  <% unless local_assigns.fetch(:hide_breadcrumbs, false) %>
+    <div class="content-header-breadcrumbs">
+      <ol class="breadcrumb">
+        <% breadcrumbs.each do |breadcrumb| %>
+          <li class="breadcrumb-item<% if breadcrumb == breadcrumbs.last %> active<% end %>">
+            <%= link_to breadcrumb.label, breadcrumb.path, data: { turbo_frame: "_top" } %>
+          </li>
+        <% end %>
+      </ol>
+    </div>
+  <% end %>
 </header>
diff --git a/frontend/css/core/_typography.scss b/frontend/css/core/_typography.scss
@@ -14,6 +14,15 @@ img {
   max-width: 100%;
 }
 
+.error-iframe {
+  display: block;
+  width: 100%;
+  border: 0;
+  flex: 1;
+  min-height: 60vh;
+  max-height: 75vh;
+}
+
 .empty, .blank {
   font-style: italic;
   opacity: 0.5;

diff --git a/frontend/css/index.scss b/frontend/css/index.scss
@@ -26,7 +26,8 @@
 @import "layout/footer";
 @import "layout/sidebar";
 @import "layout/navigation";
-@import "layout/content";
+@import "layout/content-header";
+@import "layout/main-content";
 
 // Components
 @import "components/alerts";

diff --git a/frontend/css/layout/_content-header.scss b/frontend/css/layout/_content-header.scss
@@ -0,0 +1,62 @@
+.content-header {
+  display: grid;
+  grid-template-columns: max-content auto;
+  grid-template-areas: "title toolbars"
+                       "breadcrumbs toolbars";
+
+  background: $content-header-bg;
+  padding: 20px;
+
+  @include media-breakpoint-down(md) {
+    padding: 10px;
+  }
+
+  @include media-breakpoint-down(sm) {
+    grid-template-areas: "title toolbars"
+                         "breadcrumbs breadcrumbs";
+  }
+}
+
+.content-header-title {
+  grid-area: title;
+  margin: 5px 0;
+
+  @include media-breakpoint-down(md) {
+    margin: 2px 0;
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    font-weight: 200;
+
+    margin: 0;
+
+    @include media-breakpoint-down(md) {
+      font-size: 2.25rem;
+    }
+  }
+}
+
+.content-header-toolbars {
+  grid-area: toolbars;
+
+  .btn {
+    white-space: nowrap;
+  }
+
+  .btn-toolbar {
+    flex-direction: row-reverse;
+  }
+
+  .secondary-toolbar {
+    margin-top: 8px;
+  }
+}
+
+.content-header-breadcrumbs {
+  grid-area: breadcrumbs;
+
+  .breadcrumb {
+    margin: 0;
+  }
+}
diff --git a/frontend/css/layout/_content.scss → frontend/css/layout/_main-content.scss b/frontend/css/layout/_content.scss → frontend/css/layout/_main-content.scss
@@ -1,47 +1,3 @@
-.content-header {
-  display: flex;
-  justify-content: space-between;
-
-  background: $content-header-bg;
-  padding: 20px;
-
-  h1 {
-    font-size: 2.5rem;
-    font-weight: 200;
-
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-
-    @include media-breakpoint-down(md) {
-      font-size: 2.25rem;
-    }
-  }
-
-  .breadcrumb {
-    margin-bottom: 0;
-  }
-
-  .content-header-title {
-    margin: 5px 0;
-
-    @include media-breakpoint-down(md) {
-      margin: 2px 0;
-    }
-  }
-
-  .btn {
-    white-space: nowrap;
-  }
-
-  .btn-toolbar {
-    flex-direction: row-reverse;
-  }
-
-  .secondary-toolbar {
-    margin-top: 8px;
-  }
-}
-
 .main-content-area {
   margin: 20px;
   scroll-margin: 20px;
@@ -110,15 +66,6 @@
   margin-bottom: 10px;
 }
 
-.error-iframe {
-  display: block;
-  width: 100%;
-  border: 0;
-  flex: 1;
-  min-height: 60vh;
-  max-height: 75vh;
-}
-
 @include media-breakpoint-down(lg) {
   .main-content-container {
     flex-direction: column;
@@ -131,10 +78,6 @@
 }
 
 @include media-breakpoint-down(md) {
-  .content-header {
-    padding: 10px;
-  }
-
   .main-content-area {
     margin: 10px;
     scroll-margin: 10px;