Merge pull request #408 from SkillsFundingAgency/CON-4827-filters

Con 4827 Organisation Search Results
SkillsFundingAgency · Jun 15, 2022 · 77a5deb · 77a5deb
2 parents 80a09cb + 4128aa9
commit 77a5deb
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 120 deletions.
diff --git a/src/das/sass/components/filter/_filter.scss b/src/das/sass/components/filter/_filter.scss
@@ -5,6 +5,8 @@
 .das-filter__header {
   border: 1px solid $govuk-border-colour;
   padding: 10px 20px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .das-filter__heading {

diff --git a/src/das/sass/components/pagination/_pagination.scss b/src/das/sass/components/pagination/_pagination.scss
@@ -1,9 +1,4 @@
-@mixin arrow-right($color) {
-  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" fill="' + $color + '" viewBox="0 0 25 40" xml:space="preserve"><path class="das-pagination__arrow" d="M0,4.3L16.2,20L0,35.8L4.4,40L25,20L4.5,0L0,4.3z"/></svg>');
-}
-@mixin arrow-left($color) {
-  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block; transform: scale(-1,1)"  x="0px" y="0px" fill="' + $color + '" viewBox="0 0 25 40" xml:space="preserve"><path class="das-pagination__arrow" d="M0,4.3L16.2,20L0,35.8L4.4,40L25,20L4.5,0L0,4.3z"/></svg>');
-}
+// Pagination
 
 .das-pagination {
   @include govuk-font($size: 19);
@@ -52,58 +47,40 @@
   }
 }
 
-.das-pagination-link {
-  width: 100%;
-  display: block;
-  text-align: right;
-  margin: govuk-spacing(3) 0 0 0;
-  ul {
-    padding: 0;
-    width: 100%;
-  }
-  .das-pagination-link__wrap {
-    font-size: inherit;
-    display: inline-block;
-    padding: 0 govuk-spacing(4);
-    width: auto;
-    .govuk-link {
-      text-decoration: none;
-      display: inline-block;
 
-      &:hover {
-        text-decoration: underline;
-      }
-      &:focus {/* outline only as its a btn */
-        outline: $govuk-focus-width solid $govuk-focus-colour;
-        outline-offset: 0;
-      }
+// Pagination simple - just previous and next links
 
-      span {
-        display: block;
-        @include govuk-font($size: 16);//1rem
-      }
-      span:first-child {
-        @include govuk-font($size: 19);//1rem
-      }
-    }
+.das-pagination-simple {
+  @include govuk-font($size: 19);
+  margin: 20px 0;
+}
 
-    &.das-pagination-link--next {
-      padding-right: 40px;
-      @include arrow-right(str-replace('' + $govuk-link-colour, '#', '%23'));
-      background-position: right center;
-      background-repeat: no-repeat;
-      text-align: right;
+.das-pagination-simple__list {
+  list-style: none;
+  padding: 0;
+  margin: 0 -10px;
+  @include govuk-clearfix
+}
 
-    }
-    &.das-pagination-link--prev {
-      padding-left: 40px;
-      @include arrow-left(str-replace('' + $govuk-link-colour, '#', '%23'));
-      background-position: left center;
-      background-repeat: no-repeat;
-      text-align: left;
+.das-pagination-simple__list-item {
+  float: left;
+  width: 50%;
+}
 
-      float: left;
-      margin-right: govuk-spacing(4);
-    }
-  }
-}
+.das-pagination-simple__list-item--next {
+  text-align: right;
+  float: right;
+}
+
+.das-pagination-simple__link {
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
+  display: block;
+  padding: 5px 10px;
+}
+
+.das-pagination-simple__link-text {
+  display: block;
+  font-weight: 700;
+  margin-bottom: 3px;
+}
diff --git a/src/das/sass/components/pagination/template-pagination-simple.html b/src/das/sass/components/pagination/template-pagination-simple.html
@@ -0,0 +1,18 @@
+<nav class="das-pagination-simple" role="navigation" aria-label="Pagination">
+    <ul class="das-pagination-simple__list">
+        <li class="das-pagination-simple__list-item das-pagination-simple__list-item--previous">
+            <a href="#" class="das-pagination-simple__link" rel="prev">
+                <span class="das-pagination-simple__link-text">Previous page</span>
+                <span class="das-pagination-simple__link-divider govuk-visually-hidden">:</span>
+                <span class="das-pagination-simple__link-label">1 of 1286</span>
+            </a>
+        </li>
+        <li class="das-pagination-simple__list-item das-pagination-simple__list-item--next">
+            <a href="#" class="das-pagination-simple__link" rel="next">
+                <span class="das-pagination-simple__link-text">Next page</span>
+                <span class="das-pagination-simple__link-divider govuk-visually-hidden">:</span>
+                <span class="das-pagination-simple__link-label">3 of 1286</span>
+            </a>
+        </li>
+    </ul>
+</nav>
diff --git a/src/das/sass/components/pagination/template-pagination.html b/src/das/sass/components/pagination/template-pagination.html
@@ -0,0 +1,28 @@
+<nav role="navigation" aria-label="Pagination">
+    <div class="das-pagination__summary">
+        Showing 101 - 150 of 246 results
+    </div>
+    <ul class="das-pagination">
+        <li class="das-pagination__item">
+            <a class="das-pagination__link" href="#0" aria-label="Previous page">Previous</a>
+        </li>
+        <li class="das-pagination__item">
+            <a class="das-pagination__link" href="#0" aria-label="Page 1">1</a>
+        </li>
+        <li class="das-pagination__item">
+            <a class="das-pagination__link" href="#0" aria-label="Page 2">2</a>
+        </li>
+        <li class="das-pagination__item">
+            <a class="das-pagination__link current" href="#0" aria-current="true" aria-label="Page 3, current page">3</a>
+        </li>
+        <li class="das-pagination__item">
+            <a class="das-pagination__link" href="#0" aria-label="Page 4">4</a>
+        </li>
+        <li class="das-pagination__item">
+            <a class="das-pagination__link" href="#0" aria-label="Page 5">5</a>
+        </li>
+        <li class="das-pagination__item">
+            <a class="das-pagination__link" href="#0" aria-label="Next page">Next</a>
+        </li>
+    </ul>
+</nav>
diff --git a/src/das/sass/legacy/_all.scss b/src/das/sass/legacy/_all.scss
@@ -1,3 +1 @@
-@import "form-panel";
-@import "pane";
-@import "search";
+@import "pane";
diff --git a/src/das/sass/legacy/_form-panel.scss b/src/das/sass/legacy/_form-panel.scss
diff --git a/src/das/sass/legacy/_search.scss b/src/das/sass/legacy/_search.scss
diff --git a/src/das/sass/libs/_autocomplete.scss b/src/das/sass/libs/_autocomplete.scss
@@ -113,6 +113,31 @@
   outline: none;
 }
 
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  .autocomplete__menu {
+    border-color: FieldText;
+  }
+
+  .autocomplete__option {
+    background-color: Field;
+    color: FieldText;
+  }
+
+  .autocomplete__option--focused,
+  .autocomplete__option:hover {
+    forced-color-adjust: none; /* prevent backplate from obscuring text */
+    background-color: Highlight;
+    border-color: Highlight;
+    color: HighlightText;
+
+    /* Prefer SelectedItem / SelectedItemText in browsers that support it */
+    background-color: SelectedItem;
+    border-color: SelectedItem;
+    color: SelectedItemText;
+    outline-color: SelectedItemText;
+  }
+}
+
 .autocomplete__option--no-results {
   background-color: #FAFAFA;
   color: #646b6f;