Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix component for the gantt graphic

Browse Source
This commit is contained in:
Alessio
2020-06-22 17:00:39 +02:00
parent 9eefbe43cc
commit 04f67ac97c
7 changed files with 104 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Thermo.Active/wwwroot/assets/icons/png/ritardo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

Thermo.Active/wwwroot/assets/icons/png/ritardo@2x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

Thermo.Active/wwwroot/assets/icons/png/ritardo@3x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

Thermo.Active/wwwroot/assets/styles/base/gantt-component.less
+62 -55
View File
@@ -1,72 +1,79 @@
// out: false, sourceMap: false, main: ../style.less
@total_width: 200px;
@column-set: 45px (@total_width - (45px + 82px)) 82px;
@total_width: 400px;
@column-set : 45px (@total_width - (45px + 82px)) 82px;
.gantt_component{
height: 70px;
width: @total_width;
background-color: black;
display: grid;
grid-template-rows: 4px auto auto;
.gantt_component {
height : 70px;
width : @total_width;
background-color :#57636b;
display : grid;
grid-template-rows : 4px 40px auto;
grid-template-columns: @column-set;
border-radius: 10px;
border-radius : 10px;
div{
width: 100%;
grid-column-start: 1;
grid-column-end: -1;
&.second_row,&.third_row{
display: grid;
grid-template-columns: @column-set;
}
}
label{
margin: auto;
object-fit: contain;
label {
margin : auto;
object-fit : contain;
font-family: "Work Sans";
}
.first_row{
grid-row: 1;
.first_row {
grid-row : 1;
grid-column-start: 1;
grid-column-end : -1;
}
.second_row{
background-color: cadetblue;
grid-row: 2;
border-radius: 5px;
label{
grid-column: 2;
font-size: 16px;
font-weight: 500;
color: #545454;
}
img{
margin: auto;
grid-column: 1;
}
.second_row {
background-color: #c0c7cc;
grid-row : 2;
grid-column-start: 1;
grid-column-end : -1;
border-radius : 5px;
}
.third_row{
grid-row: 3;
.first_col {
grid-row-start : 2;
grid-row-end : -1;
grid-column : 1;
display : grid;
grid-template-rows: 1fr 1fr;
label{
img {
margin : auto;
grid-row: 1;
}
label {
grid-row : 2;
font-size: 18px;
color: white;
&:first-of-type{
grid-column:1;
}
&:last-of-type{
grid-column:2;
}
color : white;
}
}
.second_col {
grid-row-start : 2;
grid-row-end : -1;
grid-column : 2;
display : grid;
grid-template-rows: 1fr 1fr;
label {
&:first-of-type {
grid-row : 1;
font-size : 16px;
font-weight: 500;
color : #545454;
}
&:last-of-type {
grid-row : 2;
font-size: 18px;
color : white;
}
}
}
}
Thermo.Active/wwwroot/assets/styles/style.css
+35 -30
View File
@@ -4207,23 +4207,13 @@ article .box .body {
}
.gantt_component {
height: 70px;
width: 200px;
background-color: black;
width: 400px;
background-color: #57636b;
display: grid;
grid-template-rows: 4px auto auto;
grid-template-columns: 45px 73px 82px;
grid-template-rows: 4px 40px auto;
grid-template-columns: 45px 273px 82px;
border-radius: 10px;
}
.gantt_component div {
width: 100%;
grid-column-start: 1;
grid-column-end: -1;
}
.gantt_component div.second_row,
.gantt_component div.third_row {
display: grid;
grid-template-columns: 45px 73px 82px;
}
.gantt_component label {
margin: auto;
object-fit: contain;
@@ -4231,35 +4221,50 @@ article .box .body {
}
.gantt_component .first_row {
grid-row: 1;
grid-column-start: 1;
grid-column-end: -1;
}
.gantt_component .second_row {
background-color: cadetblue;
background-color: #c0c7cc;
grid-row: 2;
grid-column-start: 1;
grid-column-end: -1;
border-radius: 5px;
}
.gantt_component .second_row label {
.gantt_component .first_col {
grid-row-start: 2;
grid-row-end: -1;
grid-column: 1;
display: grid;
grid-template-rows: 1fr 1fr;
}
.gantt_component .first_col img {
margin: auto;
grid-row: 1;
}
.gantt_component .first_col label {
grid-row: 2;
font-size: 18px;
color: white;
}
.gantt_component .second_col {
grid-row-start: 2;
grid-row-end: -1;
grid-column: 2;
display: grid;
grid-template-rows: 1fr 1fr;
}
.gantt_component .second_col label:first-of-type {
grid-row: 1;
font-size: 16px;
font-weight: 500;
color: #545454;
}
.gantt_component .second_row img {
margin: auto;
grid-column: 1;
}
.gantt_component .third_row {
grid-row: 3;
}
.gantt_component .third_row label {
.gantt_component .second_col label:last-of-type {
grid-row: 2;
font-size: 18px;
color: white;
}
.gantt_component .third_row label:first-of-type {
grid-column: 1;
}
.gantt_component .third_row label:last-of-type {
grid-column: 2;
}
.dashboard {
font-family: "Work Sans";
height: calc(100% - 60px);
Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.ts
+1
View File
@@ -11,4 +11,5 @@ export default class GanttComponent extends Vue{
estimated_duration:number;
@Prop({default:"null"})
tag:string;
}
Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.vue
+6 -6
View File
@@ -1,13 +1,13 @@
<template>
<div class="gantt_component">
<div class="first_row">
</div>
<div class="second_row">
<div class="first_row"></div>
<span class="second_row"></span>
<div class="first_col">
<img src="assets/icons/png/clessidra.png" />
<label>{{tag}}</label>
</div>
<div class="third_row">
<label>{{estimated_delay}}s</label>
</div>
<div class="second_col">
<label>{{tag}}</label>
<label>{{estimated_duration}}s</label>
</div>
</div>