[develop | DONE | ADDED]: Added compact view functionality on search pages.

1. newSearchPage.component.html: Increase left margin of download button | Added button for compact view | In <search-result> added parameter "compactView".
2. newSearchPage.component.html: Added class fields "@Input() hasCompactView: boolean = false;", to show compact button or not and "public compactView: boolean = false;" to show compact or expanded view of each result.
3. searchDownload.component.ts: Changed download <button> to <a> with class "custom-view-button" | Set visuallyHidden to icon.
4. searchResult.component.ts: Added class field "@Input() compactView: boolean = false;".
5. searchResult.component.html: In <result-preview added parameter "compactView".
6. entity-actions.component.ts: Added class field "@Input() compactView: boolean = false;" | When compactView is true, hide action labels - show only icons.
7. result-preview.component.ts: Added class field "@Input() compactView: boolean = false;".
8. result-preview.component.html: When compactView is true, make margins smaller, show 1 line in title, hide funder budget, identifiers, website url, oai-pmh url, description, action oa routes and metrics labels, and added "compactView" parameter in <entity-actions>.

searchPages/searchUtils/newSearchPage.component.html

@@ -369,7 +369,7 @@
                   </div>
                   <!-- Download results -->
                   <div *ngIf="showDownload && (searchUtils.status !== errorCodes.LOADING || !loadPaging)"
-                       class="uk-margin-small-left uk-flex uk-flex-middle" [class.uk-flex-center]="mobile" [class.uk-margin-medium-top]="mobile">
+                       class="uk-margin-left uk-flex uk-flex-middle" [class.uk-flex-center]="mobile" [class.uk-margin-medium-top]="mobile">
                     <search-download
                       *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
                       [isDisabled]="disabled"
@@ -381,6 +381,14 @@
                       </a>
                     </ng-container>
                   </div>
+                  <!-- Compact results -->
+                  <a *ngIf="hasCompactView && (searchUtils.status !== errorCodes.LOADING || !loadPaging)"
+                     class="uk-link-reset custom-view-button active uk-margin-left">
+                    <icon *ngIf="!compactView" uk-tooltip="Compact results" (click)="toggleView(true)"
+                          name="unfold_less" [flex]="true" visuallyHidden="Compact results"></icon>
+                    <icon *ngIf="compactView" uk-tooltip="Expand results" (click)="toggleView(false)"
+                          name="unfold_more" [flex]="true" visuallyHidden="Expand results"></icon>
+                  </a>
                 </div>
               </div>
 
@@ -400,7 +408,8 @@
                              [results]="results"
                              [status]=searchUtils.status
                              [type]="entityType"
-                             [showLoading]="true" [properties]=properties>
+                             [showLoading]="true" [properties]=properties
+                             [compactView]="compactView">
               </search-result>
               <deposit-result *ngIf="usedBy == 'deposit'"
                               [results]="results"

searchPages/searchUtils/newSearchPage.component.ts

@@ -165,6 +165,9 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
   searchTerm: string = null;
   advancedSearchTerms: number = 0;
 
+  @Input() hasCompactView: boolean = false; // if true, show buttons for compact view
+  public compactView: boolean = false; // if true, show less info (e.g. hide description) on each result
+
   @Output() filterRequestAll = new EventEmitter();
 
   constructor(private route: ActivatedRoute,
@@ -1943,4 +1946,10 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
   detectChanges() {
     this.cdr.detectChanges();
   }
+
+  toggleView(compact) {
+    if(compact != this.compactView) {
+      this.compactView = compact;
+    }
+  }
  }

searchPages/searchUtils/searchDownload.component.ts

