Update the teacher show page CSS

There's some variations in how the prototype displays the restrictions placed on a teacher.
DFE-Digital · Oct 5, 2023 · d58db63 · d58db63
1 parent 7d3b100
commit d58db63
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 36 deletions.
diff --git a/app/assets/stylesheets/check_records.scss b/app/assets/stylesheets/check_records.scss
@@ -96,26 +96,11 @@ $govuk-assets-path: "/";
   padding-right: 0;
 }
 
-.app__search-detail-heading {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 20px;
-
-  .govuk-heading-l {
-    margin-bottom: 0;
-  }
-
-  .govuk-tag {
-    margin-left: 10px;
-  }
+h1 .govuk-tag {
+  position: relative;
+  top: -5px;
 }
 
-.app__restrictions {
-  margin-bottom: govuk-spacing(9);
-  margin-top: govuk-spacing(9);
-
-  .govuk-inset-text {
-    border-left-color: red;
-  }
-}
+.app-inset-text--red {
+  border-color:govuk-colour('red');
+}
diff --git a/app/views/check_records/teachers/show.html.erb b/app/views/check_records/teachers/show.html.erb
@@ -3,27 +3,25 @@
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <div class="app__search-detail-heading">
-      <h1 class="govuk-heading-l"><%= @teacher.name %></h1>
+    <h1 class="govuk-heading-l govuk-!-margin-bottom-7">
+      <%= @teacher.name %>
       <strong class="govuk-tag govuk-tag--<%= @teacher.sanctions.any? ? "red" : "green" %>"%>
         <%= @teacher.sanctions.any? ? "Restrictions" : "No restrictions" %>
       </strong>
-    </div>
+    </h1>
 
     <% if @teacher.sanctions.any? %>
-      <div class="app__restrictions">
-        <h2 class="govuk-heading-m">Restrictions</h2>
-        <%= govuk_inset_text classes: "govuk-!-padding-bottom-2 govuk-!-padding-top-3 govuk-!-margin-bottom- govuk-!-margin-top-0" do %>
-          <% @teacher.sanctions.each do |sanction| %>
-            <h3 class="govuk-heading-s govuk-!-margin-bottom-1 govuk-!-margin-top-0">
-              <%= sanction.title %>
-            </h3>
-            <p class="govuk-!-margin-bottom-l">
-              <%= sanction.start_date.to_fs(:long_uk) if sanction.start_date %>
-            </p>
-          <% end %>
+      <h2 class="govuk-heading-m">Restrictions</h2>
+      <%= govuk_inset_text classes: "app-inset-text--red govuk-!-padding-bottom-2 govuk-!-padding-top-3 govuk-!-margin-bottom- govuk-!-margin-top-0" do %>
+        <% @teacher.sanctions.each do |sanction| %>
+          <h3 class="govuk-heading-s govuk-!-margin-bottom-1 govuk-!-margin-top-0">
+            <%= sanction.title %>
+          </h3>
+          <p class="govuk-!-margin-bottom-1">
+            <%= sanction.start_date.to_fs(:long_uk) if sanction.start_date %>
+          </p>
         <% end %>
-      </div>
+      <% end %>
     <% end %>
 
     <div class="govuk-!-margin-bottom-9">