Replace <fieldset> with <section> on show pages

thoughtbot · Feb 1, 2024 · 6b001a5 · 6b001a5
1 parent b589a14
commit 6b001a5
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 10 deletions.
diff --git a/app/assets/stylesheets/administrate/components/_attributes.scss b/app/assets/stylesheets/administrate/components/_attributes.scss
@@ -24,4 +24,13 @@
 .attribute--nested {
   border: $base-border;
   padding: $small-spacing;
+  display: table;
+  width: 100%;
+}
+
+.attribute--nested--legend {
+  display: inline;
+  background: #fff;
+  position: relative;
+  top: -1.5em;
 }
diff --git a/app/assets/stylesheets/administrate/components/_field-unit.scss b/app/assets/stylesheets/administrate/components/_field-unit.scss
@@ -54,3 +54,16 @@
     content: " *";
   }
 }
+
+section .field-unit--nested {
+  display: table;
+  margin-bottom: 1rem;
+  width: 90%;
+}
+
+.field-unit--legend {
+  display: inline;
+  background: #fff;
+  position: relative;
+  top: -1.5rem;
+}
diff --git a/app/views/administrate/application/show.html.erb b/app/views/administrate/application/show.html.erb
@@ -43,9 +43,13 @@ as well as a link to its edit page.
 <section class="main-content__body">
   <dl>
     <% page.attributes.each do |title, attributes| %>
-      <fieldset class="<%= "field-unit--nested" if title.present? %>">
+      <section class="<%= "field-unit--nested" if title.present? %>">
         <% if title.present? %>
-          <legend><%= t "helpers.label.#{page.resource_name}.#{title}", default: title %></legend>
+          <h1>
+            <nav class="<%= "field-unit--legend" %>">
+                <%= t "helpers.label.#{page.resource_name}.#{title}", default: title %>
+            </nav>
+          </h1>
         <% end %>
 
         <% attributes.each do |attribute| %>
@@ -59,7 +63,7 @@ as well as a link to its edit page.
           <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
               ><%= render_field attribute, page: page %></dd>
         <% end %>
-      </fieldset>
+      </section>
     <% end %>
   </dl>
 </section>
diff --git a/app/views/fields/has_one/_show.html.erb b/app/views/fields/has_one/_show.html.erb
@@ -16,18 +16,24 @@ All show page attributes of has_one relationship would be rendered
 %>
 
 <% if field.linkable? %>
-  <fieldset class="attribute--nested">
-    <legend>
+  <section class="attribute--nested">
+    <h1>
+      <nav class="attribute--nested--legend">
       <%= link_to_if(
         accessible_action?(field.data, :show),
         field.display_associated_resource,
         [namespace, field.data],
       ) %>
-    </legend>
+      </nav>
+    </h1>
     <% field.nested_show.attributes.each do |title, attributes| -%>
-      <fieldset class="<%= "field-unit--nested" if title.present? %>">
+      <section class="<%= "field-unit--nested" if title.present? %>">
         <% if title.present? %>
-          <legend><%= t "helpers.label.#{namespace}.#{title}", default: title %></legend>
+          <h1>
+             <nav class="<%= "field-unit--legend" %>">
+               <%= t "helpers.label.#{namespace}.#{title}", default: title %>
+             </nav>
+          </h1>
         <% end %>
 
         <% attributes.each do |attribute| %>
@@ -41,7 +47,7 @@ All show page attributes of has_one relationship would be rendered
             <%= render_field attribute, { page: page } %>
           </dd>
         <% end %>
-      </fieldset>
+      </section>
     <% end -%>
-  </fieldset>
+  </section>
 <% end %>