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>
<span *ngIf="lockStatus" class="ml-2 mr-2">.</span>
<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 class="d-flex ml-2 mr-4">
<div *ngIf="dataset.status" class="d-flex flex-row uppercase">
@ -47,19 +48,13 @@
</div>
</div>
<div class="row mb-4 pb-3">
<button *ngIf="isAuthenticated()" (click)="openDmpSearchDialogue()" mat-mini-fab
class="mr-3 actions-btn" matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}"
matTooltipPosition="above">
<button *ngIf="isAuthenticated()" (click)="openDmpSearchDialogue()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button>
<button *ngIf="isDraftDataset(dataset) && !lockStatus"
(click)="editClicked(dataset)" mat-mini-fab class="mr-3 actions-btn"
matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
<button *ngIf="isDraftDataset(dataset) && !lockStatus" (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>
</button>
<button *ngIf="isUserDatasetRelated() && !lockStatus" (click)="deleteClicked()" mat-mini-fab
class="mr-3 actions-btn" matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}"
matTooltipPosition="above">
<button *ngIf="isUserDatasetRelated() && !lockStatus" (click)="deleteClicked()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
</button>
</div>
@ -75,22 +70,26 @@
<div class="row header">{{'DMP-OVERVIEW.GRANT' | translate}}</div>
<div class="row dataset-label">{{ dataset.grant.label }}</div>
<div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div>
<div class="row">
<div *ngFor="let researcher of researchers; let last = last">
<a href="{{ getOrcidPathForResearcher(researcher.reference) }}" target="blank"
class="researcher">
<a href="{{ getOrcidPathForResearcher(researcher.reference) }}" target="blank" class="researcher">
<div class="id-btn">&nbsp;</div>
<div *ngIf="!last">{{ researcher.name }}, </div>
<div *ngIf="last">{{ researcher.name }}</div>
</a>
</div>
<span *ngIf="!researchers || researchers.length === 0" class="material-icons">horizontal_rule</span>
</div>
<div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
<div class="row" *ngIf="dataset.description">
<p class="desc-txt">{{ dataset.description }}</p>
</div>
<div class="row" *ngIf="!dataset.description">
<span class="material-icons">horizontal_rule</span>
</div>
</div>
<div class="col-md-4 col-lg-4 p-0">
<div class="frame mb-3 pt-4 pl-3 pr-5 pb-1">
@ -162,13 +161,10 @@
<p class="authors-role">{{ roleDisplay(user) }}</p>
</div>
</div>
<button *ngIf="isUserOwner && !dataset.status && user.role"
(click)="removeUserFromDmp(user)"
class="remove-btn">{{ 'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REMOVE' | translate}}</button>
<button *ngIf="isUserOwner && !dataset.status && user.role" (click)="removeUserFromDmp(user)" class="remove-btn">{{ 'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REMOVE' | translate}}</button>
</div>
</div>
<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">
<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">
<button mat-raised-button class="invite-btn">
<mat-icon>group_add</mat-icon>
{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}
@ -179,4 +175,4 @@
</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 > mat-icon {
color: #ffffff;
opacity: 0.8;
// opacity: 0.8;
}
.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>
</a>
</div>
<span *ngIf="!dmp.researchers || dmp.researchers.length === 0" class="material-icons">horizontal_rule</span>
</div>
<div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
<div class="row" *ngIf="dmp.description">
<p class="desc-txt">{{ dmp.description }}</p>
</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="d-flex flex-column">
<div *ngFor="let dataset of dmp.datasets">
@ -89,6 +93,9 @@
</button>
</a>
</div>
<div class="row" *ngIf="!dmp.datasets || dmp.datasets.length === 0">
<span class="material-icons">horizontal_rule</span>
</div>
</div>
<div class="row mt-2 add-dataset-txt">
<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;
justify-content: space-between;
color: #212121;
opacity: 0.8;
// opacity: 0.8;
}
.show-more-btn {
@ -123,7 +123,6 @@
border-radius: 4px;
font-size: 0.875em;
color: #ffffff;
opacity: 0.8;
}
.label-txt {
@ -178,6 +177,10 @@
margin-right: 1em;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0px;
color: #212121;
opacity: 0.8;
font-style: normal;
}
.doi-label {

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

@ -1,43 +1,44 @@
@mixin navigation-component-theme($theme) {
$accent: map-get($theme, accent);
$accent: map-get($theme, accent);
.navigation-bar {
overflow: hidden;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
.navigation-bar {
overflow: hidden;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
.active {
color: mat-color($accent);
}
.active {
color: mat-color($accent);
}
.user-label {
font-size: 14px;
}
.user-label {
font-size: 14px;
}
.app-logo {
margin-right: 30px;
margin-left: 20px;
}
}
.progress-bar {
top: 64px;
left: 0;
position: fixed;
width: 100%;
z-index: 4;
}
.app-logo {
margin-right: 30px;
margin-left: 20px;
}
}
.progress-bar {
top: 64px;
left: 0;
position: fixed;
width: 100%;
z-index: 4;
}
}
.two-line-mat-option {
// height: 3.5em;
line-height: 1.2em;
// height: 3.5em;
line-height: 1.2em;
}
.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-bar3"></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()">
<mat-icon class="toggle-icon">view_headline</mat-icon>
</button>

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

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