Skip to content
Snippets Groups Projects
Commit 91d2e2d4 authored by ddamiron's avatar ddamiron
Browse files

update css in info and error cards

parent cb110d88
Branches
Tags
2 merge requests!11New updated datalog,!14Version 1.3.0
<div class="columns is-centered is-marginless">
<div class="column is-3 has-text-left is-marginless">
<div class="column is-4 has-text-left is-marginless">
<div class="table entity-list-table is-marginless" >
<div class="header columns is-marginless is-multiline is-vcentered">
......@@ -11,18 +11,21 @@
<div class="data-list">
<div *ngFor="let oneStepData of allStepsData; let i=index; let odd=odd; let even=even;">
<div *ngIf="oneStepData" [ngClass]="{ odd: odd, even: even }" (click)='getLogsSelector(oneStepData._id.step, oneStepData.counts);'>
<div class="data columns is-multiline is-vcentered is-marginless" [ngClass]="{'is-selected': displayedStep === oneStepData._id.step}">
<div class="data columns is-multiline is-vcentered is-marginless" [ngClass]="{ odd: odd, even: even, 'is-selected': displayedStep === oneStepData._id.step }" >
<div class="column is-6 has-text-left">
<br>
<p [ngClass]="{'is-selected': displayedStep === oneStepData._id.step}">
Etape: {{oneStepData._id.step}}</p>
<span class="bold-text"> Etape : </span>
{{oneStepData._id.step}}</p>
<br>
<p [ngClass]="{'is-selected': displayedStep === oneStepData._id.step}">
Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
<span class="bold-text"> Durée : </span>
{{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
{{oneStepData.totalSecondsSpent}}s</p>
<br>
<p [ngClass]="{'is-selected': displayedStep === oneStepData._id.step}">
Info(s): {{oneStepData.counts.INFO ? oneStepData.counts.INFO : 0 }}</p>
<span class="bold-text"> Info(s) : </span>
{{oneStepData.counts.INFO ? oneStepData.counts.INFO : 0 }}</p>
<br>
</div>
<div class="column is-6 has-text-right">
......@@ -38,24 +41,26 @@
</svg>
</div>
<p [ngClass]="{'is-selected': displayedStep === oneStepData._id.step}">
<br> Erreur(s): {{oneStepData.counts.ERROR ? oneStepData.counts.ERROR : 0}}</p>
<br>
<span class="bold-text"> Erreur(s) : </span>
{{oneStepData.counts.ERROR ? oneStepData.counts.ERROR : 0}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="column is-9 has-text-left">
<div class="column is-8 has-text-left">
<div class="table entity-list-table is-marginless" *ngIf="allErrorLogs[0] ; else noErrors">
<div class="header columns is-marginless is-multiline is-centered is-vcentered">
<div class="column is-2 has-text-left">
logs d'erreur pour {{allErrorLogs[0].step}}</div>
<div class="column is-10 has-text-centered">
<div class="column is-10 has-text-centered">
<app-paginator [length]="paginator.length" [pageSize]="paginator.limit"
[pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5"
[showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)">
......@@ -67,13 +72,21 @@
<div class="data columns is-multiline is-vcentered is-marginless" [ngClass]="{ odd: odd, even: even }">
<div class="columns is-marginless">
<div class="column is-12 has-text-left">
<p>étape: {{oneErrorLog.step}}</p>
<p>
<span class="bold-text"> Etape : </span>
{{oneErrorLog.step}}</p>
<br>
<p>status: {{oneErrorLog.status}}</p>
<p>
<span class="bold-text"> Status : </span>
{{oneErrorLog.status}}</p>
<br>
<p>info: {{oneErrorLog.info}}</p>
<p>
<span class="bold-text"> Info : </span>
{{oneErrorLog.info}}</p>
<br>
<p>progression: {{oneErrorLog.progress_ratio}}</p>
<p>
<span class="bold-text"> Progression : </span>
{{oneErrorLog.progress_ratio}}</p>
</div>
</div>
</div>
......@@ -81,10 +94,10 @@
</div>
<ng-template #noErrors class="is-centered is-marginless" >
<p>Pas d'erreurs</p>
<p>Pas d'erreurs</p>
</ng-template>
<div>
</div>
</div>
</div>
\ No newline at end of file
</div>
......@@ -9,7 +9,7 @@ figure {
display: inline-block;
margin-top: 1.25rem;
}
.card-header-title {
justify-content: center;
}
......@@ -26,7 +26,7 @@ figure {
background-color: greenyellow;
}
.mini-error-card{
margin-top: 1.25rem;
padding: 1.25rem;
......@@ -58,6 +58,10 @@ figure {
}
.is-selected{
background-color: $tomato-color;
color: white !important;
background-color: $tomato-color !important; //to override odd or even class css
color: white;
}
.bold-text {
font-weight:bold;
display:inline;
}
<div class="columns is-centered is-marginless">
<div class="column is-3 has-text-left is-marginless">
<div class="column is-4 has-text-left is-marginless">
<div class="table entity-list-table is-marginless" *ngIf="allLogs; else noLogs">
<div class="header columns is-marginless is-multiline is-vcentered">
......@@ -11,18 +11,22 @@
<div class="data-list">
<div *ngFor="let oneStepData of allStepsData; let i=index; let odd=odd; let even=even;">
<div *ngIf="oneStepData" [ngClass]="{odd: odd, even: even}" (click)='getLogsSelector(oneStepData._id.step, oneStepData.counts);'>
<div class="data columns is-multiline is-vcentered is-marginless" [ngClass]="{'is-selected': displayedStep === oneStepData._id.step}">
<div class="data columns is-multiline is-vcentered is-marginless" [ngClass]="{ odd: odd, even: even, 'is-selected': displayedStep === oneStepData._id.step }" >
<div class="column is-6 has-text-left">
<br>
<p [ngClass]="{'is-selected': displayedStep === oneStepData._id.step}">
Etape: {{oneStepData._id.step}}</p>
<span class="bold-text">Etape : </span>
{{oneStepData._id.step}}</p>
<br>
<p [ngClass]="{'is-selected': displayedStep === oneStepData._id.step}" >
Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
{{oneStepData.totalSecondsSpent}}s</p>
<span class="bold-text">Durée : </span>
{{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
{{oneStepData.totalSecondsSpent}}s
</p>
<br>
<p [ngClass]="{'is-selected': displayedStep === oneStepData._id.step}">
Info(s): {{oneStepData.counts.INFO ? oneStepData.counts.INFO : 0 }}</p>
<span class="bold-text">Info(s) : </span>
{{oneStepData.counts.INFO ? oneStepData.counts.INFO : 0 }}</p>
<br>
</div>
<div class="column is-6 has-text-right">
......@@ -38,7 +42,8 @@
</svg>
</div>
<p [ngClass]="{'is-selected': displayedStep === oneStepData._id.step}">
<br> Erreur(s):
<br>
<span class="bold-text">Erreur(s) : </span>
{{ oneStepData.counts.ERROR ? oneStepData.counts.ERROR : 0}}
</div>
</div>
......@@ -53,12 +58,12 @@
</div>
<div class="column is-9 has-text-left">
<div class="column is-8 has-text-left">
<div class="table entity-list-table is-marginless" *ngIf="allLogs">
<div class="header columns is-marginless is-multiline is-centered is-vcentered">
<div class="column is-3 has-text-left">
<div class="column is-2 has-text-left">
logs pour {{allLogs[0].step}}</div>
<div class="column is-9 has-text-left">
<div class="column is-10 has-text-left">
<app-paginator [length]="paginator.length" [pageSize]="paginator.limit"
[pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5"
[showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)">
......@@ -70,13 +75,21 @@
<div class="data columns is-multiline is-vcentered is-marginless" [ngClass]="{ odd: odd, even: even }">
<div class="columns is-marginless">
<div class="column is-12 has-text-left">
<p>step: {{oneLog.step}}</p>
<p>
<span class="bold-text">Step : </span>
{{oneLog.step}}</p>
<br>
<p>status: {{oneLog.status}}</p>
<p>
<span class="bold-text">Status : </span>
{{oneLog.status}}</p>
<br>
<p>info: {{oneLog.info}}</p>
<p>
<span class="bold-text">Info : </span>
{{oneLog.info}}</p>
<br>
<p>progression: {{oneLog.progress_ratio}}</p>
<p>
<span class="bold-text">Progression : </span>
{{oneLog.progress_ratio}}</p>
</div>
</div>
</div>
......
......@@ -9,7 +9,7 @@ figure {
display: inline-block;
margin-top: 1.25rem;
}
.card-header-title {
justify-content: center;
}
......@@ -25,7 +25,7 @@ figure {
background-color: greenyellow;
}
.mini-error-card{
margin-top: 1.25rem;
padding: 1.25rem;
......@@ -61,6 +61,11 @@ figure {
margin:0;
}
.is-selected{
background-color: $tomato-color;
background-color: $tomato-color !important; //to override odd or even class css
color: white;
}
\ No newline at end of file
}
.bold-text {
font-weight:bold;
display:inline;
}
<div class="section page-container">
<app-page-header [pageInfo]="pageHeaderInfo" [goToThisUrl]='previousUrl' [hideBackButton]="false"></app-page-header>
<p>slug: {{slug}} &nbsp;&nbsp;&nbsp;</p>
<p>uuid: {{uuid}} </p>
<p> sessionId: {{sessionId}} </p>
<span class="bold-text">slug : </span>
<span> {{slug}}</span>
<br>
<span class="bold-text">uuid : </span>
<span> {{uuid}} </span>
<br>
<span class="bold-text">sessionId : </span>
<span> {{sessionId}} </span>
<hr>
<ul class="tabs-container">
<li *ngFor="let tab of tabs" (click)="tabsToggler(tab.name)" [ngClass]="{'is-active':tab.isActive}">
......
......@@ -9,7 +9,7 @@ figure {
display: inline-block;
margin-top: 20px;
}
.card-header-title {
justify-content: center;
}
......@@ -39,6 +39,12 @@ figure {
}
}
}
.bold-text {
font-weight:bold;
display:inline;
}
.tabs-container {
display: flex;
align-content: stretch;
......@@ -134,4 +140,5 @@ figure {
.hidden {
display: none;
}
}
\ No newline at end of file
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment