MaDgIK
/
irish-monitor
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

[master | DONE | ADDED] engagement & training: add class helptext for events (cards)

This commit is contained in:
Alex Martzios 2024-04-10 16:32:08 +03:00
parent 6a0b9f9c06
commit 6c4ecbf946
8 changed files with 96 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 0111ea668179f643ed4ac5b91881d9185733b8e8
Subproject commit 609f09cc9ff3505fc509d00805b987394a4f3215

63
src/app/resources/engagement/engagement.component.html
View File

@ -15,64 +15,11 @@
</div>
</div>
</div>
<div class="uk-section uk-container uk-position-relative uk-background-default">
<div class="uk-grid uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-1 uk-margin-large-top" uk-grid>
<div>
<div class="uk-card uk-card-default card webinar">
<div class="info uk-border-box uk-border-rounded uk-blur-background uk-flex uk-flex-column uk-flex-between uk-padding-small uk-light">
<div>
<span class="uk-label uk-label-small webinar uk-padding-xsmall">Webinar</span>
<div class="uk-text-large uk-text-bold uk-margin-small-top">1st Stakeholder Webinar</div>
</div>
<div>
<a href="https://zenodo.org/records/8370579" target="_blank" class="uk-button uk-button-text uk-margin-medium-top">Learn more</a>
</div>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default card webinar">
<div class="info uk-border-box uk-border-rounded uk-blur-background uk-flex uk-flex-column uk-flex-between uk-padding-small uk-light">
<div>
<span class="uk-label uk-label-small webinar uk-padding-xsmall">Webinar</span>
<div class="uk-text-large uk-text-bold uk-margin-small-top">2nd Stakeholder Webinar</div>
</div>
<div>
<a href="https://zenodo.org/records/10862912" target="_blank" class="uk-button uk-button-text uk-margin-medium-top">Learn more</a>
</div>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default card training">
<div class="info uk-border-box uk-border-rounded uk-blur-background uk-flex uk-flex-column uk-flex-between uk-padding-small uk-light">
<div>
<span class="uk-label uk-label-small training uk-padding-xsmall">Training</span>
<span class="uk-label uk-label-small funder uk-padding-xsmall uk-margin-xsmall-left">RFO</span>
<div class="uk-text-large uk-light uk-text-bold uk-margin-small-top">RFO Training</div>
</div>
<div>
<a href="https://zenodo.org/records/10202641" target="_blank" class="uk-button uk-button-text uk-margin-medium-top">Learn more</a>
</div>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default card training">
<div class="info uk-border-box uk-border-rounded uk-blur-background uk-flex uk-flex-column uk-flex-between uk-padding-small uk-light">
<div>
<span class="uk-label uk-label-small training uk-padding-xsmall">Training</span>
<span class="uk-label uk-label-small organization uk-padding-xsmall uk-margin-xsmall-left">RPO</span>
<div class="uk-text-large uk-light uk-text-bold uk-margin-small-top">RPO Training</div>
</div>
<div>
<a href="https://zenodo.org/records/10143613" target="_blank" class="uk-button uk-button-text uk-margin-medium-top">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<ng-container *ngIf="divContents">
<helper [texts]="divContents['events']"></helper>
</ng-container>
<div class="uk-flex uk-child-width-1-1 uk-child-width-1-2@m uk-margin-large-top">
<div class="uk-section">
<div class="uk-width-1-1 uk-width-1-2@m uk-margin-auto" [ngClass]="isMobile ? 'uk-container' : ''">

70
src/app/resources/engagement/engagement.component.less
View File

