Improved layout for no results, one result, no properties, max height…

… of pagination buttons, and topbar formatting.
CenterForOpenScience · Aug 21, 2023 · 5f3896c · 5f3896c
1 parent 502e943
commit 5f3896c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/lib/osf-components/addon/components/search-page/styles.scss b/lib/osf-components/addon/components/search-page/styles.scss
@@ -71,7 +71,7 @@ body {
 }
 
 .search-page > div:first-of-type {
-    max-width: 90vw;
+    max-width: 95vw;
     margin-left: 5rem;
 }
 
@@ -157,7 +157,9 @@ body {
     border-bottom: 1px solid $color-text-black;
     display: flex;
     margin: 0 auto;
-    width: 80%;
+    max-height: 55px;
+    margin-top: 1rem;
+    width: 60vw;
 
     .object-type-nav {
         display: flex;
@@ -285,10 +287,16 @@ body {
 }
 
 .no-results {
-    font-size: 1.2em;
-    margin: 10px 20px;
-}
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
+    p {
+        font-size: 1.2em;
+        margin: 10px 20px;
+        text-align: center;
+    }
+}
 
 .ember-power-select-options {
     max-height: 20em;
@@ -332,10 +340,17 @@ body {
     }
 }
 
+.no-properties {
+    padding: 1rem 0;
+}
+
 .pagination-buttons {
     display: flex;
     padding: 2rem;
     justify-content: flex-end;
+
+
+    height: fit-content;
 }
 
 @media (min-wdith: 650px) {

diff --git a/lib/osf-components/addon/components/search-page/template.hbs b/lib/osf-components/addon/components/search-page/template.hbs
@@ -174,7 +174,9 @@ as |layout|>
                     @toggleFilter={{this.toggleFilter}}
                 />
             {{else}}
-                {{t 'search.left-panel.no-filterable-properties'}}
+                <p local-class='no-properties'>
+                    {{t 'search.left-panel.no-filterable-properties'}}
+                </p>
             {{/each}}
         {{/if}}
     </layout.left>
@@ -233,7 +235,9 @@ as |layout|>
             {{#each this.searchResults as |item|}}
                 <SearchResultCard @result={{item}} />
             {{else}}
-                <p local-class='no-results'>{{t 'search.no-results'}}</p>
+                <div local-class='no-results'>
+                    <p>{{t 'search.no-results'}}</p>
+                </div>
             {{/each}}
         {{/if}}
         <div local-class='pagination-buttons'>