@osfarm/itineraire-technique 1.0.5 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/css/styles-rendering.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
div.mainITKContainer{container-type:inline-size;container-name:myparent}div.mainITKContainer .left-transcript{display:none;width:50
|
|
1
|
+
div.mainITKContainer{container-type:inline-size;container-name:myparent;line-height:1rem}div.mainITKContainer .left-transcript{display:none;width:50%;font-family:Segoe UI}div.mainITKContainer .chart-div{width:100%}div.mainITKContainer .bottom-transcript{display:block;font-family:Segoe UI}@container myparent (min-width: 800px){div.mainITKContainer .left-transcript{display:block}div.mainITKContainer .chart-div{width:50%}div.mainITKContainer .bottom-transcript{display:none}}@container myparent (min-width: 1200px){div.mainITKContainer .left-transcript{display:block;width:40%}div.mainITKContainer .chart-div{width:60%}div.mainITKContainer .bottom-transcript{display:none}}div.mainITKContainer div.rotation_item{background-color:#f8fafc;border-left:#fff 14px solid;border-radius:7px;padding:8px 3px 5px 9px;margin:12px 0;overflow-x:hidden}div.mainITKContainer div.rotation_item.highlighted{box-shadow:0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),0px 1px 16px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16));background-color:#f0f3f5}div.mainITKContainer div.rotation_item div.step-header h4{margin-bottom:0;margin-top:0}div.mainITKContainer div.rotation_item div.step-header div.step_dates{font-size:11px;background-color:#cdcccc;color:#fff;margin:5px;padding:2px 5px;border-radius:5px;height:20px;float:right}div.mainITKContainer div.rotation_item div.step-header div.collapse-button{border-radius:50%;width:30px;height:30px;text-align:center;padding:5px 0px;margin:0 5px 3px 0;cursor:pointer;background:#dfe6f7;color:#7a8bad;float:right;transition:transform .3s ease-in-out}div.mainITKContainer div.rotation_item .step_description{clear:both}div.mainITKContainer div.rotation_item.show-all div.collapse-button{transform:rotate(180deg)}div.mainITKContainer div.rotation_item.show-all div.details{max-height:10000px}div.mainITKContainer div.rotation_item div.details{max-height:0px;overflow:hidden;transition:max-height .3s ease-in-out}div.mainITKContainer div.rotation_item div.details div.intervention{background-color:#fff;border-radius:5px;margin-bottom:11px;padding:13px;cursor:pointer}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_title{font-weight:bold}div.mainITKContainer div.rotation_item div.details div.intervention span.intervention_date{color:#707070;background-color:#f0f3f5;float:right}div.mainITKContainer div.rotation_item div.details div.intervention div.intervention_description{margin-top:5px}div.mainITKContainer div.rotation_item .step-edit{display:none}div.mainITKContainer .charts{width:100%;height:500px;display:inline-block}div.mainITKContainer .transcript{font-size:80%;width:100%;max-height:450px;overflow-y:scroll;scroll-behavior:smooth;padding:3px}/*# sourceMappingURL=styles-rendering.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../scss/styles-rendering.scss"],"names":[],"mappings":"AAAA,qBACI,2BACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../scss/styles-rendering.scss"],"names":[],"mappings":"AAAA,qBACI,2BACA,wBACA,iBAEA,sCACI,aACA,UACA,qBAGJ,gCACI,WAGJ,wCACI,cACA,qBAGJ,uCACI,sCACI,cAGJ,gCACI,UAGJ,wCACI,cAIR,wCACI,sCACI,cACA,UAGJ,gCACI,UAGJ,wCACI,cAIR,uCACI,yBACA,4BACA,kBACA,wBACA,cACA,kBAEA,mDACI,8HAEA,yBAIA,0DACI,gBACA,aAGJ,sEACI,eACA,yBACA,WACA,WACA,gBACA,kBACA,YACA,YAGJ,2EACI,kBACA,WACA,YACA,kBACA,gBACA,mBACA,eACA,mBACA,cACA,YACA,qCAIR,yDACI,WAIA,oEACI,yBAGJ,4DACI,mBAKR,mDACI,eACA,gBACA,sCAEA,oEACI,sBACA,kBACA,mBACA,aACA,eAEA,4FACI,iBAGJ,2FACI,cACA,yBACA,YAGJ,iGACI,eAKZ,kDACI,aAIR,6BACI,WACA,aACA,qBAGJ,iCACI,cACA,WACA,iBACA,kBACA,uBACA","file":"styles-rendering.css"}
|
package/js/chart-render.js
CHANGED
|
@@ -571,20 +571,22 @@ class RotationRenderer {
|
|
|
571
571
|
|
|
572
572
|
self.data.steps.forEach((item, index) => {
|
|
573
573
|
|
|
574
|
-
let
|
|
574
|
+
let visibility = 'invisible';
|
|
575
575
|
if (item.interventions?.length > 0 || item.attributes?.length > 0)
|
|
576
|
-
|
|
576
|
+
visibility = "visible";
|
|
577
|
+
|
|
578
|
+
let collapseButton = '<div class="collapse-button '+visibility+ '"><i class="fa fa-chevron-down" aria-hidden="true"></i></div>';
|
|
577
579
|
|
|
578
580
|
let start = item.startDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
|
|
579
581
|
let end = item.endDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: '2-digit' });
|
|
580
582
|
|
|
581
583
|
let dates = '<b>' + item.duration + ' mois</b> (' + start + ' ➜ ' + end + ')';
|
|
582
584
|
|
|
583
|
-
html += '<div class="Step_' + index + ' rotation_item text-start" style="border-color: ' + item.color + '"><div class="
|
|
584
|
-
+ '<h4 class="col">' + item.name + '<i class="fa fa-pencil step-edit" aria-hidden="true"></i></h4>'
|
|
585
|
-
+ '<div class="step_dates col-auto">' + dates + '</div>'
|
|
585
|
+
html += '<div class="Step_' + index + ' rotation_item text-start" style="border-color: ' + item.color + '"><div class="step-header">'
|
|
586
586
|
+ collapseButton
|
|
587
|
-
+ '<
|
|
587
|
+
+ '<div class="step_dates">' + dates + '</div>'
|
|
588
|
+
+ '<h4 class="">' + item.name + '<i class="fa fa-pencil step-edit" aria-hidden="true"></i></h4>'
|
|
589
|
+
+ '</div><p class="step_description clearfix">' + (item.description ?? '') + '</p>'
|
|
588
590
|
+ '<div class="details">'
|
|
589
591
|
+ (item.attributes?.length > 0 ? item.attributes.map((attribute) => { return '<p><dt>' + attribute.name + '</dt><dd>' + attribute.value + '</dd></p>' }).join('') : '');
|
|
590
592
|
|
|
@@ -609,7 +611,7 @@ class RotationRenderer {
|
|
|
609
611
|
});
|
|
610
612
|
}
|
|
611
613
|
|
|
612
|
-
html += '</div></div
|
|
614
|
+
html += '</div></div>';
|
|
613
615
|
});
|
|
614
616
|
|
|
615
617
|
return '<div>' + html + '</div>';
|
package/package.json
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
div.mainITKContainer {
|
|
2
2
|
container-type: inline-size;
|
|
3
3
|
container-name: myparent;
|
|
4
|
+
line-height : 1rem;
|
|
4
5
|
|
|
5
6
|
.left-transcript {
|
|
6
|
-
display: none;
|
|
7
|
-
width
|
|
7
|
+
display : none;
|
|
8
|
+
width : 50%;
|
|
9
|
+
font-family: Segoe UI;
|
|
8
10
|
}
|
|
9
11
|
|
|
10
12
|
.chart-div {
|
|
@@ -12,7 +14,8 @@ div.mainITKContainer {
|
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
.bottom-transcript {
|
|
15
|
-
display: block;
|
|
17
|
+
display : block;
|
|
18
|
+
font-family: Segoe UI;
|
|
16
19
|
}
|
|
17
20
|
|
|
18
21
|
@container myparent (min-width: 800px) {
|
|
@@ -36,7 +39,7 @@ div.mainITKContainer {
|
|
|
36
39
|
}
|
|
37
40
|
|
|
38
41
|
.chart-div {
|
|
39
|
-
width
|
|
42
|
+
width: 60%;
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
.bottom-transcript {
|
|
@@ -48,10 +51,9 @@ div.mainITKContainer {
|
|
|
48
51
|
background-color: #F8FAFC;
|
|
49
52
|
border-left : #FFFFFF 14px solid;
|
|
50
53
|
border-radius : 7px;
|
|
51
|
-
padding :
|
|
54
|
+
padding : 8px 3px 5px 9px;
|
|
52
55
|
margin : 12px 0;
|
|
53
56
|
overflow-x : hidden;
|
|
54
|
-
position : relative;
|
|
55
57
|
|
|
56
58
|
&.highlighted {
|
|
57
59
|
box-shadow: 0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),
|
|
@@ -59,34 +61,40 @@ div.mainITKContainer {
|
|
|
59
61
|
background-color: #F0F3F5;
|
|
60
62
|
}
|
|
61
63
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
64
|
+
div.step-header {
|
|
65
|
+
h4 {
|
|
66
|
+
margin-bottom: 0;
|
|
67
|
+
margin-top : 0;
|
|
68
|
+
}
|
|
65
69
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
70
|
+
div.step_dates {
|
|
71
|
+
font-size : 11px;
|
|
72
|
+
background-color: #cdcccc;
|
|
73
|
+
color : #ffffff;
|
|
74
|
+
margin : 5px;
|
|
75
|
+
padding : 2px 5px;
|
|
76
|
+
border-radius : 5px;
|
|
77
|
+
height : 20px;
|
|
78
|
+
float : right;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
div.collapse-button {
|
|
82
|
+
border-radius: 50%;
|
|
83
|
+
width : 30px;
|
|
84
|
+
height : 30px;
|
|
85
|
+
text-align : center;
|
|
86
|
+
padding : 5px 0px;
|
|
87
|
+
margin : 0 5px 3px 0;
|
|
88
|
+
cursor : pointer;
|
|
89
|
+
background : #dfe6f7;
|
|
90
|
+
color : #7a8bad;
|
|
91
|
+
float : right;
|
|
92
|
+
transition : transform 0.3s ease-in-out;
|
|
93
|
+
}
|
|
77
94
|
}
|
|
78
95
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
width : 30px;
|
|
82
|
-
height : 30px;
|
|
83
|
-
text-align : center;
|
|
84
|
-
padding : 5px 0px;
|
|
85
|
-
margin : 0 5px 3px 0;
|
|
86
|
-
cursor : pointer;
|
|
87
|
-
background : #dfe6f7;
|
|
88
|
-
color : #7a8bad;
|
|
89
|
-
transition : transform 0.3s ease-in-out;
|
|
96
|
+
.step_description {
|
|
97
|
+
clear: both;
|
|
90
98
|
}
|
|
91
99
|
|
|
92
100
|
&.show-all {
|