Return sort dropdown for registries and preprints discover (#2000)

* Return sort dropdown for registries and preprints discover * Address styling issue for tablet
CenterForOpenScience · Sep 18, 2023 · 2fcb730 · 2fcb730
1 parent 19494c9
commit 2fcb730
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/lib/osf-components/addon/components/search-page/styles.scss b/lib/osf-components/addon/components/search-page/styles.scss
@@ -164,6 +164,8 @@
 .topbar {
     border-bottom: 1px solid $color-text-black;
     display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
     margin: 0 auto;
     max-height: 55px;
     margin-top: 1rem;
@@ -200,6 +202,11 @@
         }
     }
 
+    .search-count {
+        // override RegistriesStyle
+        font-size: 1.5em;
+    }
+
     .help-button {
         margin-left: 1.2rem;
     }
@@ -401,7 +408,7 @@
         gap: 1rem;
     }
 
-    .topbar {
+    .flex-column-tablet {
         display: flex;
         flex-direction: column;
     }

diff --git a/lib/osf-components/addon/components/search-page/template.hbs b/lib/osf-components/addon/components/search-page/template.hbs
@@ -192,7 +192,7 @@ as |layout|>
     </layout.left>
     <layout.main local-class={{if this.showSidePanelToggle 'search-main-mobile' 'search-main'}} data-analytics-scope='Search page main'>
         {{#unless this.showSidePanelToggle}}
-            <div data-test-topbar-wrapper local-class='topbar'>
+            <div data-test-topbar-wrapper local-class='topbar {{if @showResourceTypeFilter 'flex-column-tablet'}}'>
                 {{#if @showResourceTypeFilter}}
                     <nav
                         data-test-topbar-object-type-nav
@@ -215,19 +215,6 @@ as |layout|>
                             {{/each}}
                         </ul>
                     </nav>
-                    <div
-                        data-test-topbar-sort-dropdown
-                        local-class='sort-dropdown'
-                    >
-                        <PowerSelect
-                            @options={{this.sortOptions}}
-                            @selected={{this.selectedSortOption}}
-                            @onChange={{action this.updateSort}}
-                            as |sortOption|
-                        >
-                            <p>{{sortOption.display}}</p>
-                        </PowerSelect>
-                    </div>
                 {{else if this.showResultCountMiddle}}
                     <p
                         data-test-middle-search-count
@@ -236,6 +223,19 @@ as |layout|>
                         {{t 'search.total-results' count=this.totalResultCount}}
                     </p>
                 {{/if}}
+                <div
+                    data-test-topbar-sort-dropdown
+                    local-class='sort-dropdown'
+                >
+                    <PowerSelect
+                        @options={{this.sortOptions}}
+                        @selected={{this.selectedSortOption}}
+                        @onChange={{action this.updateSort}}
+                        as |sortOption|
+                    >
+                        <p>{{sortOption.display}}</p>
+                    </PowerSelect>
+                </div>
             </div>
         {{/unless}}
         {{#if this.search.isRunning}}