[FLORA-388] Reverse depenencies search bar

Co-Authored-By: Dylan Thinnes <dylan.thinnes@protonmail.com>
flora-pm · Oct 31, 2023 · 2cb7b20 · 2cb7b20
1 parent 60132bb
commit 2cb7b20
Show file tree

Hide file tree

Showing 19 changed files with 419 additions and 183 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * Add a page on namespaces in the documentation ([#451](https://github.com/flora-pm/flora-server/pull/451))
 * Add initial support for hosting package tarballs ([#452](https://github.com/flora-pm/flora-server/pull/452))
 * Show depended on components in dependencies page ([#464](https://github.com/flora-pm/flora-server/pull/464))
+* Add search bar for reverse dependencies ([#476](https://github.com/flora-pm/flora-server/pull/476))
 
 ## 1.0.13 -- 2023-09-17
 * Exclude deprecated releases from latest versions and search ([#373](https://github.com/flora-pm/flora-server/pull/373))

diff --git a/assets/css/2-components/5-primary-search.css b/assets/css/2-components/5-primary-search.css
@@ -0,0 +1,62 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+
+.main-search {
+  background-color: var(--search-bar-background-color);
+  border-radius: 0.75rem;
+  border-width: 2px;
+  display: flex;
+  font-size: 1.5rem;
+  justify-content: center;
+  line-height: 2rem;
+  max-width: 28rem;
+  outline-offset: -2px;
+  overflow: hidden;
+  padding: 0.5rem;
+
+  .search-bar {
+    background-color: var(--search-bar-background-color);
+    color: var(--search-bar-color);
+    display: block;
+    margin-left: 0.5rem;
+    font-size: 1.5rem;
+    line-height: 2rem;
+    padding: 0.5rem;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  .search-bar:hover {
+    background-color: var(--search-bar-background-hover-color);
+  }
+
+  .search-bar:focus {
+    background-color: var(--search-bar-background-focus-color);
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+
+.main-search:focus-within {
+  border-color: var(--search-bar-focus-border-color);
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 400ms;
+
+  /* offset-x | offset-y | blur-radius | spread-radius | color */
+  box-shadow: 5px 5px 5px 2px var(--search-bar-focus-border-color);
+}
+
+.main-search button {
+  margin-bottom: 1.25rem;
+  margin-right: 1rem;
+  margin-top: 1.25rem;
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+}
+
diff --git a/assets/css/2-components/6-secondary-search.css b/assets/css/2-components/6-secondary-search.css
@@ -0,0 +1,61 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+
+.secondary-search {
+  background-color: var(--search-bar-background-color);
+  border-radius: 0.75rem;
+  border-width: 2px;
+  display: flex;
+  font-size: 1rem;
+  justify-content: center;
+  line-height: 2rem;
+  max-width: 20rem;
+  outline-offset: -2px;
+  overflow: hidden;
+  padding: 0.3rem;
+
+  .search-bar {
+    background-color: var(--search-bar-background-color);
+    color: var(--search-bar-color);
+    display: block;
+    font-size: 1.5rem;
+    line-height: 2rem;
+    padding: 0.5rem;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  .search-bar:hover {
+    background-color: var(--search-bar-background-hover-color);
+  }
+
+  .search-bar:focus {
+    background-color: var(--search-bar-background-focus-color);
+    outline: transparent solid 2px;
+    outline-offset: 2px;
+  }
+}
+
+.secondary-search:focus-within {
+  border-color: var(--search-bar-focus-border-color);
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+
+  /* offset-x | offset-y | blur-radius | spread-radius | color */
+  box-shadow: 4px 4px 4px 1px var(--search-bar-focus-border-color);
+}
+
+.secondary-search button {
+  margin-bottom: 1.25rem;
+  margin-right: 1rem;
+  margin-top: 1.25rem;
+
+  svg {
+    width: 1em;
+    height: 1em;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+}
+
diff --git a/assets/css/3-screens/4-front-page.css b/assets/css/3-screens/4-front-page.css
@@ -13,65 +13,6 @@
   text-align: center;
 }
 
-.main-search {
-  background-color: var(--search-bar-background-color);
-  border-radius: 0.75rem;
-  border-width: 2px;
-  display: flex;
-  font-size: 1.5rem;
-  justify-content: center;
-  line-height: 2rem;
-  max-width: 28rem;
-  outline-offset: -2px;
-  overflow: hidden;
-  padding: 0.5rem;
-
-  .search-bar {
-    background-color: var(--search-bar-background-color);
-    color: var(--search-bar-color);
-    display: block;
-    margin-left: 0.5rem;
-    font-size: 1.5rem;
-    line-height: 2rem;
-    padding: 0.5rem;
-    flex-grow: 1;
-    min-width: 0;
-  }
-
-  .search-bar:hover {
-    background-color: var(--search-bar-background-hover-color);
-  }
-
-  .search-bar:focus {
-    background-color: var(--search-bar-background-focus-color);
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-}
-
-.main-search:focus-within {
-  border-color: var(--search-bar-focus-border-color);
-  transition-property: box-shadow;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 400ms;
-
-  /* offset-x | offset-y | blur-radius | spread-radius | color */
-  box-shadow: 5px 5px 5px 2px var(--search-bar-focus-border-color);
-}
-
-.main-search button {
-  margin-bottom: 1.25rem;
-  margin-right: 1rem;
-  margin-top: 1.25rem;
-
-  svg {
-    width: 1.5rem;
-    height: 1.5rem;
-    margin-top: auto;
-    margin-bottom: auto;
-  }
-}
-
 section#main-page-buttons {
   border-top: 1px solid var(--text-color);
   border-color: var(--navbar-background-color);

diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -8,6 +8,8 @@
 @import "2-components/2-package-component.css";
 @import "2-components/3-breadcrumb.css";
 @import "2-components/4-license.css";
+@import "2-components/5-primary-search.css";
+@import "2-components/6-secondary-search.css";
 
 @import "3-screens/1-package/1-package.css";
 @import "3-screens/1-package/2-release-changelog.css";
@@ -75,16 +77,19 @@
   }
 }
 
+ul.package-list > * {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  padding-left: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .package-list-item {
   list-style: none;
 
   a {
     display: block;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    padding-left: 1rem;
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
     font-size: 1.25rem;
     line-height: 1.75rem;
   }

diff --git a/flora.cabal b/flora.cabal
@@ -39,7 +39,6 @@ common common-extensions
     OverloadedStrings
     PackageImports
     PolyKinds
-    QuasiQuotes
     RecordWildCards
     StrictData
     TypeFamilies
@@ -223,10 +222,13 @@ library flora-web
     FloraWeb.Components.CategoryCard
     FloraWeb.Components.Footer
     FloraWeb.Components.Header
+    FloraWeb.Components.Icons
+    FloraWeb.Components.MainSearchBar
     FloraWeb.Components.Navbar
     FloraWeb.Components.PackageListHeader
     FloraWeb.Components.PackageListItem
     FloraWeb.Components.PaginationNav
+    FloraWeb.Components.SlimSearchBar
     FloraWeb.Components.Utils
     FloraWeb.Components.VersionListHeader
     FloraWeb.Embedded