@@ -14,13 +14,12 @@ import {properties} from "../../../../environments/environment";
 @Component({
   selector: 'search-download',
   template: `
-      <button [attr.uk-tooltip]="'title: Download' + ((totalResults > csvLimit)?' the first 2000 ':' ') + 'results.' + 
+      <a [attr.uk-tooltip]="'title: Download' + ((totalResults > csvLimit)?' the first 2000 ':' ') + 'results.' + 
         ((totalResults > csvLimit && properties.zenodoDumpUrl)?' To get all results download the data dump. ':' ') " 
-        class="uk-button uk-button-link uk-flex uk-flex-middle" [class.uk-disabled]="isDisabled"
+        class="custom-view-button uk-flex uk-flex-middle" [class.uk-disabled]="isDisabled" [class.active]="!isDisabled"
-        [disabled]="isDisabled"
         (click)="downloadfile(downloadURLAPI+'?format=csv'+csvParams,type+'-report-'+((totalResults > csvLimit)?'2000 ':totalResults))">
-        <icon name="download" [flex]="true"></icon>
+        <icon name="download" [flex]="true" visuallyHidden="Download search results"></icon>
-      </button>
+      </a>
       <modal-loading></modal-loading>
       <modal-alert #AlertModalCsvError></modal-alert>
   `

searchPages/searchUtils/searchResult.component.html

@@ -3,7 +3,7 @@
   <li *ngFor="let result of previewResults">
 		<result-preview [properties]="properties" [showOrganizations]="showOrganizations"
 										[showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps"
-										[isCard]="true" [isMobile]="isMobile" [prevPath]="prevPath">
+										[isCard]="true" [isMobile]="isMobile" [prevPath]="prevPath" [compactView]="compactView">
 		</result-preview>
   </li>
 </ul>

searchPages/searchUtils/searchResult.component.ts

@@ -24,6 +24,8 @@ export class SearchResultComponent implements OnInit, OnChanges {
   @Input() custom_class: string = "";
   @Input() properties: EnvProperties;
   @Input() showEnermaps: boolean;
+  @Input() compactView: boolean = false; // if true, show less info (e.g. hide description) on each result
+
   public isMobile: boolean = false;
   private subscriptions: any[] = [];
 

utils/entity-actions/entity-actions.component.ts

@@ -10,14 +10,14 @@ import {EnvProperties} from "../properties/env-properties";
 @Component({
   selector: 'entity-actions',
   template: `
-    <div class="" [ngClass]="isMobile ? 'uk-flex uk-flex-column' : 'uk-grid uk-grid-small uk-child-width-auto'" [attr.uk-grid]="!isMobile ? '' : null">
+    <div class="" [ngClass]="isMobile ? 'uk-flex uk-flex-column' : 'uk-grid uk-grid-small uk-flex-middle uk-child-width-auto'" [attr.uk-grid]="!isMobile ? '' : null">
       <div *ngIf="linking && isRouteAvailable('participate/direct-claim')">
         <a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'], [id,type,linkTo])"
           routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
           [attr.uk-tooltip]="showTooltip ? 'title: Link '+openaireEntities.RESULTS+' with a '+openaireEntities.PROJECT+', a '+openaireEntities.COMMUNITY+' or other '+openaireEntities.RESULTS+' and make the new information available in OpenAIRE information space.; pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
           class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
           <icon [flex]="true" [ratio]="0.7" name="link_to" visuallyHidden="link"></icon>
-          <span class="uk-margin-xsmall-left">Link to</span>
+          <span *ngIf="!compactView" class="uk-margin-xsmall-left">Link to</span>
         </a>
       </div>
       <div *ngIf="share">
@@ -25,14 +25,14 @@ import {EnvProperties} from "../properties/env-properties";
           [attr.uk-tooltip]="showTooltip ? 'title: Share this '+getTypeName()+' in your social networks; pos: bottom; cls: uk-active  uk-text-small uk-padding-small' : 'cls: uk-invisible'"
           class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
           <icon class="uk-text-bolder" [flex]="true" [ratio]="0.8" name="share" visuallyHidden="share"></icon>
-          <span class="uk-margin-xsmall-left">Share</span>
+          <span *ngIf="!compactView" class="uk-margin-xsmall-left">Share</span>
         </a>
       </div>
       <div *ngIf="cite">
         <a (click)="openCiteModal()"
           class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
           <icon class="uk-text-bolder" [flex]="true" [ratio]="0.7" name="cite" visuallyHidden="cite"></icon>
-          <span class="uk-margin-xsmall-left">Cite</span>
+          <span *ngIf="!compactView" class="uk-margin-xsmall-left">Cite</span>
         </a>
       </div>
       <div *ngIf="deposit && isRouteAvailable('participate/deposit/learn-how')">
@@ -40,7 +40,7 @@ import {EnvProperties} from "../properties/env-properties";
           [attr.uk-tooltip]="showTooltip ? 'title: Find a repository to deposit or publish your research in Open Access; pos: bottom; cls: uk-active  uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
           class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
           <icon flex="true" ratio="0.7" name="upload" visuallyHidden="upload"></icon>
-          <span class="uk-margin-xsmall-left">Deposit</span>
+          <span *ngIf="!compactView" class="uk-margin-xsmall-left">Deposit</span>
         </a>
       </div>
       <div *ngIf="embed" >
@@ -48,7 +48,7 @@ import {EnvProperties} from "../properties/env-properties";
           [attr.uk-tooltip]="showTooltip ? 'title: Embed the related '+openaireEntities.RESULTS+' of this '+getTypeName()+' in your website; pos: bottom; cls: uk-active  uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
           class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
           <icon flex="true" ratio="0.8" name="code" visuallyHidden="code"></icon>
-          <span class="uk-margin-xsmall-left">Embed</span>
+          <span *ngIf="!compactView" class="uk-margin-xsmall-left">Embed</span>
         </a>
       </div>
       <ng-content></ng-content>
@@ -96,6 +96,7 @@ export class EntityActionsComponent implements OnInit {
   @Input() url: string;
   @Input() isMobile: boolean = false;
   @Input() showTooltip: boolean = true;
+  @Input() compactView: boolean = false; // if true, do not show label for actions
   public citeThisClicked: boolean;
   public routerHelper: RouterHelper = new RouterHelper();
   @ViewChild('citeModal') citeModal;

utils/result-preview/result-preview.component.html

@@ -32,7 +32,7 @@
         </div>
         <div class="uk-width-expand">
           <!-- 1st section (title, metadata) -->
-          <div class="uk-margin-small-bottom">
+          <div [class.uk-margin-small-bottom]="!compactView">
             <!-- Title -->
             <div class="uk-grid">
               <div [ngClass]="result.websiteURL && promoteWebsiteURL && !isMobile ? 'uk-flex uk-flex-between uk-width-1-1' : 'uk-width-expand'">
@@ -48,7 +48,7 @@
                     </a>
                   </span>
                 </div>
-                <div class="multi-line-ellipsis lines-3 uk-width-expand">
+                <div [class]="'uk-width-expand multi-line-ellipsis lines-'+(compactView ? '1' : '3')">
                   <h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
                     <a *ngIf="!externalUrl && result.id && !customUrl" (click)="onClick()" [queryParams]="addEoscPrevInParams(createParam())"
                       [routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand" [class.uk-disabled]="result.id == '-1'">
@@ -78,7 +78,7 @@
               </div>
             </div>
             <!-- Metadata -->
-            <div class="uk-margin-xsmall-top">
+            <div [class.uk-margin-xsmall-top]="!compactView">
               <entity-metadata [resultTitle]="result?.title"
                                [entityType]="type" [types]="result.types" [startYear]="result.startYear?.toString()"
                                [endYear]="result.endYear?.toString()"
@@ -96,7 +96,7 @@
             </div>
           </div>
           <!-- 2nd section (funders, budget, authors, PIDs, publisher etc.) -->
-          <div class="uk-text-small uk-margin-small-bottom">
+          <div class="uk-text-small" [class.uk-margin-small-bottom]="!compactView">
             <!-- Funder -->
             <div *ngIf="(result.funderShortname || result.funderName) || result.code" class="uk-margin-xsmall-bottom">
 						<span *ngIf="result.funderShortname || result.funderName">
@@ -114,7 +114,7 @@
               <!--  </span>-->
             </div>
             <!-- Funder Budget -->
-            <div *ngIf="result.budget || result.contribution" class="uk-margin-xsmall-bottom">
+            <div *ngIf="!compactView && (result.budget || result.contribution)" class="uk-margin-xsmall-bottom">
               <span *ngIf="result.budget">
                 <span class="uk-text-meta">Overall Budget: </span>
                             {{result.budget | number}}
@@ -132,11 +132,11 @@
                            [showAll]=true [showInline]="showInline"></showAuthors>
             </div>
             <!-- Identifiers -->
-            <div *ngIf="result.identifiers && result.identifiers.size > 0" class="uk-margin-xsmall-bottom">
+            <div *ngIf="!compactView && result.identifiers && result.identifiers.size > 0" class="uk-margin-xsmall-bottom">
               <showIdentifiers [identifiers]="result.identifiers"></showIdentifiers>
             </div>
             <!-- Website URL -->
-            <div *ngIf="result.websiteURL && result.websiteURL != '' && !promoteWebsiteURL"
+            <div *ngIf="!compactView && result.websiteURL && result.websiteURL != '' && !promoteWebsiteURL"
                  class="uk-margin-xsmall-bottom">
               <span class="uk-text-meta">Website URL: </span>
               <span>
@@ -146,7 +146,7 @@
               </span>
             </div>
             <!-- OAI-PMH URL-->
-            <div *ngIf="result.OAIPMHURL && result.OAIPMHURL != ''" class="uk-margin-xsmall-bottom">
+            <div *ngIf="!compactView && result.OAIPMHURL && result.OAIPMHURL != ''" class="uk-margin-xsmall-bottom">
               <span class="uk-text-meta">OAI-PMH URL: </span>
               <span>
               <a href="{{result.OAIPMHURL}}" target="_blank" class="custom-external">
@@ -156,7 +156,7 @@
             </div>
           </div>
           <!-- 3rd section (description) -->
-          <div class="uk-text-small uk-visible@m">
+          <div *ngIf="!compactView" class="uk-text-small uk-visible@m">
             <!-- Description -->
             <div *ngIf="result.description" class="multi-line-ellipsis lines-2">
               <p class="uk-margin-remove" [innerHTML]="result.description"></p>
@@ -177,7 +177,7 @@
         </div>
       </div>
       <div *ngIf="(result.hostedBy_collectedFrom || ((hasActions || result.measure?.bip.length || result.measure?.counts.length) && (!isDeletedByInferenceModal && showEntityActions)))"
-           class="uk-text-small uk-margin-top" [class.uk-border-bottom]="!isMobile">
+           class="uk-text-small" [class.uk-margin-top]="!compactView" [class.uk-border-bottom]="!isMobile">
         <div uk-grid class="uk-grid uk-grid-small uk-text-xsmall uk-flex-middle uk-margin-xsmall-bottom"
              [class.uk-flex-between]="!isDeletedByInferenceModal && (result.measure?.bip.length || result.measure?.counts.length) && (result.hostedBy_collectedFrom?.length || hasActions)"
              [class.uk-flex-right]="!isDeletedByInferenceModal && !(result.measure?.bip.length || result.measure?.counts.length) && (result.hostedBy_collectedFrom?.length || hasActions)"
@@ -191,12 +191,13 @@
                             [type]="result.resultType"
                             [result]="result" [id]="result.objId?result.objId:result.id"
                             [url]="properties.domain + properties.baseLink + url + '?' + urlParam + '=' + result.id"
-                            [showTooltip]="false">
+                            [showTooltip]="false" [compactView]="compactView">
               <span *ngIf="orcid">
                 <orcid-work *ngIf="showOrcid && result.identifiers && result.identifiers.size > 0"
                             [resultId]="result.relcanId" [resultTitle]="result.title"
                             [type]="result.resultType" [pageType]="'search'"
-                            [putCodes]="result.orcidPutCodes" [givenPutCode]="true" [identifiers]="result.identifiers">
+                            [putCodes]="result.orcidPutCodes" [givenPutCode]="true" [identifiers]="result.identifiers"
+                            [compactView]="compactView">
                 </orcid-work>
               </span>
               <span *ngIf="orcid" class="uk-width-expand uk-text-right">
@@ -226,7 +227,7 @@
                 <span *ngIf="result.oaRoutes.oaColor" class="dot" [ngClass]="result.oaRoutes.oaColor"></span>
                 <span *ngIf="result.oaRoutes.isInDiamondJournal" class="dot diamond"></span>
               </span>
-              <span class="uk-margin-xsmall-left">Access Routes</span>
+              <span *ngIf="!compactView" class="uk-margin-xsmall-left">Access Routes</span>
             </a>
             <div uk-drop="pos: top-right; mode: click" class="uk-drop">
               <div class="uk-card uk-card-default uk-border uk-box-no-shadow uk-padding-small">

utils/result-preview/result-preview.component.ts

@@ -43,6 +43,7 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
   @Input() showInline: boolean = false; // do not open modal for "view more" when this is true
   @Input() isDeletedByInferenceModal: boolean = false; // do not show action bar in results when in "Other versions" modal section
   @Input() showEntityActions: boolean = true; // we can use this instead of the above as it is more generic
+  @Input() compactView: boolean = false; // if true, show less info (e.g. hide description) on each result
 
   /* Metadata */
   public type: string;