add sort by select-box for searching crate

[linyihai]

This PR for #2152

The main features are:

• Add a drop-down selection box to the top right of the search result to support searching by category. This prototype comes from crates-io, so the main drop-down options also come from it.
• Another improvement is that when the dropdown option is changed, the search will be triggered if there is content in the search box

In the end, I didn't find a good way to test it, so I built some packages locally, changed the drop-down options, and saw how the results returned compared to crates-io.

the finally look is:

[Nemo157]

From the screenshot it looks like a different text color is being used. I'm not sure if the existing CSS has handling for a select in the navbar, it may just need some class applied, or it might need some extra rules added.

[linyihai]

thanks for you suggestions, I add the same CSS into the select-box, now it looks well.

[GuillaumeGomez]

Thanks for the update! I'll try to review it by the end of the week.

[GuillaumeGomez]

So currently it looks like this:

With these changes:

diff --git a/templates/style/_vars.scss b/templates/style/_vars.scss
index aa97be9d..f28a0c19 100644
--- a/templates/style/_vars.scss
+++ b/templates/style/_vars.scss
@@ -7,6 +7,7 @@ $font-family-mono: "Source Code Pro", Menlo, Monaco, Consolas, "DejaVu Sans Mono
 
 // Sizes
 $top-navbar-height: 32px; // height of the floating top navbar
+$search-result-right-left-padding: 1em; // Size of the right and left padding for the search results
 
 // Pure compatible media queries
 // usage:
diff --git a/templates/style/style.scss b/templates/style/style.scss
index 0f3d7f92..149a6789 100644
--- a/templates/style/style.scss
+++ b/templates/style/style.scss
@@ -244,6 +244,7 @@ div.landing {
 #search-select-nav {
     display: flex;
     flex-direction: column;
+    padding: 1em $search-result-right-left-padding;
 
     .item-end {
         align-self: flex-end
@@ -282,7 +283,7 @@ div.recent-releases-container {
     .release {
         display: block;
         border-bottom: 1px solid var(--color-border);
-        padding: 0.4em 1em;
+        padding: 0.4em $search-result-right-left-padding;
         color: var(--color-standard);
 
         a {

It now looks like this:

Could you apply them please?

[linyihai]

So currently it looks like this:

With these changes:

diff --git a/templates/style/_vars.scss b/templates/style/_vars.scss
index aa97be9d..f28a0c19 100644
--- a/templates/style/_vars.scss
+++ b/templates/style/_vars.scss
@@ -7,6 +7,7 @@ $font-family-mono: "Source Code Pro", Menlo, Monaco, Consolas, "DejaVu Sans Mono
 
 // Sizes
 $top-navbar-height: 32px; // height of the floating top navbar
+$search-result-right-left-padding: 1em; // Size of the right and left padding for the search results
 
 // Pure compatible media queries
 // usage:
diff --git a/templates/style/style.scss b/templates/style/style.scss
index 0f3d7f92..149a6789 100644
--- a/templates/style/style.scss
+++ b/templates/style/style.scss
@@ -244,6 +244,7 @@ div.landing {
 #search-select-nav {
     display: flex;
     flex-direction: column;
+    padding: 1em $search-result-right-left-padding;
 
     .item-end {
         align-self: flex-end
@@ -282,7 +283,7 @@ div.recent-releases-container {
     .release {
         display: block;
         border-bottom: 1px solid var(--color-border);
-        padding: 0.4em 1em;
+        padding: 0.4em $search-result-right-left-padding;
         color: var(--color-standard);
 
         a {

It now looks like this:

Could you apply them please?

No problem.

[GuillaumeGomez]

Looks good to me, thanks! Let's wait for @Nemo157 to check if it looks good to them as well.