Create mobile-dropdown component and use it in Inputs. Change height to min-height in full-screen-modal and in cite-this.

landingPages/landing-utils/citeThis/citeThis.component.ts

@@ -21,7 +21,7 @@ declare var Cite: any;
 @Component({
   selector: 'citeThis',
   template: `
-    <div class="uk-padding uk-padding-remove-top uk-height-large uk-overflow-auto">
+    <div class="uk-padding uk-padding-remove-top uk-height-min-large">
       <div input type="select" placeholder="Select a citation style" inputClass="flat x-small"
            [options]="citation.templates" [(value)]="selectedStyle"
            (valueChange)="styleChanged()"></div>

sharedComponents/input/input.component.ts

@@ -21,6 +21,8 @@ import {BehaviorSubject, Subscription} from "rxjs";
 import {EnvProperties} from "../../utils/properties/env-properties";
 import {properties} from "../../../../environments/environment";
 import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
+import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service";
+import {MobileDropdownComponent} from "../../utils/mobile-dropdown/mobile-dropdown.component";
 
 export type InputType =
     'text'
@@ -186,7 +188,7 @@ declare var UIkit;
                   </div>
               </div>
           </div>
-          <div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox
+          <div *ngIf="!mobile && filteredOptions && filteredOptions.length > 0 && opened" class="options uk-dropdown" #optionBox
                uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
               <ul class="uk-nav uk-dropdown-nav">
                   <li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden"
@@ -199,6 +201,22 @@ declare var UIkit;
                   </li>
               </ul>
           </div>
+          <mobile-dropdown *ngIf="mobile" #mobileDropdown>
+              <div *ngIf="placeholderInfo" class="uk-text-emphasis uk-text-bolder uk-text-center uk-padding-small uk-padding-remove-vertical uk-text-uppercase">
+                  {{placeholderInfo.label}}
+              </div>
+              <div class="uk-padding uk-padding-remove-horizontal">
+                  <ul class="uk-nav uk-nav-default">
+                      <li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden"
+                          [class.uk-active]="formControl.value === option.value">
+                          <a (click)="selectOption(option, $event)"
+                             [class]="option.disabled ? 'uk-disabled uk-text-muted' : ''">
+                              <span>{{option.label}}</span>
+                          </a>
+                      </li>
+                  </ul>
+              </div>
+          </mobile-dropdown>
       </div>
       <span *ngIf="formControl?.invalid && formControl?.touched" class="uk-text-danger">
       <span *ngIf="errors?.error">{{errors?.error}}</span>
@@ -273,6 +291,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   public required: boolean = false;
   public focused: boolean = false;
   public opened: boolean = false;
+  public mobile: boolean = false;
   public properties: EnvProperties = properties;
   private initValue: any;
   private optionsArray: Option[] = [];
@@ -280,6 +299,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   private subscriptions: any[] = [];
   @ViewChild('inputBox') inputBox: ElementRef;
   @ViewChild('optionBox') optionBox: ElementRef;
+  @ViewChild('mobileDropdown') mobileDropdown: MobileDropdownComponent;
   @ViewChild('searchInput') searchInput: ElementRef;
   @ViewChildren('chip') chips: QueryList<ElementRef>;
 
@@ -323,7 +343,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
     }
   }
 
-  constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef) {
+  constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, private layoutService: LayoutService) {
     if (elementRef.nativeElement.hasAttribute('dashboard-input') && this.properties.environment === "development") {
       console.warn("'dashboard-input' selector is deprecated; use 'input' instead.");
     }
@@ -331,7 +351,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
 
   @HostListener('window:keydown.arrowUp', ['$event'])
   arrowUp(event: KeyboardEvent) {
-    if (this.opened) {
+    if (this.opened && this.optionBox) {
       event.preventDefault();
       if (this.selectedIndex > 0) {
         this.selectedIndex--;
@@ -342,7 +362,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
 
   @HostListener('window:keydown.arrowDown', ['$event'])
   arrowDown(event: KeyboardEvent) {
-    if (this.opened) {
+    if (this.opened && this.optionBox) {
       event.preventDefault();
       if (this.selectedIndex < (this.filteredOptions.length - 1)) {
         this.selectedIndex++;
@@ -409,6 +429,10 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   }
 
   ngOnInit() {
+    this.subscriptions.push(this.layoutService.isMobile.subscribe(mobile => {
+      this.mobile = mobile;
+      this.cdr.detectChanges();
+    }));
     InputComponent.INPUT_COUNTER++;
     this.id = 'input-' + InputComponent.INPUT_COUNTER;
     if (!this.formControl) {
@@ -739,17 +763,26 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   open(value: boolean) {
     this.opened = value && this.formControl.enabled;
     this.cdr.detectChanges();
-    if (this.optionBox && this.opened) {
+    if(this.optionBox) {
-      this.selectedIndex = this.filteredOptions.findIndex(option => option.value === this.formControl.value);
+      if (this.opened) {
-      if (this.selectedIndex === -1 && this.type !== 'autocomplete_soft') {
+        this.selectedIndex = this.filteredOptions.findIndex(option => option.value === this.formControl.value);
-        this.selectedIndex = 0;
+        if (this.selectedIndex === -1 && this.type !== 'autocomplete_soft') {
-      }
+          this.selectedIndex = 0;
-      UIkit.dropdown(this.optionBox.nativeElement).show();
+        }
-    } else {
+        UIkit.dropdown(this.optionBox.nativeElement).show();
-      if (this.optionBox) {
+      } else {
         UIkit.dropdown(this.optionBox.nativeElement).hide();
         this.focused = false;
       }
+    } else if(this.mobileDropdown) {
+      if(this.opened) {
+        this.mobileDropdown.open();
+        if(this.searchInput) {
+          this.searchInput.nativeElement.blur();
+        }
+      } else {
+        this.mobileDropdown.close();
+      }
     }
   }
 

sharedComponents/input/input.module.ts

@@ -4,13 +4,15 @@ import {SharedModule} from "../../../openaireLibrary/shared/shared.module";
 import {IconsModule} from "../../utils/icons/icons.module";
 import {SafeHtmlPipeModule} from "../../utils/pipes/safeHTMLPipe.module";
 import {ClickModule} from "../../utils/click/click.module";
+import {MobileDropdownModule} from "../../utils/mobile-dropdown/mobile-dropdown.module";
 
 @NgModule({
   imports: [
     SharedModule,
     IconsModule,
     SafeHtmlPipeModule,
-    ClickModule
+    ClickModule,
+    MobileDropdownModule
   ],
   exports: [
     InputComponent

utils/mobile-dropdown/mobile-dropdown.component.ts

@@ -0,0 +1,36 @@
+import {Component, Input, OnInit} from "@angular/core";
+
+@Component({
+  selector: 'mobile-dropdown',
+  template: `
+      <div class="uk-dropdown-mobile" [class.uk-open]="opened">
+          <div class="uk-dropdown-mobile-container">
+              <a class="uk-close" (click)="close()">
+                  <icon name="close" [ratio]="1.2"></icon>
+              </a>
+              <div class="uk-content">
+                  <ng-content></ng-content>
+              </div>
+          </div>
+      </div>`
+})
+export class MobileDropdownComponent implements OnInit{
+  @Input() toggle: HTMLLinkElement;
+  public opened: boolean = false;
+
+  ngOnInit() {
+    if(this.toggle) {
+      this.toggle.onclick = (ev) => {
+        this.opened = !this.opened;
+      }
+    }
+  }
+
+  open() {
+    this.opened = true;
+  }
+
+  close() {
+    this.opened = false;
+  }
+}

utils/mobile-dropdown/mobile-dropdown.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {MobileDropdownComponent} from "./mobile-dropdown.component";
+import {IconsModule} from "../icons/icons.module";
+
+@NgModule({
+  imports: [CommonModule, IconsModule],
+  declarations: [MobileDropdownComponent],
+  exports: [MobileDropdownComponent]
+})
+export class MobileDropdownModule {}

utils/modal/full-screen-modal/full-screen-modal.component.ts

@@ -45,7 +45,7 @@ declare var ResizeObserver;
           </div>
         </div>
         <div #body class="uk-modal-body uk-overflow-auto uk-border-box"  [ngStyle]="{'height.px': bodyHeight}">
-          <div class="uk-container uk-height-1-1" [ngClass]="classBody">
+          <div class="uk-container" style="min-height: 100%" [ngClass]="classBody">
             <ng-content></ng-content>
           </div>
         </div>