Move sort button location on Hub main page

Brandon Green · Pat Mellon · commit eb45ccadb78c · 2020-07-16T15:41:22.000-04:00
diff --git a/_sass/hub.scss b/_sass/hub.scss
@@ -312,19 +312,64 @@
   cursor: pointer;
 }
 
+.hub-index {
+  #dropdownSortLeft {
+    color: $mid_gray;
+    cursor: pointer;
+    z-index: 1;
+    position: absolute;
+    top: inherit;
+    left: 23%;
+    max-width: 4rem;
+    @media(min-width: 480px) and (max-width: 590px) {
+      left: 40%;
+    }
+  }
+}
+
 .hub #dropdownFilter, #dropdownSort, #dropdownSortLeft {
   color: $mid_gray;
   cursor: pointer;
   z-index: 1;
   position: absolute;
+  top: 11rem;
+  right: 1rem;
+  left: inherit;
+  @media(min-width: 480px) and (max-width: 590px) {
+    top: 7rem;
+  }
+  @media(min-width: 590px) {
+    top: 5rem;
+  }
+  @include desktop {
+    top: 5rem;
+  }
 }
 
 .hub .sort-menu {
-  left: 0;
+  left: inherit;
+  right: 1rem;
+  top: 12.5rem;
+  max-width: 12rem;
+  @media(min-width: 480px) and (max-width: 590px) {
+    top: 8.5rem;
+  }
+  @media(min-width: 590px) and (max-width: 900px) {
+    top: 6.5rem;
+  }
+  @media(min-width: 900px) and (max-width: 1239px) {
+    top: 6.5rem;
+  }
+  @include max-width-desktop {
+    right: 0;
+    top: 6.5rem;
+  }
 }
 
 .hub-index .sort-menu {
   left: 23%;
+  top: inherit;
+  max-width: 12rem;
 }
 
 .hub .research-hub-title,
diff --git a/hub/hub.html b/hub/hub.html
@@ -32,7 +32,7 @@ <h3 class="research-hub-sub-title">Explore and extend models<br> from the latest
 
           <nav class="navbar navbar-expand-lg navbar-light research-menu col-12">
             {% include hub_model_tags.html category="researchers" %}
-            <div id="hub-icons" class="hub-select-container col-5">
+            <div id="hub-icons" class="hub-select-container hub-sort-main col-5">
               {% include hub_sort.html %}
             </div>
             {% include hub_search.html %}