@ -1,9 +1,6 @@
@import (reference) "~src/assets/extend-theme/less/_import-variables.less";
@import (reference) "~src/assets/openaire-theme/less/mixin.less";
@training-color: #A8B9FF;
@webinar-color: #E0C44F;
.graphics {
grid-gap: 40px;
@ -28,39 +25,6 @@
}
}
.card {
height: 325px;
background-repeat: no-repeat;
background-position: center;
&.webinar {
background-image: url("~/src/assets/irish-assets/resources/resources-green.png");
}
&.training {
background-image: url("~/src/assets/irish-assets/resources/resources-pink-blue.png");
}
.info {
height: 50%;
.set-blur-background(@dark-color, 50%, brightness(0.5) blur(20px));
a {
display: none;
}
}
&:hover {
.info {
height: 100%;
a {
display: inline-block;
}
}
}
}
@media (max-width: @breakpoint-small-max) {
.graphics {
grid-gap: 20px;
@ -85,38 +49,4 @@
}
}
}
.card {
height: unset;
.info {
height: 100%;
a {
display: inline-block;
}
}
}
}
.uk-label.training {
background-color: @training-color;
border-color: @training-color;
}
.uk-label.webinar {
background-color: @webinar-color;
border-color: @webinar-color;
}
.uk-label.funder {
background-color: @funder-color;
border-color: @funder-color;
color: @global-inverse-color;
}
.uk-label.organization {
background-color: @organization-color;
border-color: @organization-color;
color: @global-inverse-color;
}

12
src/app/resources/engagement/engagement.component.ts
View File

@ -6,6 +6,7 @@ import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
@Component({
selector: 'engagement',
@ -16,6 +17,7 @@ export class EngagementComponent extends BaseComponent implements OnInit {
title = 'Engagement & Training';
description = 'Engagement & Training';
breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - engagement & training'}];
divContents: any;
isMobile: boolean = false;
@ -26,7 +28,8 @@ export class EngagementComponent extends BaseComponent implements OnInit {
protected _title: Title,
protected _router: Router,
private cdr: ChangeDetectorRef,
private layoutService: LayoutService) {
private layoutService: LayoutService,
private helper: HelperService) {
super();
}
@ -36,5 +39,12 @@ export class EngagementComponent extends BaseComponent implements OnInit {
this.isMobile = isMobile;
this.cdr.detectChanges();
});
this.getDivContents();
}
private getDivContents() {
this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'irish', '/engagement-training').subscribe(contents => {
this.divContents = contents;
}));
}
}

3
src/app/resources/engagement/engagement.module.ts
View File

@ -3,6 +3,7 @@ import {CommonModule} from "@angular/common";
import {EngagementComponent} from "./engagement.component";
import {RouterModule} from "@angular/router";
import {BreadcrumbsModule} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
import {HelperModule} from "../../openaireLibrary/utils/helper/helper.module";
@NgModule({
declarations: [EngagementComponent],
@ -10,7 +11,7 @@ import {BreadcrumbsModule} from "../../openaireLibrary/utils/breadcrumbs/breadcr
{
path: '', component: EngagementComponent
}
]), BreadcrumbsModule],
]), BreadcrumbsModule, HelperModule],
exports: [EngagementComponent]
})
export class EngagementModule {

1
src/app/resources/methodology/terminology.component.ts
View File

@ -59,7 +59,6 @@ export class TerminologyComponent extends BaseComponent{
private getDivContents() {
this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'irish', '/methodology/terminology').subscribe(contents => {
this.divContents = contents;
console.log(this.divContents);
}));
}
}

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 43ed7e267915bcae7f3ab03fab8c98136810f269
Subproject commit 9171ec2a63d1fb53f239cfbff26f9b3a1ed9cc61

76
src/styles.less
View File

@ -33,3 +33,79 @@ svg .a {
opacity: 0.5;
}
}
// Engagement & Training
.events {
@training-color: #A8B9FF;
@webinar-color: #E0C44F;
.card {
height: 325px;
background-repeat: no-repeat;
background-position: center;
&.webinar {
background-image: url("~/src/assets/irish-assets/resources/resources-green.png");
}
&.training {
background-image: url("~/src/assets/irish-assets/resources/resources-pink-blue.png");
}
.info {
height: 50%;
.set-blur-background(@dark-color, 50%, brightness(0.5) blur(20px));
a {
display: none;
}
}
&:hover {
.info {
height: 100%;
a {
display: inline-block;
}
}
}
}
@media (max-width: @breakpoint-small-max) {
.card {
height: unset;
.info {
height: 100%;
a {
display: inline-block;
}
}
}
}
.uk-label.training {
background-color: @training-color;
border-color: @training-color;
}
.uk-label.webinar {
background-color: @webinar-color;
border-color: @webinar-color;
}
.uk-label.funder {
background-color: @funder-color;
border-color: @funder-color;
color: @global-inverse-color;
}
.uk-label.organization {
background-color: @organization-color;
border-color: @organization-color;
color: @global-inverse-color;
}
}