Adds helpers CSS, inlines sorting select

uktrade · Oct 8, 2024 · e03afa0 · e03afa0
1 parent a5c7a1c
commit e03afa0
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 18 deletions.
diff --git a/front_end/stylesheets/application.scss b/front_end/stylesheets/application.scss
@@ -15,3 +15,4 @@ $govuk-image-url-function: frontend-image-url;
 @import "./search.scss";
 @import "./inset_text.scss";
 @import "./filters.scss";
+@import "./helpers.scss";
diff --git a/front_end/stylesheets/filters.scss b/front_end/stylesheets/filters.scss
@@ -1,13 +1,3 @@
-.orp-max-height-250 {
-  max-height: 250px;
-  overflow: scroll;
-}
-
-.orp-space-between {
-  display: flex;
-  justify-content: space-between;
-}
-
 .orp-applied-filters-container {
   background-color: govuk-colour("light-grey");
   @include govuk-responsive-padding(2);

diff --git a/front_end/stylesheets/helpers.scss b/front_end/stylesheets/helpers.scss
@@ -0,0 +1,17 @@
+.orp-\!-no-text-wrap {
+  white-space: nowrap;
+}
+
+.orp-max-height-250 {
+  max-height: 250px;
+  overflow: scroll;
+}
+
+.orp-flex {
+  display: flex;
+  align-items: center;
+}
+
+.orp-flex--space-between {
+  justify-content: space-between;
+}
diff --git a/orp/orp_search/templates/orp.html b/orp/orp_search/templates/orp.html
@@ -188,7 +188,7 @@ <h2 class="govuk-fieldset__heading">
     </div>
 
     <div class="govuk-grid-column-two-thirds">
-      <div class="orp-space-between">
+      <div class="orp-flex orp-flex--space-between">
         <p class="govuk-body govuk-!-font-weight-bold">4,123 documents</p>
         <p class="govuk-body">
           <a href="#" class="govuk-link govuk-link--no-visited-state
@@ -213,13 +213,15 @@ <h2 class="govuk-fieldset__heading">
       <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
       <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
-          <label class="govuk-label" for="sort">
-            Sort by
-          </label>
-          <select class="govuk-select" id="sort" name="sort">
-            <option value="date">Recently updated</option>
-            <option value="sort">???</option>
-          </select>
+          <div class="orp-flex">
+            <label class="govuk-label govuk-!-margin-right-3 orp-!-no-text-wrap" for="sort">
+              Sort by
+            </label>
+            <select class="govuk-select" id="sort" name="sort">
+              <option value="date">Recently updated</option>
+              <option value="sort">???</option>
+            </select>
+          </div>
         </div>
       </div>
       <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">