Add filter field into dropdowns (#605)

Co-authored-by: Martin Kolárik <[email protected]>
jsdelivr · Nov 14, 2023 · 41c452b · 41c452b
1 parent c32bc4d
commit 41c452b
Show file tree

Hide file tree

Showing 11 changed files with 733 additions and 340 deletions.
diff --git a/src/assets/less/components/package-file-browser.less b/src/assets/less/components/package-file-browser.less
@@ -6,15 +6,6 @@
 	font-weight: 400;
 	-webkit-font-smoothing: antialiased;
 
-	.version-dropdown {
-		font-size: 16px;
-		float: right;
-
-		.version-dropdown-selected-version {
-			font-weight: 600;
-		}
-	}
-
 	.box-files {
 		width: 100%;
 

diff --git a/src/assets/less/components/package-install-block.less b/src/assets/less/components/package-install-block.less
@@ -24,37 +24,6 @@
 			border-radius: 8px;
 		}
 
-		.dropdown-wrapper {
-			display: flex;
-			align-items: center;
-			height: 32px;
-
-			label {
-				margin-bottom: 0;
-			}
-
-			.btn.dropdown-toggle {
-				font-size: 14px;
-				line-height: 20px;
-				color: #fff;
-				height: 100%;
-				background: #394356;
-				border-radius: 6px;
-				border: none;
-				padding: 6px 15px 6px 12px;
-
-				&:active, &:hover, &:focus {
-					color: #fff;
-				}
-
-				> span {
-					max-width: 100px;
-					text-overflow: ellipsis;
-					overflow: hidden;
-				}
-			}
-		}
-
 		.switch-wrapper {
 			align-items: center;
 
@@ -144,6 +113,18 @@
 			}
 		}
 
+		.versions-wrapper {
+			display: flex;
+			align-items: center;
+			column-gap: 8px;
+
+			>span {
+				color: #fff;
+				font-size: 14px;
+				line-height: 20px;
+			}
+		}
+
 		.install-settings {
 			display: flex;
 			justify-content: flex-end;
@@ -167,7 +148,7 @@
 				}
 			}
 
-			& > .dropdown-wrapper {
+			& > .versions-wrapper {
 				display: none;
 
 				@media (min-width: @screen-sm-min) {
@@ -282,40 +263,18 @@
 					}
 				}
 
-				.dropdown-wrapper {
-					margin-top: 24px;
+				.versions-wrapper {
+					display: flex;
 					flex-direction: column;
-					align-items: start;
-					height: auto;
+					row-gap: 8px;
+					margin-top: 24px;
+					width: 100%;
+					align-items: flex-start;
 
-					label {
+					>span {
+						color: #5c667a;
 						font-weight: 400;
 					}
-
-					.btn-group {
-						width: 100%;
-						margin-top: 8px;
-
-						&.open .dropdown-menu {
-							max-width: unset;
-							width: 100%;
-						}
-					}
-
-					.dropdown-toggle {
-						width: 100%;
-						padding: 10px 8px 10px 16px;
-						border: 1px solid #cfd6dd;
-						color: #17233b;
-						background-color: #fff;
-						display: flex;
-						align-items: center;
-						justify-content: space-between;
-
-						> span {
-							max-width: 100%;
-						}
-					}
 				}
 
 				.btn-primary {

diff --git a/src/assets/less/components/package.less b/src/assets/less/components/package.less
@@ -582,14 +582,6 @@
 				.c-stats-table {
 					min-height: 346px;
 				}
-
-				.version-dropdown {
-					vertical-align: top;
-
-					.dropdown-menu {
-						max-height: 228px;
-					}
-				}
 			}
 		}