GitHub Stars Sort Button

Bgreen23 · Pat Mellon · commit 5d8875646894 · 2020-07-16T15:37:29.000-04:00
Add sort button to hub

This commit adds sort to hub, hub researcher, and hub developer model pages
diff --git a/_includes/hub_developer_tags_and_cards.html b/_includes/hub_developer_tags_and_cards.html
@@ -11,6 +11,9 @@
       {% include hub_icons.html left-icon="full-hub-icon-selected.svg" right-icon="compact-hub-icon.svg" index-url="developer-models" compact-url="developer-models/compact" %}
 
     {% endif %}
+
+    {% include hub_sort.html %}
+
   </div>
 
   {% include hub_search.html %}
diff --git a/_includes/hub_researcher_tags_and_cards.html b/_includes/hub_researcher_tags_and_cards.html
@@ -11,6 +11,9 @@
       {% include hub_icons.html left-icon="full-hub-icon-selected.svg" right-icon="compact-hub-icon.svg" index-url="research-models" compact-url="research-models/compact" %}
 
     {% endif %}
+
+    {% include hub_sort.html %}
+
   </div>
 
   {% include hub_search.html %}
diff --git a/_includes/hub_sort.html b/_includes/hub_sort.html
@@ -0,0 +1,17 @@
+<a id="dropdownSortLeft" data-toggle="dropdown" data-target="#dropdownSortMenuLeft" >
+  Sort <img src="{{ site.baseurl }}/assets/images/filter-arrow.svg">
+</a>
+
+<div class="dropdown-menu sort-menu" id="dropdownSortMenuLeft">
+  <div class="hub-filter-menu">
+    <ul>
+      <li>
+        <a class= "hub-filter" id="sortLowLeft">Lowest</a>
+      </li>
+
+      <li>
+        <a class= "hub-filter" id="sortHighLeft">Highest</a>
+      </li>
+    </ul>
+  </div>
+</div>
diff --git a/_sass/compact.scss b/_sass/compact.scss
@@ -68,8 +68,9 @@
 
 .compact-hub-icon {
   margin-left: 0.5rem;
+  margin-right: rem(50px);
   &:hover {
-    cursor: pointer; 
+    cursor: pointer;
   }
 }
 
diff --git a/_sass/hub-search.scss b/_sass/hub-search.scss
@@ -18,6 +18,12 @@
   }
 }
 
+.hub #hub-search-icon {
+  @media (max-width: 480px) {
+    margin-top: 1rem;
+  }
+}
+
 #hub-search-icon {
   background-image: url($baseurl + "/assets/images/search-icon.svg");
   color: transparent;
diff --git a/_sass/hub.scss b/_sass/hub.scss
@@ -159,6 +159,11 @@
 
 #hub-icons {
   height: 2rem;
+  @media (max-width: 480px) {
+    position: initial;
+    padding-left: 0;
+    padding-top: 1rem;
+  }
 }
 
 .hub.hub-detail .main-content-wrapper {
@@ -287,15 +292,12 @@
   position: absolute;
 }
 
-.hub #dropdownSort, #dropdownSortLeft {
-  margin-left: rem(100px);
+.hub .sort-menu {
+  left: 0;
 }
 
-.hub .sort-menu {
-  left: 63%;
-  @include desktop {
-    left: 25%;
-  }
+.hub-index .sort-menu {
+  left: 23%;
 }
 
 .hub .research-hub-title,
@@ -540,8 +542,7 @@
 }
 
 .hub .hub-tags-container {
-  width: 40%;
-
+  width: 60%;
   &.active {
     width: 0;
   }
diff --git a/hub/hub.html b/hub/hub.html
@@ -32,26 +32,10 @@ <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" %}
-            {% include hub_search.html %}
-            <!--
-            <a id="dropdownSortLeft" data-toggle="dropdown" data-target="#dropdownSortMenuLeft" >
-              Sort <img src="{{ site.baseurl }}/assets/images/filter-arrow.svg">
-            </a>
-
-            <div class="dropdown-menu sort-menu" id="dropdownSortMenuLeft">
-              <div class="hub-filter-menu">
-                <ul>
-                  <li>
-                    <a class= "hub-filter" id="sortLowLeft">Lowest</a>
-                  </li>
-
-                  <li>
-                    <a class= "hub-filter" id="sortHighLeft">Highest</a>
-                  </li>
-                </ul>
-              </div>
+            <div id="hub-icons" class="hub-select-container col-5">
+              {% include hub_sort.html %}
             </div>
-          -->
+            {% include hub_search.html %}
           </nav>
 
           <hr class="hub-divider">

Original file line number	Diff line number	Diff line change
`@@ -68,8 +68,9 @@`
`68`	`68`
`69`	`69`	`.compact-hub-icon {`
`70`	`70`	`margin-left: 0.5rem;`
	`71`	`+ margin-right: rem(50px);`
`71`	`72`	`&:hover {`
`72`		`- cursor: pointer;`
	`73`	`+ cursor: pointer;`
`73`	`74`	`}`
`74`	`75`	`}`
`75`	`76`
Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,12 @@`
`18`	`18`	`}`
`19`	`19`	`}`
`20`	`20`
	`21`	`+.hub #hub-search-icon {`
	`22`	`+ @media (max-width: 480px) {`
	`23`	`+ margin-top: 1rem;`
	`24`	`+ }`
	`25`	`+}`
	`26`	`+`
`21`	`27`	`#hub-search-icon {`
`22`	`28`	`background-image: url($baseurl + "/assets/images/search-icon.svg");`
`23`	`29`	`color: transparent;`
Original file line number	Diff line number	Diff line change
`@@ -159,6 +159,11 @@`
`159`	`159`
`160`	`160`	`#hub-icons {`
`161`	`161`	`height: 2rem;`
	`162`	`+ @media (max-width: 480px) {`
	`163`	`+ position: initial;`
	`164`	`+ padding-left: 0;`
	`165`	`+ padding-top: 1rem;`
	`166`	`+ }`
`162`	`167`	`}`
`163`	`168`
`164`	`169`	`.hub.hub-detail .main-content-wrapper {`
`@@ -287,15 +292,12 @@`
`287`	`292`	`position: absolute;`
`288`	`293`	`}`
`289`	`294`
`290`		`-.hub #dropdownSort, #dropdownSortLeft {`
`291`		`- margin-left: rem(100px);`
	`295`	`+.hub .sort-menu {`
	`296`	`+ left: 0;`
`292`	`297`	`}`
`293`	`298`
`294`		`-.hub .sort-menu {`
`295`		`- left: 63%;`
`296`		`- @include desktop {`
`297`		`- left: 25%;`
`298`		`- }`
	`299`	`+.hub-index .sort-menu {`
	`300`	`+ left: 23%;`
`299`	`301`	`}`
`300`	`302`
`301`	`303`	`.hub .research-hub-title,`
`@@ -540,8 +542,7 @@`
`540`	`542`	`}`
`541`	`543`
`542`	`544`	`.hub .hub-tags-container {`
`543`		`- width: 40%;`
`544`		`-`
	`545`	`+ width: 60%;`
`545`	`546`	`&.active {`
`546`	`547`	`width: 0;`
`547`	`548`	`}`