Clean up the CSS files pertaining to the Add Documents and Reorder do…

…cuments within Document Collections In this commit we changed the way that the css class responsible for the heading links were designed, making them more generic and therefore easier to reuse for future developments.
alphagov · Oct 13, 2023 · da31330 · da31330
1 parent f3c7f87
commit da31330
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 24 deletions.
diff --git a/.gitignore b/.gitignore
@@ -29,3 +29,4 @@
 /node_modules
 /yarn-error.log
 .cache/
+.DS_Store
diff --git a/app/assets/stylesheets/admin/views/_document-collection-group-memberships-index.scss b/app/assets/stylesheets/admin/views/_document-collection-group-memberships-index.scss
@@ -1,6 +1,25 @@
 .app-view-document-collection-group-memberships-index__heading {
-  display: flex;
-  justify-content: space-between;
+  .gem-c-heading {
+    display: inline-block;
+    @include govuk-responsive-margin(2, "right");
+  }
+
+  .govuk-list {
+    float: right;
+
+    li {
+      display: inline-block;
+      @include govuk-responsive-padding(2, "left");
+      @include govuk-responsive-margin(2, "left");
+      border-left: 1px solid $govuk-border-colour;
+
+      &:first-child {
+        margin-left: 0;
+        padding-left: 0;
+        border-left: none;
+      }
+    }
+  }
 }
 
 .app-view-document-collection-group-memberships-index__table .govuk-table__cell {
@@ -10,14 +29,3 @@
     white-space: nowrap;
   }
 }
-
-.app-view-document-collection-group-memberships-index__heading-links {
-  display: flex;
-  align-items: center;
-
-  & > p:first-child {
-    @include govuk-responsive-padding(2, "right");
-    @include govuk-responsive-margin(2, "right");
-    border-right: 1px solid $govuk-border-colour;
-  }
-}
diff --git a/app/views/admin/document_collection_group_memberships/index.html.erb b/app/views/admin/document_collection_group_memberships/index.html.erb
@@ -26,17 +26,15 @@
             text: "Documents",
             margin_bottom: 6,
           } %>
-
-          <div class="app-view-document-collection-group-memberships-index__heading-links">
-            <p class="govuk-body govuk-!-text-align-right">
+          <ul class="govuk-list">
+            <li>
               <%= link_to "Add document", admin_document_collection_group_search_options_path(@collection, @group), class: "govuk-link" %>
-            </p>
+            </li>
 
-            <p class="govuk-body govuk-!-text-align-right">
+            <li>
               <%= link_to "Reorder document", reorder_admin_document_collection_group_document_collection_group_memberships_path(@collection, @group), class: "govuk-link" %>
-            </p>
-          </div>
-
+            </li>
+          </ul>
         </div>
       </div>
     <% else %>
@@ -47,9 +45,11 @@
             margin_bottom: 6,
           } %>
 
-          <p class="govuk-body govuk-!-text-align-right">
-            <%= link_to "Add document", admin_document_collection_group_search_options_path(@collection, @group), class: "govuk-link" %>
-          </p>
+          <ul class="govuk-list">
+            <li>
+              <%= link_to "Add document", admin_document_collection_group_search_options_path(@collection, @group), class: "govuk-link" %>
+            </li>
+          </ul>
         </div>
       </div>
     <% end %>