[Library | Trunk]: Change download from and search results base on UI/UX suggestions

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59160 d315682c-612b-4755-9ff5-7f18f6832af3

landingPages/landing-utils/availableOn.component.ts

@@ -48,14 +48,22 @@ import {properties} from "../../../../environments/environment";
     <div *ngIf="showNum > threshold" class="uk-margin-bottom">
       <a (click)="showNum = threshold;" class="uk-flex uk-flex-middle uk-flex-center">
         <span>View less</span>
-        <span class="space" uk-icon="chevron-down"></span>
+        <span class="space uk-icon">
+          <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="chevron-up">
+            <polyline fill="none" stroke="#000" stroke-width="1.03" points="4 13 10 7 16 13"></polyline>
+          </svg>
+        </span>
       </a>
     </div>
     <!--    <div *ngIf="showNum == threshold && availableOn && availableOn.length > 5">...</div>-->
     <div *ngIf="showNum == threshold && availableOn && availableOn.length > 5" class="uk-margin-bottom">
       <a (click)="showNum = availableOn.length;" class="uk-flex uk-flex-middle uk-flex-center">
         <span>View more</span>
-        <span class="space" uk-icon="chevron-down"></span>
+        <span class="space uk-icon">
+          <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="chevron-down">
+            <polyline fill="none" stroke="#000" stroke-width="1.03" points="16 7 10 13 4 7"></polyline>
+          </svg>
+        </span>
       </a>
     </div>
   `

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

@@ -34,8 +34,7 @@ declare var UIkit: any;
       </mat-form-field>
       <div *ngIf="selectedStyle">
         <div id="citation" class="box-content uk-margin-small-top uk-overflow-auto uk-padding-small" [innerHTML]=citationText></div>
-        <button
+        <button class="clipboard_btn uk-button uk-button-small copy uk-margin-small-top uk-icon uk-float-right"
-            class="clipboard_btn uk-button uk-button-small uk-button-secondary uk-margin-small-top uk-icon uk-float-right"
             data-clipboard-target="#citation" title="Copy to clipboard">
           <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1">
             <rect fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect>

searchPages/searchUtils/searchResult.component.html

@@ -1,7 +1,7 @@
 <ul [class]="'uk-list uk-margin uk-margin-top '+custom_class">
   <errorMessages [status]="[status]" [type]="'results'"></errorMessages>
   <li *ngFor="let result of previewResults" class="uk-animation-fade">
-    <div class="uk-card uk-card-default uk-padding uk-card-hover">
+    <div class="uk-card uk-card-default uk-card-hover">
       <result-preview [properties]="properties" [showOrganizations]="showOrganizations"
                       [showSubjects]="showSubjects" [result]="result">
       </result-preview>

utils/authors/showAuthors.component.ts

@@ -29,38 +29,40 @@ import {properties} from "../../../../environments/environment";
             <b class="uk-margin-top">{{author.fullName}}</b>
             <div>
               <div class="uk-text-muted uk-margin-small-bottom uk-margin-small-top">ORCID</div>
-              <span><input #element class="uk-padding-small uk-disabled" name="code"
+              <div uk-height-match="target: .target">
-                           [value]="author.orcid"></span>{{" "}}
+                <input #element class="uk-padding-small uk-padding-remove-vertical uk-disabled target" name="code" [value]="author.orcid">
-              <span class="space">
+                <button [class]="'uk-button target uk-button-small uk-icon copy orcid_clipboard_btn_auhtor_'+i"
-                <button
-                    [class]="'uk-button uk-button-primary uk-button-small orcid_clipboard_btn_auhtor_'+i"
                     (click)="copyToClipboard(element)" title="Copy to clipboard">
-                  Copy
+                  <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="copy">
+                    <rect fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect>
+                    <polyline fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline>
+                  </svg>
                 </button>
-                <a class="uk-button uk-button-primary uk-button-small space" title="Visit author in Orcid"
+                <a class="uk-button custom-icon-button target uk-button-icon uk-margin-small-left"
-                   [href]="properties.orcidURL+author.orcid" target="_blank">
+                   title="Visit author in Orcid" [href]="properties.orcidURL+author.orcid" target="_blank">
-                  Visit
+                  <span class="custom-icon custom-external-white"></span>
                 </a>
-              </span>
+              </div>
             </div>
 
             <hr>
             <div class="uk-margin-top">
-              Search <b>{{author.fullName}}</b> by <b>ORCID</b> in OpenAIRE's
+              Search <b>{{author.fullName}}</b> in OpenAIRE
             </div>
             <div class="uk-text-center uk-margin-small uk-margin-large-left uk-margin-large-right">
-              <a class="uk-button uk-button-small portal-button uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1"
+              <a class="uk-button uk-button-small portal-button uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1"
                  (click)="onClick()"
                  [queryParams]="routerHelper.createQueryParams(['orcid','oc'],[author['orcid'],'and'])"
                  routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults">
-                  Research outcomes
+                <span class="space">Search</span>
               </a>
             </div>
         </div>
         </span>
       <span *ngIf="numberOfAuthors == authorsLimit && authors.length > authorsLimit">	... </span>
     </div>
-    <div *ngIf="authors && showAll && numberOfAuthors == authorsLimit && authors.length > authorsLimit" class="uk-width-1-1 uk-text-right">
+    <div *ngIf="authors && showAll && numberOfAuthors == authorsLimit && authors.length > authorsLimit"
+         class="uk-width-1-1 uk-text-right">
       <a (click)="numberOfAuthors = authors.length;">
         View all {{authors.length | number}} authors
       </a>
@@ -105,7 +107,7 @@ export class ShowAuthorsComponent {
   }
   
   public onClick() {
-    if(this.modal) {
+    if (this.modal) {
       this.modal.cancel();
     }
   }

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

@@ -9,7 +9,9 @@
         </a>
     </span>
     <div class="uk-text-small">
-      <span class="uk-text-capitalize">
+      <span *ngIf="type" class="uk-text-capitalize type">{{type}}</span>
+      <span *ngIf="type && beforeTitle.length > 0"> . </span>
+      <span *ngIf="beforeTitle.length > 0" class="uk-text-capitalize">
         {{beforeTitle.join(' . ')}}
       </span>
       <span *ngIf="result.embargoEndDate && result.embargoEndDate != ''">
@@ -49,10 +51,6 @@
         </div>
         <hr  *ngIf="result.websiteURL && promoteWebsiteURL">
       </h5>
-      <!-- Authors -->
-      <div *ngIf="result.authors">
-        <showAuthors [authors]="result.authors" [authorsLimit]=10 [modal]="modal" [showAll]=false></showAuthors>
-      </div>
     </div>
     <!-- Funder -->
     <div *ngIf="result.funderShortname || result.code" class="uk-margin-small-bottom uk-text-small">
@@ -131,6 +129,11 @@
             class="uk-label custom-label  label-danger" title="OpenAIRE Compatibility">Not yet registered</span>
       {{' '}}
     </div>
+    <!-- Authors -->
+    <div *ngIf="result.authors" class="uk-flex uk-text-small">
+      <div class="uk-text-muted">Authors: </div>
+      <showAuthors class="space" [authors]="result.authors" [authorsLimit]=10 [modal]="modal" [showAll]=false></showAuthors>
+    </div>
     <!-- Identifiers -->
     <div *ngIf="result.identifiers && result.identifiers.size > 0" class="uk-margin-bottom">
       <showIdentifiers [identifiers]="result.identifiers" [properties]="properties"></showIdentifiers>

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

@@ -19,6 +19,7 @@ export class ResultPreviewComponent implements OnInit{
   public routerHelper: RouterHelper = new RouterHelper();
   public urlParam: string;
   public url: string;
+  public type: string;
   public beforeTitle: string[] = [];
   public dataProviderUrl = properties.searchLinkToDataProvider.split('?')[0];
   
@@ -59,7 +60,7 @@ export class ResultPreviewComponent implements OnInit{
   
   public initBeforeTitle() {
     if(this.result.resultType && this.result.resultType !== 'dataprovider') {
-      this.beforeTitle.push(this.getTypeName(this.result.resultType));
+      this.type = this.getTypeName(this.result.resultType);
     }
     if(this.result.types) {
       this.removeUnknown(this.removeDuplicates(this.result.types)).forEach(type => {