[master]: Add grid and list buttons in browse page. Fix cards in browse pages to align with the theme. Extend buttons, cards, progress and backgrounds base on mocks

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 65f8676a0800997f7e8a5c24f96a050bdb65504e
+Subproject commit a2706af35d413c867fa3a93f28b58023725fae51

src/app/repository/browse-repositories/browse-repositories.component.html

@@ -41,12 +41,12 @@
     <!-- STAKEHOLDERS -->
     <div class="uk-grid uk-grid-small uk-child-width-1-2@m uk-child-width-1-1" uk-grid uk-height-match="target: .uk-card;">
       <div *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
-        <div class="uk-border uk-border-rounded">
+        <div>
           <result-preview *ngIf="item.details" [result]="getResultPreview(item.details)" [properties]="properties" 
-            [showEntityActions]="false" [customUrl]="item.alias" [isMobile]="isMobile">
+            [showEntityActions]="false" [customUrl]="item.alias" [isMobile]="isMobile" [modifier]="'uk-card-default'">
           </result-preview>
         </div>
       </div>
     </div>
   </div>
-</div>
+</div>

src/app/shared/browse-stakeholders/browse-stakeholders.component.html

@@ -9,8 +9,14 @@
       placeholder="Search for {{typeAsLabel}} {{entities.stakeholders}}" [disabled]="stakeholders.length === 0" class="uk-width-1-2@m uk-width-1-1">
     </div>
     <div *ngIf="stakeholders.length > 0" class="uk-flex uk-flex-middle uk-position-right">
-      <a (click)="gridView = true" [ngClass]="gridView ? 'active' : ''" class="uk-link-reset uk-margin-small-right">Grid</a>
-      <a (click)="gridView = false" [ngClass]="gridView ? '' : 'active'" class="uk-link-reset">List</a>
+      <button (click)="gridView = true" [class.uk-button-primary]="gridView"
+              class="uk-icon-button uk-button-default uk-border-rounded uk-icon-button-small">
+        <icon name="apps" [flex]="true" type="round" [ratio]="1.2"></icon>
+      </button>
+      <button (click)="gridView = false" [class.uk-button-primary]="!gridView"
+              class="uk-icon-button uk-button-default uk-border-rounded uk-icon-button-small uk-margin-small-left">
+        <icon name="view_list" [flex]="true" type="round" [ratio]="1.2"></icon>
+      </button>
     </div>
   </div>
   <div class="uk-flex uk-flex-middle uk-flex-between uk-margin-large-top">

src/app/shared/browse-stakeholders/browse-stakeholders.module.ts

@@ -8,13 +8,14 @@ import {LoadingModule} from "../../openaireLibrary/utils/loading/loading.module"
 import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";
 import {PagingModule} from "../../openaireLibrary/utils/paging.module";
 import {LogoUrlPipeModule} from "../../openaireLibrary/utils/pipes/logoUrlPipe.module";
+import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
 
 @NgModule({
   imports: [CommonModule, LoadingModule, SearchInputModule, InputModule, PagingModule,
     LogoUrlPipeModule,
     RouterModule.forChild([
       {path: '', component: BrowseStakeholdersComponent, canDeactivate: [PreviousRouteRecorder]}
-  ])],
+    ]), IconsModule],
   declarations: [BrowseStakeholdersComponent],
   exports: [BrowseStakeholdersComponent]
 })

src/assets/extend-theme/less/_import.less

@@ -5,6 +5,10 @@
 
 // Elements
 @import "button";
+@import "progress";
+
+// Layouts
+@import "card";
 
 // Navs
 @import "navbar";

src/assets/extend-theme/less/background.less

@@ -1 +1,2 @@
 @background-primary-background-gradient: none;
+@background-muted-background: @table-color;

src/assets/extend-theme/less/button.less

@@ -1,23 +1,36 @@
+@button-shadow: none;
+@button-hover-shadow: none;
+@button-active-shadow: none;
+
+/* Default */
+@button-default-box-shadow: none;
+@button-default-border: @global-border;
+@button-default-hover-color: @button-default-color;
+@button-default-hover-box-shadow: none;
+@button-default-hover-border: @global-color;
+
 /* Primary */
 @button-primary-background: @global-primary-background;
 @button-primary-background-gradient: none;
 @button-primary-color: @global-inverse-color;
-@button-primary-box-shadow: @global-medium-box-shadow;
 @button-primary-border: transparent;
 @button-primary-hover-background: @global-secondary-background;
 @button-primary-hover-background-gradient: none;
 @button-primary-hover-color: @global-inverse-color;
-@button-primary-hover-box-shadow: @global-small-box-shadow;
 @button-primary-hover-border: transparent;
 
 /* Secondary */
 @button-secondary-background: @global-secondary-background;
 @button-secondary-background-gradient: none;
 @button-secondary-color: @global-inverse-color;
-@button-secondary-box-shadow: @global-medium-box-shadow;
 @button-secondary-border: @global-secondary-background;
 @button-secondary-hover-background: @global-inverse-color;
 @button-secondary-hover-background-gradient: none;
 @button-secondary-hover-color: @global-secondary-background;
-@button-secondary-hover-box-shadow: @global-small-box-shadow;
 @button-secondary-hover-border: @global-secondary-background;
+
+
+/* Inverse */
+@inverse-button-box-shadow: none;
+@inverse-button-hover-box-shadow: none;
+@inverse-button-active-box-shadow: none;

src/assets/extend-theme/less/card.less

@@ -0,0 +1,9 @@
+@card-border-radius: @global-small-border-radius;
+@card-box-shadow-m: none;
+@card-hover-box-shadow: none;
+
+
+@card-default-border: @light-border;
+@card-default-border-width-m: @card-default-border-width;
+@card-default-hover-background: @card-hover-background;
+@card-default-hover-border: @global-primary-background;

src/assets/extend-theme/less/color.less

@@ -7,7 +7,7 @@
 @secondary-color: @irish-global-secondary-color;
 @ciel-color: #EBF4F2;
 @default-color: #F9FBFC;
-
+@light-border: #F4F3F5;
 
 @funder-color: #4D276F;
 @organization-color: #762243;

src/assets/extend-theme/less/progress.less

@@ -0,0 +1,3 @@
+@progress-height: 8px;
+@progress-bar-background: @success-color;
+@progress-border-radius: 50px;

src/assets/extend-theme/less/variables.less

@@ -3,9 +3,13 @@
 /** Backgrounds */
 @global-primary-gradient: radial-gradient(farthest-corner at 50% 25%, @primary-light-color 0%, @primary-dark-color 100%);
 
-/** Border */
+/** Borders */
 @global-border: @gray-300;
 
+/* Shadows */
+@global-default-shadow:  2px 2px 5px #00000014;
+
+
 /* Controls */
 @global-control-small-height: 25px;
 @global-control-height: 33px;

src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit 7aa9e577193e3a77415434fd5e6e856a21d5efeb
+Subproject commit b64262cb3bb5a5f326054771dcc03237b0957409

src/environments/environment.ts

@@ -14,7 +14,7 @@ let props: EnvProperties = {
   piwikSiteId: "407",
   enablePiwikTrack:false,
   piwikBaseUrl: 'https://beta.analytics.openaire.eu/piwik.php?idsite=',
-  disableFrameLoad: true,
+  disableFrameLoad: false,
   adminToolsPortalType: 'irish',
   adminToolsCommunity: 'irish',
   domain: "http://mpagasas.di.uoa.gr:5500",