[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
This commit is contained in:
parent
003a720502
commit
11860054a0
|
@ -1 +1 @@
|
||||||
Subproject commit 65f8676a0800997f7e8a5c24f96a050bdb65504e
|
Subproject commit a2706af35d413c867fa3a93f28b58023725fae51
|
|
@ -41,9 +41,9 @@
|
||||||
<!-- STAKEHOLDERS -->
|
<!-- 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 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 *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"
|
<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>
|
</result-preview>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,8 +9,14 @@
|
||||||
placeholder="Search for {{typeAsLabel}} {{entities.stakeholders}}" [disabled]="stakeholders.length === 0" class="uk-width-1-2@m uk-width-1-1">
|
placeholder="Search for {{typeAsLabel}} {{entities.stakeholders}}" [disabled]="stakeholders.length === 0" class="uk-width-1-2@m uk-width-1-1">
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="stakeholders.length > 0" class="uk-flex uk-flex-middle uk-position-right">
|
<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>
|
<button (click)="gridView = true" [class.uk-button-primary]="gridView"
|
||||||
<a (click)="gridView = false" [ngClass]="gridView ? '' : 'active'" class="uk-link-reset">List</a>
|
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>
|
</div>
|
||||||
<div class="uk-flex uk-flex-middle uk-flex-between uk-margin-large-top">
|
<div class="uk-flex uk-flex-middle uk-flex-between uk-margin-large-top">
|
||||||
|
|
|
@ -8,13 +8,14 @@ import {LoadingModule} from "../../openaireLibrary/utils/loading/loading.module"
|
||||||
import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";
|
import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";
|
||||||
import {PagingModule} from "../../openaireLibrary/utils/paging.module";
|
import {PagingModule} from "../../openaireLibrary/utils/paging.module";
|
||||||
import {LogoUrlPipeModule} from "../../openaireLibrary/utils/pipes/logoUrlPipe.module";
|
import {LogoUrlPipeModule} from "../../openaireLibrary/utils/pipes/logoUrlPipe.module";
|
||||||
|
import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [CommonModule, LoadingModule, SearchInputModule, InputModule, PagingModule,
|
imports: [CommonModule, LoadingModule, SearchInputModule, InputModule, PagingModule,
|
||||||
LogoUrlPipeModule,
|
LogoUrlPipeModule,
|
||||||
RouterModule.forChild([
|
RouterModule.forChild([
|
||||||
{path: '', component: BrowseStakeholdersComponent, canDeactivate: [PreviousRouteRecorder]}
|
{path: '', component: BrowseStakeholdersComponent, canDeactivate: [PreviousRouteRecorder]}
|
||||||
])],
|
]), IconsModule],
|
||||||
declarations: [BrowseStakeholdersComponent],
|
declarations: [BrowseStakeholdersComponent],
|
||||||
exports: [BrowseStakeholdersComponent]
|
exports: [BrowseStakeholdersComponent]
|
||||||
})
|
})
|
||||||
|
|
|
@ -5,6 +5,10 @@
|
||||||
|
|
||||||
// Elements
|
// Elements
|
||||||
@import "button";
|
@import "button";
|
||||||
|
@import "progress";
|
||||||
|
|
||||||
|
// Layouts
|
||||||
|
@import "card";
|
||||||
|
|
||||||
// Navs
|
// Navs
|
||||||
@import "navbar";
|
@import "navbar";
|
||||||
|
|
|
@ -1 +1,2 @@
|
||||||
@background-primary-background-gradient: none;
|
@background-primary-background-gradient: none;
|
||||||
|
@background-muted-background: @table-color;
|
||||||
|
|
|
@ -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 */
|
/* Primary */
|
||||||
@button-primary-background: @global-primary-background;
|
@button-primary-background: @global-primary-background;
|
||||||
@button-primary-background-gradient: none;
|
@button-primary-background-gradient: none;
|
||||||
@button-primary-color: @global-inverse-color;
|
@button-primary-color: @global-inverse-color;
|
||||||
@button-primary-box-shadow: @global-medium-box-shadow;
|
|
||||||
@button-primary-border: transparent;
|
@button-primary-border: transparent;
|
||||||
@button-primary-hover-background: @global-secondary-background;
|
@button-primary-hover-background: @global-secondary-background;
|
||||||
@button-primary-hover-background-gradient: none;
|
@button-primary-hover-background-gradient: none;
|
||||||
@button-primary-hover-color: @global-inverse-color;
|
@button-primary-hover-color: @global-inverse-color;
|
||||||
@button-primary-hover-box-shadow: @global-small-box-shadow;
|
|
||||||
@button-primary-hover-border: transparent;
|
@button-primary-hover-border: transparent;
|
||||||
|
|
||||||
/* Secondary */
|
/* Secondary */
|
||||||
@button-secondary-background: @global-secondary-background;
|
@button-secondary-background: @global-secondary-background;
|
||||||
@button-secondary-background-gradient: none;
|
@button-secondary-background-gradient: none;
|
||||||
@button-secondary-color: @global-inverse-color;
|
@button-secondary-color: @global-inverse-color;
|
||||||
@button-secondary-box-shadow: @global-medium-box-shadow;
|
|
||||||
@button-secondary-border: @global-secondary-background;
|
@button-secondary-border: @global-secondary-background;
|
||||||
@button-secondary-hover-background: @global-inverse-color;
|
@button-secondary-hover-background: @global-inverse-color;
|
||||||
@button-secondary-hover-background-gradient: none;
|
@button-secondary-hover-background-gradient: none;
|
||||||
@button-secondary-hover-color: @global-secondary-background;
|
@button-secondary-hover-color: @global-secondary-background;
|
||||||
@button-secondary-hover-box-shadow: @global-small-box-shadow;
|
|
||||||
@button-secondary-hover-border: @global-secondary-background;
|
@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;
|
||||||
|
|
|
@ -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;
|
|
@ -7,7 +7,7 @@
|
||||||
@secondary-color: @irish-global-secondary-color;
|
@secondary-color: @irish-global-secondary-color;
|
||||||
@ciel-color: #EBF4F2;
|
@ciel-color: #EBF4F2;
|
||||||
@default-color: #F9FBFC;
|
@default-color: #F9FBFC;
|
||||||
|
@light-border: #F4F3F5;
|
||||||
|
|
||||||
@funder-color: #4D276F;
|
@funder-color: #4D276F;
|
||||||
@organization-color: #762243;
|
@organization-color: #762243;
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
@progress-height: 8px;
|
||||||
|
@progress-bar-background: @success-color;
|
||||||
|
@progress-border-radius: 50px;
|
|
@ -3,9 +3,13 @@
|
||||||
/** Backgrounds */
|
/** Backgrounds */
|
||||||
@global-primary-gradient: radial-gradient(farthest-corner at 50% 25%, @primary-light-color 0%, @primary-dark-color 100%);
|
@global-primary-gradient: radial-gradient(farthest-corner at 50% 25%, @primary-light-color 0%, @primary-dark-color 100%);
|
||||||
|
|
||||||
/** Border */
|
/** Borders */
|
||||||
@global-border: @gray-300;
|
@global-border: @gray-300;
|
||||||
|
|
||||||
|
/* Shadows */
|
||||||
|
@global-default-shadow: 2px 2px 5px #00000014;
|
||||||
|
|
||||||
|
|
||||||
/* Controls */
|
/* Controls */
|
||||||
@global-control-small-height: 25px;
|
@global-control-small-height: 25px;
|
||||||
@global-control-height: 33px;
|
@global-control-height: 33px;
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
Subproject commit 7aa9e577193e3a77415434fd5e6e856a21d5efeb
|
Subproject commit b64262cb3bb5a5f326054771dcc03237b0957409
|
|
@ -14,7 +14,7 @@ let props: EnvProperties = {
|
||||||
piwikSiteId: "407",
|
piwikSiteId: "407",
|
||||||
enablePiwikTrack:false,
|
enablePiwikTrack:false,
|
||||||
piwikBaseUrl: 'https://beta.analytics.openaire.eu/piwik.php?idsite=',
|
piwikBaseUrl: 'https://beta.analytics.openaire.eu/piwik.php?idsite=',
|
||||||
disableFrameLoad: true,
|
disableFrameLoad: false,
|
||||||
adminToolsPortalType: 'irish',
|
adminToolsPortalType: 'irish',
|
||||||
adminToolsCommunity: 'irish',
|
adminToolsCommunity: 'irish',
|
||||||
domain: "http://mpagasas.di.uoa.gr:5500",
|
domain: "http://mpagasas.di.uoa.gr:5500",
|
||||||
|
|
Loading…
Reference in New Issue