MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Adds dashes on overview pages if fields are empty

This commit is contained in:
apapachristou 2020-09-10 18:36:46 +03:00
parent 0f126ec413
commit c0d3b471c0
7 changed files with 127 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.html
View File

@ -37,7 +37,8 @@
</div> </div>
<span *ngIf="lockStatus" class="ml-2 mr-2">.</span> <span *ngIf="lockStatus" class="ml-2 mr-2">.</span>
<div class="d-flex mr-2">{{'GENERAL.STATUSES.EDIT' | translate}} : <div class="d-flex mr-2">{{'GENERAL.STATUSES.EDIT' | translate}} :
{{dataset.modified | date:"longDate"}} <!-- {{dataset.modified | date:'longDate':'+0200': this.language.store.currentLang }} -->
{{dataset.modified | date:'longDate'}}
</div> </div>
<div class="d-flex ml-2 mr-4"> <div class="d-flex ml-2 mr-4">
<div *ngIf="dataset.status" class="d-flex flex-row uppercase"> <div *ngIf="dataset.status" class="d-flex flex-row uppercase">
@ -47,19 +48,13 @@
</div> </div>
</div> </div>
<div class="row mb-4 pb-3"> <div class="row mb-4 pb-3">
<button *ngIf="isAuthenticated()" (click)="openDmpSearchDialogue()" mat-mini-fab <button *ngIf="isAuthenticated()" (click)="openDmpSearchDialogue()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
class="mr-3 actions-btn" matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}"
matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon> <mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button> </button>
<button *ngIf="isDraftDataset(dataset) && !lockStatus" <button *ngIf="isDraftDataset(dataset) && !lockStatus" (click)="editClicked(dataset)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
(click)="editClicked(dataset)" mat-mini-fab class="mr-3 actions-btn"
matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">create</mat-icon> <mat-icon class="mat-mini-fab-icon">create</mat-icon>
</button> </button>
<button *ngIf="isUserDatasetRelated() && !lockStatus" (click)="deleteClicked()" mat-mini-fab <button *ngIf="isUserDatasetRelated() && !lockStatus" (click)="deleteClicked()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
class="mr-3 actions-btn" matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}"
matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">delete</mat-icon> <mat-icon class="mat-mini-fab-icon">delete</mat-icon>
</button> </button>
</div> </div>
@ -75,22 +70,26 @@
<div class="row header">{{'DMP-OVERVIEW.GRANT' | translate}}</div> <div class="row header">{{'DMP-OVERVIEW.GRANT' | translate}}</div>
<div class="row dataset-label">{{ dataset.grant.label }}</div> <div class="row dataset-label">{{ dataset.grant.label }}</div>
<div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div> <div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div>
<div class="row"> <div class="row">
<div *ngFor="let researcher of researchers; let last = last"> <div *ngFor="let researcher of researchers; let last = last">
<a href="{{ getOrcidPathForResearcher(researcher.reference) }}" target="blank" <a href="{{ getOrcidPathForResearcher(researcher.reference) }}" target="blank" class="researcher">
class="researcher">
<div class="id-btn">&nbsp;</div> <div class="id-btn">&nbsp;</div>
<div *ngIf="!last">{{ researcher.name }}, </div> <div *ngIf="!last">{{ researcher.name }}, </div>
<div *ngIf="last">{{ researcher.name }}</div> <div *ngIf="last">{{ researcher.name }}</div>
</a> </a>
</div> </div>
<span *ngIf="!researchers || researchers.length === 0" class="material-icons">horizontal_rule</span>
</div> </div>
<div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div> <div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
<div class="row" *ngIf="dataset.description"> <div class="row" *ngIf="dataset.description">
<p class="desc-txt">{{ dataset.description }}</p> <p class="desc-txt">{{ dataset.description }}</p>
</div> </div>
<div class="row" *ngIf="!dataset.description">
<span class="material-icons">horizontal_rule</span>
</div>
</div> </div>
<div class="col-md-4 col-lg-4 p-0"> <div class="col-md-4 col-lg-4 p-0">
<div class="frame mb-3 pt-4 pl-3 pr-5 pb-1"> <div class="frame mb-3 pt-4 pl-3 pr-5 pb-1">
@ -162,13 +161,10 @@
<p class="authors-role">{{ roleDisplay(user) }}</p> <p class="authors-role">{{ roleDisplay(user) }}</p>
</div> </div>
</div> </div>
<button *ngIf="isUserOwner && !dataset.status && user.role" <button *ngIf="isUserOwner && !dataset.status && user.role" (click)="removeUserFromDmp(user)" class="remove-btn">{{ 'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REMOVE' | translate}}</button>
(click)="removeUserFromDmp(user)"
class="remove-btn">{{ 'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REMOVE' | translate}}</button>
</div> </div>
</div> </div>
<div *ngIf="isUserOwner" (click)="openShareDialog(dataset.dmp.id, dataset.dmp.label)" <div *ngIf="isUserOwner" (click)="openShareDialog(dataset.dmp.id, dataset.dmp.label)" class="row mt-3 mb-3 d-flex align-items-center justify-content-center">
class="row mt-3 mb-3 d-flex align-items-center justify-content-center">
<button mat-raised-button class="invite-btn"> <button mat-raised-button class="invite-btn">
<mat-icon>group_add</mat-icon> <mat-icon>group_add</mat-icon>
{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}} {{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}
@ -179,4 +175,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>

2
dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.scss
View File

@ -69,7 +69,7 @@
.dmp-btn, .dmp-btn,
.dmp-btn > mat-icon { .dmp-btn > mat-icon {
color: #ffffff; color: #ffffff;
opacity: 0.8; // opacity: 0.8;
} }
.show-more-btn { .show-more-btn {

7
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
View File

@ -72,11 +72,15 @@
<div *ngIf="last">{{ researcher.name }}</div> <div *ngIf="last">{{ researcher.name }}</div>
</a> </a>
</div> </div>
<span *ngIf="!dmp.researchers || dmp.researchers.length === 0" class="material-icons">horizontal_rule</span>
</div> </div>
<div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div> <div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
<div class="row" *ngIf="dmp.description"> <div class="row" *ngIf="dmp.description">
<p class="desc-txt">{{ dmp.description }}</p> <p class="desc-txt">{{ dmp.description }}</p>
</div> </div>
<div class="row" *ngIf="!dmp.description">
<span class="material-icons">horizontal_rule</span>
</div>
<div class="row header">{{'DMP-OVERVIEW.DATASETS-USED' | translate}}</div> <div class="row header">{{'DMP-OVERVIEW.DATASETS-USED' | translate}}</div>
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div *ngFor="let dataset of dmp.datasets"> <div *ngFor="let dataset of dmp.datasets">
@ -89,6 +93,9 @@
</button> </button>
</a> </a>
</div> </div>
<div class="row" *ngIf="!dmp.datasets || dmp.datasets.length === 0">
<span class="material-icons">horizontal_rule</span>
</div>
</div> </div>
<div class="row mt-2 add-dataset-txt"> <div class="row mt-2 add-dataset-txt">
<a class="add-dataset-btn" *ngIf="isDraftDmp(dmp)" [routerLink]="['/new/dataset/' + dmp.id]" target="_blank"> <a class="add-dataset-btn" *ngIf="isDraftDmp(dmp)" [routerLink]="['/new/dataset/' + dmp.id]" target="_blank">

7
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
View File

@ -45,7 +45,7 @@
border-radius: 4px; border-radius: 4px;
justify-content: space-between; justify-content: space-between;
color: #212121; color: #212121;
opacity: 0.8; // opacity: 0.8;
} }
.show-more-btn { .show-more-btn {
@ -123,7 +123,6 @@
border-radius: 4px; border-radius: 4px;
font-size: 0.875em; font-size: 0.875em;
color: #ffffff; color: #ffffff;
opacity: 0.8;
} }
.label-txt { .label-txt {
@ -178,6 +177,10 @@
margin-right: 1em; margin-right: 1em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
letter-spacing: 0px;
color: #212121;
opacity: 0.8;
font-style: normal;
} }
.doi-label { .doi-label {

65
dmp-frontend/src/app/ui/misc/navigation/navigation.component.scss
View File

@ -1,43 +1,44 @@
@mixin navigation-component-theme($theme) { @mixin navigation-component-theme($theme) {
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
.navigation-bar { .navigation-bar {
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
width: 100%; width: 100%;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1000; z-index: 1000;
.active { .active {
color: mat-color($accent); color: mat-color($accent);
} }
.user-label { .user-label {
font-size: 14px; font-size: 14px;
} }
.app-logo { .app-logo {
margin-right: 30px; margin-right: 30px;
margin-left: 20px; margin-left: 20px;
} }
}
}
.progress-bar {
top: 64px;
left: 0;
position: fixed;
width: 100%;
z-index: 4;
}
.progress-bar {
top: 64px;
left: 0;
position: fixed;
width: 100%;
z-index: 4;
}
} }
.two-line-mat-option { .two-line-mat-option {
// height: 3.5em; // height: 3.5em;
line-height: 1.2em; line-height: 1.2em;
} }
.buttonNav:hover { .buttonNav:hover {
color: aliceblue; color: aliceblue;
}
} .login-label {
text-transform: uppercase;
}

2
dmp-frontend/src/app/ui/navbar/navbar.component.html
View File

@ -7,7 +7,7 @@
<div class="icon-bar2"></div> <div class="icon-bar2"></div>
<div class="icon-bar3"></div> <div class="icon-bar3"></div>
</div> </div>
<a class="logo"><img src="../../../assets/splash/assets/img/argos-logo-2.svg"></a> <a class="logo" [routerLink]="['home']"><img src="../../../assets/splash/assets/img/argos-logo-2.svg"></a>
<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()"> <button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()">
<mat-icon class="toggle-icon">view_headline</mat-icon> <mat-icon class="toggle-icon">view_headline</mat-icon>
</button> </button>

128
dmp-frontend/src/app/ui/navbar/navbar.component.scss
View File

@ -1,119 +1,123 @@
$mat-card-header-size: 40px !default; $mat-card-header-size: 40px !default;
.my-mat-card-avatar { .my-mat-card-avatar {
height: $mat-card-header-size; height: $mat-card-header-size;
width: $mat-card-header-size; width: $mat-card-header-size;
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
} }
.progress-bar { .progress-bar {
top: 80px; top: 80px;
left: 0; left: 0;
width: 100%; width: 100%;
position: fixed; position: fixed;
z-index: 4; z-index: 4;
} }
.fixed-navbar { .fixed-navbar {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
height: 80px; height: 80px;
display: flex; display: flex;
background: #ffffff 0% 0% no-repeat padding-box; background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 6px #00000029; box-shadow: 0px 0px 6px #00000029;
opacity: 1; opacity: 1;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
} }
.logo { .logo {
// width: 98px; // width: 98px;
// height: 37px; // height: 37px;
margin-top: 15px; margin-top: 15px;
margin-left: 5px; margin-left: 5px;
} }
.faq-title { .faq-title {
text-align: left; text-align: left;
font: Bold 15px/18px "Roboto"; font: Bold 15px/18px "Roboto";
letter-spacing: 0px; letter-spacing: 0px;
color: #000000; color: #000000;
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
} }
.faq-title:hover { .faq-title:hover {
color: #23bcba; color: #23bcba;
} }
.lang { .lang {
opacity: 0.8; opacity: 0.8;
} }
.hamburger { .hamburger {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
padding: 0.4rem 1.5rem 0rem; padding: 0.4rem 1.5rem 0rem;
} }
.icon-bar1, .icon-bar1,
.icon-bar2, .icon-bar2,
.icon-bar3 { .icon-bar3 {
width: 18px; width: 18px;
height: 2px; height: 2px;
background-color: #333; background-color: #333;
margin: 3px 0; margin: 3px 0;
transition: 0.4s; transition: 0.4s;
} }
.change .icon-bar1 { .change .icon-bar1 {
-webkit-transform: rotate(-45deg) translate(-3px, 3px); -webkit-transform: rotate(-45deg) translate(-3px, 3px);
transform: rotate(-45deg) translate(-3px, 3px); transform: rotate(-45deg) translate(-3px, 3px);
} }
.change .icon-bar2 { .change .icon-bar2 {
opacity: 0; opacity: 0;
} }
.change .icon-bar3 { .change .icon-bar3 {
-webkit-transform: rotate(45deg) translate(-4px, -4px); -webkit-transform: rotate(45deg) translate(-4px, -4px);
transform: rotate(45deg) translate(-4px, -4px); transform: rotate(45deg) translate(-4px, -4px);
} }
::ng-deep.lang-parent { ::ng-deep.lang-parent {
width: fit-content !important; width: fit-content !important;
min-width: auto !important; min-width: auto !important;
} }
.mat-dialog-container { .mat-dialog-container {
display: block; display: block;
padding: 24px; padding: 24px;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
outline: 0; outline: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: inherit; min-height: inherit;
max-height: inherit; max-height: inherit;
} }
.toggle-icon { .toggle-icon {
transform: scale(1.5); transform: scale(1.5);
} }
.list { .list {
list-style-type:none; list-style-type: none;
padding-left: 0px; padding-left: 0px;
} }
.list >li { .list > li {
padding: 5px; padding: 5px;
} }
.avatar { .avatar {
cursor: pointer; cursor: pointer;
}
.login-label {
text-transform: uppercase;
} }