feat: improve mobile display, long texts and undefined choices

geonetwork · Jul 17, 2023 · f80282b · f80282b
1 parent 5f00d1a
commit f80282b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html
@@ -1,4 +1,7 @@
-<div class="flex items-start sm:flex-row sm:items-center relative w-full">
+<div
+  class="flex items-start flex-col sm:flex-row sm:items-center relative w-full"
+  *ngIf="choices"
+>
   <span
     *ngIf="showTitle"
     class="tracking-wide text-sm mb-2 sm:mb-0 sm:mr-2 whitespace-nowrap"
@@ -8,7 +11,7 @@
   </span>
   <gn-ui-button
     type="outline"
-    class="grow"
+    class="grow min-w-[165px]"
     extraClass="w-full !p-[8px] !pl-[16px] {{ extraClass }}"
     [title]="title"
     [attr.aria-owns]="id"

diff --git a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts
@@ -19,6 +19,8 @@ export type DDChoices<T> = Array<{
   value: T
 }>
 
+const DEFAULT_ROW_NUMBERS = 6
+
 @Component({
   selector: 'gn-ui-dropdown-selector',
   templateUrl: './dropdown-selector.component.html',
@@ -67,11 +69,14 @@ export class DropdownSelectorComponent implements OnInit {
   }
 
   getChoiceLabel(): string {
-    return this.selectedChoice.label
+    return (
+      this.selectedChoice.label.substring(0, 50) +
+      (this.selectedChoice.label.length > 50 ? '...' : '')
+    )
   }
 
   ngOnInit(): void {
-    if (!this.maxRows) this.maxRows = 6
+    if (!this.maxRows) this.maxRows = DEFAULT_ROW_NUMBERS
   }
 
   isSelected(choice) {