Update institution page header

CenterForOpenScience · Sep 26, 2023 · c4c08f7 · c4c08f7
1 parent 7cffaf3
commit c4c08f7
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 22 deletions.
diff --git a/lib/osf-components/addon/components/search-page/styles.scss b/lib/osf-components/addon/components/search-page/styles.scss
@@ -27,6 +27,10 @@
         white-space: nowrap;
     }
 
+    .provider-description {
+        width: 100%;
+    }
+
     .search-input-wrapper {
         display: flex;
         flex-direction: row;
@@ -96,6 +100,10 @@
         margin: 0 3rem 0 2rem;
     }
 
+    .provider-description {
+        width: 70vw;
+    }
+
     .heading-label > h1 {
         margin: 0;
         white-space: nowrap;
@@ -138,6 +146,26 @@
     }
 }
 
+.institutions-overlay {
+    background-color: $color-bg-gray-blue-light;
+    background-image: none;
+    border-bottom: solid 1px $alto;
+    color: $color-text-black;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    min-height: 100%;
+    min-width: 100%;
+    position: relative;
+    z-index: 1;
+
+    img {
+        height: 70px;
+        margin: 0 auto;
+    }
+}
+
 .search-input-wrapper {
     display: flex;
     white-space: nowrap;

diff --git a/lib/osf-components/addon/components/search-page/template.hbs b/lib/osf-components/addon/components/search-page/template.hbs
@@ -6,39 +6,32 @@ as |layout|>
         data-test-heading-wrapper
         data-analytics-scope='Search page heading'
         {{with-branding (get-model @provider.brand)}}
-        local-class='{{if this.showSidePanelToggle 'heading-wrapper-mobile' 'heading-wrapper'}} {{if @provider 'hero-overlay'}} {{if @institution 'heading-wrapper-institutions'}} {{if (and this.showSidePanelToggle @institution) 'heading-wrapper-institutions-mobile'}}'
+        local-class='{{if this.showSidePanelToggle 'heading-wrapper-mobile' 'heading-wrapper'}} {{if @provider 'hero-overlay'}} {{if @institution 'institutions-overlay'}}'
     >
         {{#if @provider}}
             <div
                 data-test-search-provider-logo
                 local-class='provider-logo'
             >
             </div>
-            <p data-test-search-provider-description>
+            <p local-class='provider-description' data-test-search-provider-description>
                 {{html-safe @provider.description}}
             </p>
         {{else if @institution}}
-            <div local-class='heading-wrapper-institutions'>
-                <label
-                    for='search-input'
-                    local-class='heading-label-institution'
+            {{#if this.showSidePanelToggle}}
+                <img
+                    data-test-institution-logo
+                    src={{@institution.logoRoundedUrl}}
+                    alt={{concat (t 'search.institutions.institution-logo') @institution.name}}
                 >
-                    {{#if this.showSidePanelToggle}}
-                        <img
-                            data-test-institution-logo
-                            src={{@institution.assets.logo}}
-                            alt={{concat (t 'search.institutions.institution-logo') @institution.name}}
-                        >
-                    {{else}}
-                        <img
-                            data-test-institution-banner
-                            src={{@institution.assets.banner}}
-                            alt={{concat (t 'search.institutions.institution-logo') @institution.name}}
-                        >
-                    {{/if}}
-                    <p data-test-institution-description>{{html-safe @institution.description}}</p>
-                </label>
-            </div>
+            {{else}}
+                <img
+                    data-test-institution-banner
+                    src={{@institution.bannerUrl}}
+                    alt={{concat (t 'search.institutions.institution-logo') @institution.name}}
+                >
+            {{/if}}
+            <p local-class='provider-description' data-test-institution-description>{{html-safe @institution.description}}</p>
         {{else}}
             <label
                 data-test-search-header