Merge pull request #346 from seart-group/feature/sort

html/css/main.css

@@ -1,5 +1,8 @@
 :root {
-    --ghs-autocomplete-menu-height: 340px;
+    --ghs-autocomplete-menu-items: 10;
+    --ghs-autocomplete-menu-height: calc(32px * var(--ghs-autocomplete-menu-items) + 2rem);
+    --ghs-dropdown-menu-items: 5;
+    --ghs-dropdown-menu-height: calc(32px * var(--ghs-dropdown-menu-items) + 1.125rem);
     --ghs-bottom-border: var(--bs-border-width) var(--bs-border-style) var(--bs-gray);
     --ghs-box-shadow: 0 0 0 0.2rem rgba(var(--bs-secondary-rgb), 0.25);
     --ghs-disabled-opacity: 0.6;
@@ -93,6 +96,7 @@ input::-webkit-calendar-picker-indicator {
 }
 
 .btn-override {
+    height: var(--ghs-input-height)!important;
     color: var(--bs-secondary)!important;
     background-color: var(--bs-gray-200)!important;
     border-top: none!important;
@@ -112,6 +116,10 @@ input::-webkit-calendar-picker-indicator {
     background-color: var(--bs-secondary)!important;
 }
 
+.form-check {
+    margin-bottom: 0!important;
+}
+
 .form-check > * {
     cursor: pointer!important;
 }
@@ -151,10 +159,24 @@ input::-webkit-calendar-picker-indicator {
     padding: var(--bs-dropdown-padding-y) 0!important;
 }
 
+.dropdown-menu.dropdown-menu-scrollable {
+    height: auto!important;
+    max-height: var(--ghs-dropdown-menu-height)!important;
+    overflow-x: hidden!important;
+}
+
 .dropdown-toggle::after {
     display: none!important;
 }
 
+.dropdown-toggle.btn-override {
+    overflow: hidden!important;
+    display: flex!important;
+    justify-content: space-between!important;
+    align-items: center!important;
+    gap: 0.25rem!important;
+}
+
 .dropdown-item.active,
 .dropdown-item:active {
     background-color: var(--bs-gray)!important;

html/index.html

@@ -107,8 +107,8 @@
                    class="nav-link"
                    tabindex="-1"
                 >
-                  <i class="devicon-github-original d-none d-md-inline"></i>
-                  <span class="d-md-none">GitHub</span>
+                  <i class="devicon-github-original d-none d-sm-inline"></i>
+                  <span class="d-sm-none">GitHub</span>
                 </a>
               </li>
             </ul>
@@ -141,7 +141,7 @@ <h5 class="my-3">General</h5>
                           data-bs-toggle="dropdown"
                           aria-expanded="false"
                   >
-                    Contains
+                    <span class="text-truncate">Contains</span>
                     <i class="bi bi-chevron-down"></i>
                   </button>
                   <ul id="search-name-dropdown-items"
@@ -676,6 +676,70 @@ <h6>Comment Lines</h6>
                 <h5 class="my-3">Additional Filters</h5>
               </div>
             </div>
+            <div class="row">
+              <div class="col">
+                <h6>Sorting</h6>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 col-md-6">
+                <button type="button"
+                        id="search-sort-column-dropdown-toggle"
+                        class="btn btn-secondary btn-override dropdown-toggle mb-3 w-100"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                >
+                  <span class="text-truncate">Name</span>
+                  <i class="bi bi-chevron-down"></i>
+                </button>
+                <ul id="search-sort-column-dropdown-items"
+                    class="dropdown-menu dropdown-menu-end dropdown-menu-scrollable"
+                >
+                  <li><button type="button" class="dropdown-item" value="name">Name</button></li>
+                  <li><button type="button" class="dropdown-item" value="commits">Commits</button></li>
+                  <li><button type="button" class="dropdown-item" value="contributors">Contributors</button></li>
+                  <li><button type="button" class="dropdown-item" value="totalIssues">Issues</button></li>
+                  <li><button type="button" class="dropdown-item" value="totalPullRequests">Pull Requests</button></li>
+                  <li><button type="button" class="dropdown-item" value="branches">Branches</button></li>
+                  <li><button type="button" class="dropdown-item" value="releases">Releases</button></li>
+                  <li><button type="button" class="dropdown-item" value="stargazers">Stars</button></li>
+                  <li><button type="button" class="dropdown-item" value="watchers">Watchers</button></li>
+                  <li><button type="button" class="dropdown-item" value="forks">Forks</button></li>
+                  <li><button type="button" class="dropdown-item" value="createdAt">Created</button></li>
+                  <li><button type="button" class="dropdown-item" value="updatedAt">Updated</button></li>
+                  <li><button type="button" class="dropdown-item" value="lastCommit">Commited</button></li>
+                </ul>
+              </div>
+              <div class="col-12 col-md-6">
+                <button type="button"
+                        id="search-sort-direction-dropdown-toggle"
+                        class="btn btn-secondary btn-override dropdown-toggle mb-3 w-100"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                >
+                  <span class="text-truncate">Ascending</span>
+                  <i class="bi bi-chevron-down"></i>
+                </button>
+                <ul id="search-sort-direction-dropdown-items"
+                    class="dropdown-menu dropdown-menu-end"
+                >
+                  <li><button type="button" class="dropdown-item" value="asc">Ascending</button></li>
+                  <li><button type="button" class="dropdown-item" value="desc">Descending</button></li>
+                </ul>
+              </div>
+              <input type="text"
+                     id="search-sort"
+                     name="sort"
+                     aria-label="Sort"
+                     class="d-none"
+                     value="name,asc"
+              />
+            </div>
+            <div class="row">
+              <div class="col">
+                <h6>Repository Characteristics</h6>
+              </div>
+            </div>
             <div class="row">
               <div class="col-12 col-sm-6 col-md-12 col-xl-6">
                 <div class="form-check">
@@ -1247,6 +1311,7 @@ <h2 class="mb-3">No Results! <i class="bi bi-emoji-frown-fill"></i></h2>
     <script src="js/handlebars.js"></script>
     <script src="js/jquery.js"></script>
     <script src="js/general.js"></script>
+    <script src="js/dropdown.js"></script>
     <script src="js/autocomplete.js" type="module"></script>
     <script src="js/chart.js"></script>
     <script src="js/search.js"></script>

html/js/dropdown.js

@@ -0,0 +1,49 @@
+(function (base, $) {
+    const $search_name_dropdown_toggle = $("#search-name-dropdown-toggle");
+    const $search_name_dropdown_items = $("#search-name-dropdown-items > * > .dropdown-item");
+    const $search_name_equals = $("#search-name-equals");
+
+    const $search_sort_column_dropdown_toggle = $("#search-sort-column-dropdown-toggle");
+    const $search_sort_column_dropdown_items = $("#search-sort-column-dropdown-items > * > .dropdown-item");
+    const $search_sort_direction_dropdown_toggle = $("#search-sort-direction-dropdown-toggle");
+    const $search_sort_direction_dropdown_items = $("#search-sort-direction-dropdown-items > * > .dropdown-item");
+    const $search_sort = $("#search-sort");
+
+    $search_name_dropdown_items.on("click", function () {
+        const $item = $(this);
+        const html = $item.html();
+        const value = $item.val();
+        $search_name_dropdown_toggle.find("span").html(html);
+        $search_name_equals.attr("value", value);
+    });
+
+    $search_sort_column_dropdown_items.on("click", function () {
+        const $item = $(this);
+        const html = $item.html();
+        const column = $item.val();
+        const [ _, direction ] = $search_sort.val().split(",");
+        $search_sort_column_dropdown_toggle.find("span").html(html);
+        $search_sort.attr("value", `${column},${direction}`);
+    });
+
+    $search_sort_direction_dropdown_items.on("click", function () {
+        const $item = $(this);
+        const html = $item.html();
+        const direction = $item.val();
+        const [ column, _ ] = $search_sort.val().split(",");
+        $search_sort_direction_dropdown_toggle.find("span").html(html);
+        $search_sort.attr("value", `${column},${direction}`);
+    });
+
+    const set_dropdown_width = function () {
+        $(".dropdown-menu").each(function () {
+            const $menu = $(this);
+            const $trigger = $menu.prevAll("[data-bs-toggle]");
+            const width = $trigger.outerWidth();
+            if (width) $menu.css("width", width);
+        });
+    };
+
+    $(window).on("load", set_dropdown_width);
+    $(window).on("resize", set_dropdown_width);
+})(base, jQuery);

html/js/general.js

@@ -1,7 +1,4 @@
 (function ($, storage, clipboard, Tooltip) {
-    const $search_name_dropdown_toggle = $("#search-name-dropdown-toggle");
-    const $search_name_dropdown_items = $("#search-name-dropdown-items > * > .dropdown-item");
-    const $search_name_equals = $("#search-name-equals");
     const $search_only_forks = $("#search-only-forks");
     const $search_exclude_forks = $("#search-exclude-forks");
 
@@ -37,14 +34,6 @@
         max: Number.MAX_SAFE_INTEGER,
     });
 
-    $search_name_dropdown_items.on("click", function () {
-        const target = $(this);
-        const html = target.html();
-        const value = target.val();
-        $search_name_dropdown_toggle.html(`${html} <i class="bi bi-chevron-down"></i>`);
-        $search_name_equals.val(value);
-    });
-
     $search_only_forks.on("change", function () {
         if ($(this).prop("checked")) {
             $search_exclude_forks.prop("checked", false);