MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add new icon for restricted. Change tabs base on new guidelines. Change how-to base on new mocks

This commit is contained in:
Konstantinos Triantafyllou 2022-02-23 00:37:18 +02:00
parent f3ff37c74c
commit 13fee133e4
11 changed files with 72 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
monitor/how/how.component.css
View File

@ -5,6 +5,8 @@
.how .first > div:first-child:after {
content: "we";
font-size: 20px;
font-weight: 600;
text-align: center;
padding-bottom: 5%;
position: absolute;
@ -19,17 +21,19 @@
.how .second > div:first-child {
position: relative;
padding: 0 22% 0 22%;
padding: 0 10% 0 20%;
}
.how .second > div:first-child:after {
content: "and";
font-size: 20px;
font-weight: 600;
text-align: center;
padding-bottom: 5%;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/2.svg");
right: -10%;
top: 31%;
right: -17%;
top: 33%;
width: 30%;
background-size: contain;
background-repeat: no-repeat;
@ -41,20 +45,22 @@
}
.how .third > div:first-child {
padding: 0 12% 0 12%;
padding: 0 14% 0 13%;
}
.how .third:after {
content: "on which";
font-size: 20px;
font-weight: 600;
padding-right: 30%;
padding-top: 5%;
padding-bottom: 5%;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
bottom: 6%;
left: 6%;
bottom: -6%;
left: 13%;
transform: translateY(100%);
width: 55%;
width: 140px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
@ -66,17 +72,19 @@
.how .fourth > div:first-child {
position: relative;
padding: 0 15% 0 15%;
padding: 0 16% 0 16%;
}
.how .fourth> div:first-child:after {
content: "and";
font-size: 20px;
font-weight: 600;
text-align: center;
padding-bottom: 5%;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/4.svg");
left: -18%;
top: 35%;
top: 36%;
width: 30%;
background-size: contain;
background-repeat: no-repeat;
@ -84,7 +92,7 @@
}
.how .fifth {
padding: 10% 2% 0 2%;
padding: 11% 2% 0 2%;
}
.how .fifth > div:first-child {
@ -93,6 +101,8 @@
.how .fifth > div:first-child:after {
content: "We";
font-size: 20px;
font-weight: 600;
text-align: center;
padding-bottom: 5%;
position: absolute;
@ -125,7 +135,7 @@
content: "";
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg");
left: -20%;
left: -26%;
top: -20%;
height: 70%;
width: 30%;
@ -136,32 +146,17 @@
.how .final > div:first-child:after {
content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
font-size: 20px;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/how/circle.png");
right: -220px;
top: -20%;
width: 300px;
padding: 8% 0 5% 220px;
top: 30%;
width: 250px;
padding: 8% 0 5% 0;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
}
}
@media only screen and (min-width: 960px) {
.how .third:after {
bottom: -6%;
}
}
@media only screen and (min-width: 1200px) {
.how .third:after {
bottom: -10%;
left: 25%;
width: 25%;
}
}
@media only screen and (max-width: 639px) {
.how .first {
position: relative;
@ -171,11 +166,11 @@
.how .first:after {
content: "we";
text-align: center;
padding: 25px 105px 25px 0;
padding: 10% 34% 10% 0;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 26%;
top: 72%;
top: 79%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
@ -183,17 +178,17 @@
.how .second {
position: relative;
padding: 0 15% 30% 15%;
padding: 0 10% 30% 10%;
}
.how .second:after {
content: "and";
text-align: center;
padding: 25px 105px 25px 0;
padding: 10% 34% 10% 0;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 25%;
top: 70%;
top: 80%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
@ -206,12 +201,13 @@
.how .third:after {
content: "on which";
font-weight: bold;
text-align: center;
padding: 25px 105px 25px 0;
padding: 10% 41% 10% 0;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 17%;
top: 75%;
left: 15%;
top: 83%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
@ -229,7 +225,7 @@
.how .fourth:after {
content: "and";
text-align: center;
padding: 25px 105px 25px 0;
padding: 10% 34% 10% 0;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 26%;
@ -247,7 +243,7 @@
.how .fifth:after {
content: "We";
text-align: center;
padding: 25px 105px 25px 0;
padding: 10% 34% 10% 0;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 27%;
@ -277,8 +273,8 @@
content: "";
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg");
left: 32%;
top: -80%;
left: 34%;
top: -70%;
height: 70%;
width: 30%;
background-size: contain;
@ -288,12 +284,12 @@
.how .final > div:first-child:after {
content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
text-align: center;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/how/circle.png");
left: -62%;
top: 85%;
width: 300px;
padding: 12% 0 0 70%;
padding: 12% 0 0 54%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;

4
monitor/how/how.component.ts
View File

@ -9,7 +9,7 @@ import {Component} from "@angular/core";
<div>
<img src="assets/common-assets/monitor-assets/how/1.png" loading="lazy">
</div>
<div class="uk-text-center">
<div class="uk-text-center uk-text-large">
<span class="uk-text-uppercase uk-text-bold">Starting</span> from existing<br>research-related data sources
</div>
</div>
@ -22,7 +22,7 @@ import {Component} from "@angular/core";
<div>
<img src="assets/common-assets/monitor-assets/how/3.png" loading="lazy">
</div>
<div class="uk-text-center">
<div class="uk-text-center uk-text-large">
build an open, global<br>and trusted Research graph
</div>
</div>

4
searchPages/searchUtils/newSearchPage.component.html
View File

@ -112,7 +112,7 @@
' uk-position-relative ' :(' uk-section ' ))+'}':null)">
<div [class]="' uk-background-norepeat uk-background-bottom-center uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
+ (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') && !dashboard ?
' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section' : '')
' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section uk-section-small' : '')
+(simpleView?'':' advancedSearchFormBackground ')">
<!-- TODO - Kostis until here-->
<div class="uk-width-1-1">
@ -122,7 +122,7 @@
</div>
</div>
<div class="uk-position-relative">
<div class="uk-container uk-container-large uk-section" id="searchForm">
<div class="uk-container uk-container-large uk-section uk-section-small uk-margin-bottom" id="searchForm">
<advanced-search-form
[entityType]="entityType"
[fieldIds]="fieldIds"

2
searchPages/searchUtils/portal-search-result.component.html
View File

@ -98,7 +98,7 @@
</modal-alert>
<ng-template #resultPreview let-result="result">
<div class="uk-flex uk-flex-center">
<img *ngIf="result.logoUrl" [src]="result | logoUrl"
<img *ngIf="result.logoUrl" [src]="result | logoUrl" class="uk-blend-multiply"
[alt]="((result.title)?result.title:result.shortTitle) + ' logo'" loading="lazy">
</div>
</ng-template>

2
searchPages/searchUtils/portal-search-result.component.ts
View File

@ -23,7 +23,7 @@ export class PortalSearchResultComponent implements OnInit{
@ViewChild('AlertModal') modal;
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
["PRIVATE", 'incognito'],
["RESTRICTED", 'group']
["RESTRICTED", 'restricted']
]);
public urlParam: string;
public errorCodes: ErrorCodes = new ErrorCodes();

4
searchPages/searchUtils/portal-search-result.module.ts
View File

@ -9,7 +9,7 @@ import {ManageModule} from "../../utils/manage/manage.module";
import {IconsModule} from "../../utils/icons/icons.module";
import {UrlPrefixModule} from "../../utils/pipes/url-prefix.module";
import {IconsService} from "../../utils/icons/icons.service";
import {incognito} from "../../utils/icons/icons";
import {incognito, restricted} from "../../utils/icons/icons";
import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
@NgModule({
@ -29,6 +29,6 @@ import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
})
export class PortalSearchResultModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([incognito])
this.iconsService.registerIcons([incognito, restricted])
}
}

5
utils/icons/icons.ts
View File

@ -153,3 +153,8 @@ export const incognito = {
name: 'incognito',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24.51 19.525"><g id="Group_13376" data-name="Group 13376" transform="translate(-428.81 -3863.018)"><path id="Path_104500" data-name="Path 104500" d="M44.68,105.185H43.024a23.507,23.507,0,0,0-9.194-.158V106a3.909,3.909,0,0,1,1.264,1.668c.455,1.119.2,3.05,4.148,3.289s4-4.041,4.034-4.438.577-.372.577-.372.541-.021.579.372.09,4.673,4.034,4.438,3.693-2.17,4.146-3.289A3.9,3.9,0,0,1,53.879,106v-.969A23.686,23.686,0,0,0,44.68,105.185Z" transform="translate(397.218 3771.582)" fill="#2c2c2c"/><path id="Path_104501" data-name="Path 104501" d="M41.867,35.784H40.326s-1.95-6.217-2.207-6.735a2.8,2.8,0,0,0-2.591-2.061c-1.92-.266-2.138,1.225-3.544,1.268-1.406-.049-1.617-1.546-3.542-1.268a2.817,2.817,0,0,0-2.592,2.061c-.246.518-2.205,6.735-2.205,6.735H22.1a2.31,2.31,0,0,0-2.371,2.245H44.24A2.311,2.311,0,0,0,41.867,35.784Z" transform="translate(409.08 3836.064)" fill="#2c2c2c"/></g></svg>'
}
export const restricted = {
name: 'restricted',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g id="noun-remove-file-3557544" transform="translate(-176.397 -106.4)"><path id="Path_104600" data-name="Path 104600" d="M181.881,274.166A5.485,5.485,0,1,0,178,272.559,5.484,5.484,0,0,0,181.881,274.166Zm-3.548-5.484a3.531,3.531,0,0,1,.452-1.729l4.839,4.839a3.548,3.548,0,0,1-5.29-3.11Zm7.1,0a3.527,3.527,0,0,1-.452,1.729l-4.839-4.839a3.548,3.548,0,0,1,5.29,3.11Z" transform="translate(0 -147.766)" fill="#4b4b4b"/><path id="Path_104601" data-name="Path 104601" d="M245.859,106.4a2.258,2.258,0,0,0-2.258,2.258v4.516h1.936v-4.516a.323.323,0,0,1,.323-.323h8.064v3.871h3.871v11.935a.323.323,0,0,1-.323.323h-5.484V126.4h5.484a2.259,2.259,0,0,0,2.258-2.258v-13.3l-4.439-4.439Z" transform="translate(-63.333)" fill="#4b4b4b"/></g></svg>'
}

25
utils/section-scroll/section-scroll.component.css
View File

@ -1,20 +1,3 @@
/*.section {*/
/*position: relative;*/
/*height: auto;*/
/*display: flex;*/
/*}*/
/*.section [top] {*/
/* !*height: 80vh;*!*/
/* !*border: 1px solid rebeccapurple;*!*/
/*}*/
/*.section [top] {*/
/* top: 0;*/
/* height: auto;*/
/* !*border: 1px solid deeppink;*!*/
/*}*/
[left] {
position: -webkit-sticky; /* Safari */
position: sticky;
@ -33,9 +16,13 @@
}
@media (max-width: 960px) {
[left] {
height: 50vh;
}
[left] .imgContainer {
top: 5%;
height: 40%;
height: 80%;
}
[left] > * {
@ -62,4 +49,4 @@
[scroll] > * {
height: 60vh;
/* border: 1px solid darkorange;*/
}
}

13
utils/section-scroll/section-scroll.component.ts
View File

@ -67,8 +67,8 @@ export class SectionScrollComponent implements AfterViewInit {
threshold: this.buildThresholdList()
};
Array.from(this.map.values()).forEach(value => {
this.left.set(value, document.getElementById(value));
this.left.get(value).style.display = 'none';
let element = document.getElementById(value);
this.left.set(value, element);
})
Array.from(this.map.keys()).forEach(key => {
this.scroll.set(key, document.getElementById(key));
@ -80,15 +80,8 @@ export class SectionScrollComponent implements AfterViewInit {
if (this.left.has(id) && this.lastElementId !== id) {
if(entry.isIntersecting) {
this.lastElementId = id;
Array.from(this.left.keys()).forEach(element => {
if (element !== id) {
this.left.get(element).style.display = 'none';
} else {
this.left.get(element).style.display = 'block';
}
});
}
// this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio);
this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio);
}
});
}, options);

15
utils/tabs/tab.component.ts
View File

@ -14,23 +14,10 @@ export interface TabIcon {
@Component({
selector: 'my-tab',
// styles: [
// `
// .pane{
// padding: 1em;
// }
// `
// ],
template: `
<!-- [class]="active ? 'uk-active' : ''" [hidden]="!active"-->
<!-- <div [class]="active ? 'uk-active' : ''" [hidden]="!active">-->
<div class="pane">
<div>
<ng-content></ng-content>
</div>
<!-- <div [hidden]="!active" class="pane">-->
<!-- <ng-content></ng-content>-->
<!-- </div>-->
`
})
export class TabComponent {

33
utils/tabs/tabs.component.ts
View File

@ -2,44 +2,29 @@
* The main component that renders single TabComponent
* instances.
*/
import {
Component,
ContentChildren,
QueryList,
AfterContentInit, Output, EventEmitter,
} from '@angular/core';
import { TabComponent } from './tab.component';
import {Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
import {TabComponent} from './tab.component';
@Component({
selector: 'my-tabs',
template: `
<ul [class]="(tabs.toArray().length > 2 ? 'uk-visible@m' : '') + ' uk-tab main-tabs uk-margin-remove uk-child-width-expand'"
uk-tab uk-switcher="connect: .tabs-content" uk-height-match="target: .tab-header">
<li *ngFor="let tab of tabs.toArray(); let i=index"
[class]="'uk-padding-remove '+ tab.customClass + (i == 0?' uk-active':'')"
(click)="selectTab(tab)">
<a class="uk-width-1-1 uk-height-1-1" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
<ul class="uk-tab" [ngClass]="customClass" uk-tab="connect: .tabs-content">
<li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="i === 0" (click)="selectTab(tab)">
<a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon" [fill]="tab.tabIcon" class="uk-margin-small-bottom"></icon>
<div class="tab-header">{{tab.title}}</div>
<div>{{tab.title}}</div>
<div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
<div *ngIf="tab.customClass == 'statistics'" class="number">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"></path>
</svg>
</div>
</a>
</li>
</ul>
<div [class]="(tabs.toArray().length > 2 ? 'uk-visible@m' : '') + ' uk-switcher tabs-content main-tabs-content'">
<div class="uk-switcher tabs-content">
<ng-content></ng-content>
</div>
`
})
export class TabsComponent {
@Input()
public customClass: string;
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();