Merge pull request #365 from teaxyz/display-number-of-packages

Display Number of Packages

src/layouts/partials/package-grid.html

@@ -5,7 +5,6 @@
     <div class="row">
       <div class="col">
         {{- partial "search-menu.html" "searchTermDesktop" -}}
-        <hr>
 
         <div class="package-grid">
 
@@ -94,6 +93,7 @@
     overflow: hidden;
   }
 </style>
+
 <script language="javascript" type="module">
   import Fuse from 'https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.esm.js'
 
@@ -109,6 +109,11 @@
 
   const grid = document.getElementById('packageGrid');
   const packagesCache = Array.from(grid.children).filter((e) => e.dataset && e.dataset.name);
+
+  // get reference to search input and set its placeholder
+  const searchInput = document.getElementById('searchTermDesktop');
+  searchInput.placeholder = `Search ${packagesCache.length} packages`;
+
   const packagesIndex = new Fuse(packagesCache.map((p) => p.dataset), {
     keys: ["name", "maintainer", "description"],
     minMatchCharLength: 3,

src/layouts/partials/search-menu.html

@@ -5,7 +5,8 @@
                 <div class="icon">
                 <i class="icon-search-icon"></i>
                 </div>
-                <input id="{{- . -}}" type="search" placeholder="search_" />
+                <!-- Save the input element to a variable to be able to refer to it later -->
+                <input id="{{- . -}}" type="search" placeholder="Search packages" />
             </div>
             {{- partial "sort-dropdown.html" -}}
         </div>
@@ -13,7 +14,6 @@
 </section>
 
 <style>
-
   .icon-search-icon{
     font-size: 30px;
     color: #949494;
@@ -38,7 +38,7 @@
     color:#00ffd0;
     text-transform:uppercase;
     margin-bottom: -5px;
-    min-width: 60%;
+    min-width: 100%;
     padding: 0px;
     background-color: #1a1a1a !important;
     border: none;