Preliminary layout

Still need the banner image and buttons

Author: RoyEJohnson

src/app/pages/partners/active-filters/active-filters.scss

@@ -5,10 +5,6 @@
 
     padding: 0;
 
-    @include wider-than($phone-max) {
-        margin-top: 4rem;
-    }
-
     > div {
         display: flex;
         flex-direction: row;

src/app/pages/partners/controls/controls.js

@@ -118,8 +118,6 @@ export default function Controls({advancedFilterOptions, typeOptions}) {
                     <OptionsList items={typeOptions} selected={types} />
                 </BaseButton>
                 <BaseButton label="Advanced Filters" {...commonButtonProps} size={advanced.size} />
-            </div>
-            <div className="other-controls">
                 <BaseButton label="Sort" {...commonButtonProps}>
                     <OptionsList items={sortOptions} selected={sort} />
                 </BaseButton>

src/app/pages/partners/controls/controls.scss

@@ -52,34 +52,27 @@ $breakpt-med: 93em * $scale-factor;
 }
 
 .partners .desktop.controls {
-    background-color: ui-color(white);
-    border-bottom: thin solid ui-color(form-border);
-    border-radius: 0.4rem;
-    display: grid;
-    grid-gap: 3rem;
-    margin-top: 3rem;
-    padding: 3rem;
+    background-color: transparent;
+    display: flex;
+    gap: 3rem;
+    justify-content: center;
     position: relative;
+    margin: 3rem auto;
     max-width: 120rem;
     width: 100%;
 
     @include width-up-to($phone-max) {
         display: none;
     }
 
-    @include wider-than($breakpt-med) {
-        grid-auto-flow: column;
-    }
-
     .filter-button,
     .button-with-dropdown {
         @include title-font(1.8rem);
 
         color: text-color(normal);
     }
 
-    .button-row,
-    .other-controls {
+    .button-row {
         display: grid;
         grid-row-gap: 1rem;
         justify-content: left;
@@ -95,11 +88,6 @@ $breakpt-med: 93em * $scale-factor;
             justify-content: right;
         }
 
-        .button-with-popover .popover {
-            border-top-left-radius: 0.3rem;
-            border-top-right-radius: 0;
-            right: 0;
-        }
     }
 
     // Breaking encapsulation slightly
@@ -143,6 +131,7 @@ $breakpt-med: 93em * $scale-factor;
     }
 
     .popover-container {
+        max-width: $text-content-max;
         position: absolute;
         top: 100%;
         width: 100%;

src/app/pages/partners/mobile-controls/mobile-controls.scss

@@ -4,12 +4,11 @@
     align-items: center;
     display: grid;
     grid-column-gap: 1rem;
-    padding: $normal-margin;
     width: 100%;
 
     @include width-up-to($phone-max) {
-        background-color: ui-color(page-bg);
         grid-template-columns: 1fr auto auto;
+        padding: $normal-margin;
         position: sticky;
         top: 5rem;
         z-index: 2;
@@ -41,6 +40,7 @@
     }
 
     .result-count {
+        @include set-font(body-large);
         margin-top: 0;
     }
 

src/app/pages/partners/partners.js

@@ -110,15 +110,24 @@ function Partners({data}) {
             {confirmation && <Confirmation />}
             <section className="banner hero">
                 <div className="boxed">
-                    <h1>{headline}</h1>
-                    <RawHTML html={description} />
+                    <div className="text-block">
+                        <h1>{headline}</h1>
+                        <RawHTML html={description} />
+                    </div>
+                </div>
+                <div
+                    className="right-bg clipped-image"
+                />
+            </section>
+            <section>
+                <div className="text-content">
+                    <h2>
+                        Search our technology partners to find the best option for your course
+                    </h2>
                     <Controls {...{advancedFilterOptions, typeOptions}} />
                 </div>
-                <img
-                    className="strips" src="/dist/images/components/strips.svg"
-                    height="10" alt="" role="presentation" />
+                <MobileControlRow {...{advancedFilterOptions, typeOptions}} />
             </section>
-            <MobileControlRow {...{advancedFilterOptions, typeOptions}} />
             <div
                 className="padding"
                 data-analytics-content-list={headline}

src/app/pages/partners/partners.scss

@@ -2,6 +2,7 @@
 @import 'mixins/placeholder-selectors';
 
 .partners.page {
+    background-color: ui-color(white);
 
     .above-the-banner {
         background-color: #d9edf7;
@@ -39,13 +40,7 @@
     }
 
     .banner {
-        @extend %light-on-dark;
-
-        background-color: os-color(deep-green);
-        background-image: url('/dist/images/partners/partner-heading-bg.webp');
-        background-position: left top;
-        background-size: cover;
-        color: text-color(white);
+        border-bottom: thin solid os-color(green);
         padding-bottom: 8rem;
         position: relative;
 
@@ -57,19 +52,34 @@
             }
         }
 
-        h1 {
-            margin-bottom: 3rem;
+        .boxed {
+            display: block;
 
-            @include width-up-to($phone-max) {
-                @include set-font(h1);
+            .text-block {
+                text-align: left;
+
+                @include wider-than($phone-max) {
+                    max-width: 57rem;
+                    width: 50%;    
+                }
             }
         }
 
-        .strips {
-            bottom: 0;
+        h1 {
+            @include set-font(h1);
+            margin-bottom: 3rem;
         }
     }
 
+    > section {
+        padding-left: $normal-margin;
+        padding-right: $normal-margin;
+    }
+
+    h2 {
+        text-align: center;
+    }
+
     @include width-up-to($phone-max) {
         .desktop {
             display: none;

src/app/pages/partners/results/results.scss

@@ -3,32 +3,72 @@
 
 .partners .results {
     padding: 2rem 0 20rem;
+    width: 100%;
+    max-width: $content-max;
+    margin: 0 auto;
 
     @include width-up-to($phone-max) {
+        grid-template-columns: 100%;
         padding: 0 $normal-margin 6rem;
     }
 
     @include wider-than($phone-max) {
         min-height: 60rem;
     }
 
-    >:first-child {
-        @include width-up-to($phone-max) {
-            margin-bottom: $normal-margin;
+    .result-columns {
+        align-items: start;
+        display: grid;
+        gap: 4rem;
+        grid-template-columns: calc(100% - 38rem) 34rem;
+        max-width: 100%;
+
+        @include width-up-to($tablet-max) {
+            grid-template-columns: 100%;
+            gap: 5rem;
         }
 
-        @include wider-than($phone-max) {
-            margin-bottom: 3rem;
+        .result-column {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: 5rem;
+        }    
+    }
+
+    .heading-and-result-grid {
+        border: thin solid os-color(light-blue);
+        border-top-width: 1.1rem;
+        margin: 0 auto;
+        max-width: 100%;
+        padding: 4rem;
+
+        &.results-10 {
+            border-color: os-color(gold);
+        }
+
+        &.results-7 {
+            border-color: os-color(deep-green);
+        }
+
+        &.results-4 {
+            border-color: os-color(orange);
+        }
+
+        &.results-1 {
+            border-color: os-color(yellow);
+        }
+
+        &.results-new {
+            border-color: os-color(blue);
         }
     }
 
-    h2 {
-        margin: 0;
+    h3 {
+        @include title-font(2.6rem);
+        margin-bottom: 2rem;
         width: 100%;
         text-align: center;
-        background-color: ui-color(form-border);
-        padding: $normal-margin 0;
-        border: thin solid ui-color(black);
     }
 
     /*
@@ -49,30 +89,16 @@
 
     @mixin partner-grid {
         display: grid;
-        grid-auto-rows: minmax(min-content, 100%);
-        padding: 0;
-
-        @include width-between($phone-max, $first-break) {
-            grid-template-columns: repeat(2, 1fr);
-        }
-        @include width-between($first-break, $second-break) {
-            grid-template-columns: repeat(3, 1fr);
-        }
-        @include width-between($second-break, $third-break) {
-            grid-template-columns: repeat(4, 1fr);
-        }
-        @include wider-than($third-break) {
-            grid-template-columns: repeat(5, 1fr);
-        }
+        grid-template-columns: repeat(auto-fill, 21rem);
+        justify-content: center;
 
         @include width-up-to($phone-max) {
             grid-gap: 1.5rem;
-            justify-content: center;
+            grid-template-columns: auto;
         }
 
         @include wider-than($phone-max) {
             grid-gap: 3rem;
-            justify-content: left;
         }
 
         .partner-card {
@@ -82,8 +108,7 @@
 
     @mixin partner-card {
         background-color: ui-color(white);
-        border-radius: 0.3rem;
-        box-shadow: $card-shadow;
+        border: thin solid os-color(light-gray);
         color: inherit;
         display: grid;
         grid-row-gap: 1rem;
@@ -156,7 +181,6 @@
 
     .boxed {
         gap: 3rem;
-        padding: 0;
 
         @include width-up-to($phone-max) {
             gap: $normal-margin;