@osfarm/itineraire-technique 1.1.20 → 1.2.0
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/README.md +34 -2
- package/examples/README.md +137 -0
- package/examples/nextjs-_document.tsx +66 -0
- package/examples/nextjs-api-route.ts +122 -0
- package/examples/nextjs-app-router-editor.tsx +304 -0
- package/examples/nextjs-app-router-viewer.tsx +90 -0
- package/package.json +59 -6
- package/react/QUICKSTART.md +172 -0
- package/react/README.md +305 -0
- package/react/TikaEditor.jsx +212 -0
- package/react/TikaRenderer.jsx +116 -0
- package/react/hooks.ts +217 -0
- package/react/index.ts +19 -0
- package/react/types.ts +152 -0
- package/.github/copilot-instructions.md +0 -56
- package/.github/workflows/publish.yml +0 -34
- package/scss/styles-editor.scss +0 -149
- package/scss/styles-rendering.scss +0 -184
package/react/types.ts
ADDED
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Types TypeScript pour les données d'itinéraire technique TIKA
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export interface ClimateData {
|
|
6
|
+
/** Températures moyennes mensuelles (12 valeurs, en °C) */
|
|
7
|
+
temperatures: number[];
|
|
8
|
+
/** Précipitations moyennes mensuelles (12 valeurs, en mm) */
|
|
9
|
+
precipitations: number[];
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export interface ItineraireOptions {
|
|
13
|
+
/** Type de vue: 'horizontal', 'vertical', ou 'donut' */
|
|
14
|
+
view?: 'horizontal' | 'vertical' | 'donut';
|
|
15
|
+
/** Afficher la transcription textuelle */
|
|
16
|
+
show_transcript?: boolean;
|
|
17
|
+
/** Titre pour les interventions supérieures */
|
|
18
|
+
title_top_interventions?: string;
|
|
19
|
+
/** Titre pour les interventions inférieures */
|
|
20
|
+
title_bottom_interventions?: string;
|
|
21
|
+
/** Titre pour les étapes */
|
|
22
|
+
title_steps?: string;
|
|
23
|
+
/** Région géographique */
|
|
24
|
+
region?: string;
|
|
25
|
+
/** Afficher le diagramme climatique */
|
|
26
|
+
show_climate_diagram?: boolean;
|
|
27
|
+
/** Données climatiques */
|
|
28
|
+
climate_data?: ClimateData;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export interface Intervention {
|
|
32
|
+
/** Identifiant unique de l'intervention */
|
|
33
|
+
id: string;
|
|
34
|
+
/** Jour relatif au début de l'étape (peut être négatif pour avant) */
|
|
35
|
+
day: string | number;
|
|
36
|
+
/** Nom de l'intervention */
|
|
37
|
+
name: string;
|
|
38
|
+
/** Type d'intervention: 'intervention_top' ou 'intervention_bottom' */
|
|
39
|
+
type: 'intervention_top' | 'intervention_bottom';
|
|
40
|
+
/** Description détaillée de l'intervention */
|
|
41
|
+
description?: string;
|
|
42
|
+
/** Icône associée (nom FontAwesome ou URL) */
|
|
43
|
+
icon?: string;
|
|
44
|
+
/** Couleur de l'intervention (hex) */
|
|
45
|
+
color?: string;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export interface Step {
|
|
49
|
+
/** Identifiant unique de l'étape */
|
|
50
|
+
id: string;
|
|
51
|
+
/** Nom de la culture/étape */
|
|
52
|
+
name: string;
|
|
53
|
+
/** Date de début (ISO 8601 string ou Date) */
|
|
54
|
+
startDate: string | Date;
|
|
55
|
+
/** Date de fin (ISO 8601 string ou Date) */
|
|
56
|
+
endDate: string | Date;
|
|
57
|
+
/** Couleur de l'étape (hex) */
|
|
58
|
+
color?: string;
|
|
59
|
+
/** Description de l'étape */
|
|
60
|
+
description?: string;
|
|
61
|
+
/** Liste des interventions */
|
|
62
|
+
interventions?: Intervention[];
|
|
63
|
+
/** Durée calculée en mois */
|
|
64
|
+
duration?: number;
|
|
65
|
+
/** Attributs personnalisés */
|
|
66
|
+
attributes?: Record<string, string | number>;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export interface ItineraireData {
|
|
70
|
+
/** Titre de la rotation */
|
|
71
|
+
title: string;
|
|
72
|
+
/** Options de configuration */
|
|
73
|
+
options: ItineraireOptions;
|
|
74
|
+
/** Liste des étapes de la rotation */
|
|
75
|
+
steps: Step[];
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
export interface TimelineData extends Array<ItineraireData> {}
|
|
79
|
+
|
|
80
|
+
export type RotationData = ItineraireData | TimelineData;
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Props pour le composant TikaRenderer
|
|
84
|
+
*/
|
|
85
|
+
export interface TikaRendererProps {
|
|
86
|
+
/** Données de l'itinéraire à afficher */
|
|
87
|
+
data: RotationData;
|
|
88
|
+
/** Largeur du conteneur */
|
|
89
|
+
width?: string | number;
|
|
90
|
+
/** Hauteur du conteneur */
|
|
91
|
+
height?: string | number;
|
|
92
|
+
/** Classes CSS additionnelles */
|
|
93
|
+
className?: string;
|
|
94
|
+
/** Callback lors du clic sur un élément */
|
|
95
|
+
onItemClick?: (itemId: string, event: Event) => void;
|
|
96
|
+
/** Callback lors du survol d'un élément */
|
|
97
|
+
onItemHover?: (itemId: string, event: Event) => void;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Props pour le composant TikaEditor
|
|
102
|
+
*/
|
|
103
|
+
export interface TikaEditorProps {
|
|
104
|
+
/** Données initiales de l'itinéraire */
|
|
105
|
+
initialData?: ItineraireData;
|
|
106
|
+
/** Callback lors de la sauvegarde */
|
|
107
|
+
onSave?: (data: ItineraireData) => void;
|
|
108
|
+
/** Callback lors de l'export */
|
|
109
|
+
onExport?: (data: ItineraireData) => void;
|
|
110
|
+
/** Classes CSS additionnelles */
|
|
111
|
+
className?: string;
|
|
112
|
+
/** Afficher les boutons Wiki (si intégration avec Wiki) */
|
|
113
|
+
showWikiButtons?: boolean;
|
|
114
|
+
/** Activer la sauvegarde automatique */
|
|
115
|
+
enableAutoSave?: boolean;
|
|
116
|
+
/** Intervalle de sauvegarde automatique (ms) */
|
|
117
|
+
autoSaveInterval?: number;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Interface de la classe RotationRenderer (pour référence)
|
|
122
|
+
*/
|
|
123
|
+
export interface IRotationRenderer {
|
|
124
|
+
data: RotationData;
|
|
125
|
+
chart: any; // Type echarts
|
|
126
|
+
render(): void;
|
|
127
|
+
renderChart(): void;
|
|
128
|
+
buildHTML(): string;
|
|
129
|
+
highlightItem(id: string): void;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* Déclarations globales pour l'intégration avec le code existant
|
|
134
|
+
*/
|
|
135
|
+
declare global {
|
|
136
|
+
interface Window {
|
|
137
|
+
RotationRenderer: new (divID: string, data: RotationData) => IRotationRenderer;
|
|
138
|
+
echarts: any;
|
|
139
|
+
$: any;
|
|
140
|
+
_: any;
|
|
141
|
+
rotation_data?: ItineraireData;
|
|
142
|
+
refreshAttributesTable?: () => void;
|
|
143
|
+
refreshStepsButtonList?: () => void;
|
|
144
|
+
refreshInterventionsList?: () => void;
|
|
145
|
+
renderChart?: () => void;
|
|
146
|
+
exportToJsonFile?: (data: ItineraireData, fileName?: string) => void;
|
|
147
|
+
reactEditorSave?: () => void;
|
|
148
|
+
reactEditorExport?: () => void;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
export {};
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
# Copilot Instructions for TIKA Itineraire Technique
|
|
2
|
-
|
|
3
|
-
## Project Overview
|
|
4
|
-
This project visualizes agricultural technical itineraries (sequences of interventions on a plot) for analysis and documentation. It provides both a visualizer and an editor, designed for easy integration into web pages and use on Triple Performance.
|
|
5
|
-
|
|
6
|
-
## Architecture & Key Components
|
|
7
|
-
- **HTML files**: Main entry points (`visualisateur.html`, `editor.html`, etc.)
|
|
8
|
-
- **JS directory**: Core logic for rendering charts, editing, exporting, and managing interventions. Key files:
|
|
9
|
-
- `chart-render.js`: Main chart rendering logic (frise and rotation views)
|
|
10
|
-
- `editor-attributes.js`, `editor-crops.js`, `editor-export.js`, `editor-interventions.js`, `editor-wiki-editor.js`: Editor and data manipulation modules
|
|
11
|
-
- **CSS/SCSS**: Styling for both editor and rendering views
|
|
12
|
-
- **test/**: Contains example JSON data and templates for validation and development
|
|
13
|
-
|
|
14
|
-
## Data Flow & Integration
|
|
15
|
-
- Input data is provided as JSON, following the format in `test/test.json` and `test.after.json`
|
|
16
|
-
- Rendering is performed by instantiating `RotationRenderer` with a target div and JSON data
|
|
17
|
-
- External dependencies: Apache Echarts, JQuery, Bootstrap, Underscore (included via CDN in HTML)
|
|
18
|
-
|
|
19
|
-
## Developer Workflows
|
|
20
|
-
- **Build**: No complex build system; use npm to install and copy files as needed
|
|
21
|
-
- Example: `npm i @osfarm/itineraire-technique`
|
|
22
|
-
- Copy JS/CSS from `node_modules` to local `js/` and `css/` folders
|
|
23
|
-
- **Testing**: Use the sample JSON files in `test/` for manual validation; no automated test runner
|
|
24
|
-
- **Debugging**: Open HTML files in browser, use browser dev tools; inspect JSON format and rendering
|
|
25
|
-
|
|
26
|
-
## Project-Specific Conventions
|
|
27
|
-
- All rendering logic expects a specific JSON schema (see `test/test.json`)
|
|
28
|
-
- Editor modules are split by concern (attributes, crops, interventions, etc.)
|
|
29
|
-
- No framework; vanilla JS modules and direct DOM manipulation
|
|
30
|
-
- CSS/SCSS files are mapped 1:1 to editor and rendering views
|
|
31
|
-
|
|
32
|
-
## Integration Points
|
|
33
|
-
- Designed for easy embedding in any HTML page
|
|
34
|
-
- Used on Triple Performance and Google Spreadsheet add-on
|
|
35
|
-
- Can be extended by adding new JS modules or updating JSON schema
|
|
36
|
-
|
|
37
|
-
## Example Usage
|
|
38
|
-
```js
|
|
39
|
-
let renderer = new RotationRenderer('uneDIVID', jsonData);
|
|
40
|
-
renderer.render();
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## Key Files & Directories
|
|
44
|
-
- `js/chart-render.js`: Main chart logic
|
|
45
|
-
- `test/test.json`: Example data format
|
|
46
|
-
- `editor.html`, `visualisateur.html`: Entry points
|
|
47
|
-
- `css/styles-rendering.css`, `css/styles-editor.css`: Styling
|
|
48
|
-
|
|
49
|
-
## Tips for AI Agents
|
|
50
|
-
- Always validate JSON input against `test/test.json`
|
|
51
|
-
- When adding features, follow the modular JS file structure
|
|
52
|
-
- Reference CDN links for dependencies in HTML
|
|
53
|
-
- Prefer direct DOM manipulation and vanilla JS patterns
|
|
54
|
-
|
|
55
|
-
---
|
|
56
|
-
For questions about unclear conventions or missing documentation, ask the user for clarification or examples from their workflow.
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
name: Publish to npmjs
|
|
2
|
-
|
|
3
|
-
permissions:
|
|
4
|
-
contents: read
|
|
5
|
-
id-token: write
|
|
6
|
-
|
|
7
|
-
on:
|
|
8
|
-
push:
|
|
9
|
-
branches:
|
|
10
|
-
- main
|
|
11
|
-
|
|
12
|
-
jobs:
|
|
13
|
-
publish:
|
|
14
|
-
runs-on: ubuntu-latest
|
|
15
|
-
steps:
|
|
16
|
-
- name: Checkout code
|
|
17
|
-
uses: actions/checkout@v4
|
|
18
|
-
|
|
19
|
-
- name: Set up Node.js
|
|
20
|
-
uses: actions/setup-node@v4
|
|
21
|
-
with:
|
|
22
|
-
node-version: '24'
|
|
23
|
-
registry-url: 'https://registry.npmjs.org/'
|
|
24
|
-
|
|
25
|
-
- name: Install dependencies
|
|
26
|
-
run: npm install
|
|
27
|
-
|
|
28
|
-
- name: Build (if needed)
|
|
29
|
-
run: npm run build
|
|
30
|
-
continue-on-error: true
|
|
31
|
-
|
|
32
|
-
- name: Publish to npmjs
|
|
33
|
-
run: npm publish --provenance --access public
|
|
34
|
-
|
package/scss/styles-editor.scss
DELETED
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
$button-color : green;
|
|
2
|
-
$button-hover-color: rgb(2, 102, 2);
|
|
3
|
-
$button-text-color : white;
|
|
4
|
-
$header-height : 3rem;
|
|
5
|
-
|
|
6
|
-
.main-header {
|
|
7
|
-
background-color: #6fa76f;
|
|
8
|
-
color : white;
|
|
9
|
-
height : $header-height;
|
|
10
|
-
|
|
11
|
-
display : flex;
|
|
12
|
-
align-items: center;
|
|
13
|
-
|
|
14
|
-
.btn.show,
|
|
15
|
-
.btn:first-child:active,
|
|
16
|
-
:not(.btn-check)+.btn:active {
|
|
17
|
-
background-color: #026602;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.editor-view {
|
|
22
|
-
overflow-y: auto;
|
|
23
|
-
|
|
24
|
-
//scrollbar only for the editor
|
|
25
|
-
height: calc(100vh - #{$header-height + 1rem});
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
// Add a button in the rotation to edit right from the transcript
|
|
29
|
-
.rotation_item {
|
|
30
|
-
.step-edit {
|
|
31
|
-
color : #878787;
|
|
32
|
-
cursor : pointer;
|
|
33
|
-
display : none;
|
|
34
|
-
margin-left : 10px;
|
|
35
|
-
font-size : 70%;
|
|
36
|
-
vertical-align: super;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&:hover .step-edit {
|
|
40
|
-
display: inline !important;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.welcome-view {
|
|
45
|
-
background-color: #6fa76f;
|
|
46
|
-
color : white;
|
|
47
|
-
padding : 1rem;
|
|
48
|
-
margin-top : 1rem;
|
|
49
|
-
border-radius : 1rem;
|
|
50
|
-
|
|
51
|
-
#cropsContainer {
|
|
52
|
-
color: green;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.card-white {
|
|
57
|
-
background-color: white;
|
|
58
|
-
padding : 1rem;
|
|
59
|
-
border-radius : 1rem;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.card-holder {
|
|
63
|
-
background-color: whitesmoke;
|
|
64
|
-
padding : 1rem;
|
|
65
|
-
border-radius : 1rem;
|
|
66
|
-
margin : auto
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.editable-row {
|
|
70
|
-
background-color: #f7f7f7;
|
|
71
|
-
min-height : 3rem;
|
|
72
|
-
|
|
73
|
-
display : flex;
|
|
74
|
-
align-items: center;
|
|
75
|
-
|
|
76
|
-
border-radius: 0.5rem;
|
|
77
|
-
|
|
78
|
-
.edit-buttons {
|
|
79
|
-
visibility: hidden;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
&:hover>.edit-buttons {
|
|
83
|
-
visibility: visible;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.intervention-row {
|
|
88
|
-
background: #e0e0e0;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.primary-button {
|
|
92
|
-
color : $button-text-color;
|
|
93
|
-
background-color: $button-color;
|
|
94
|
-
border : $button-color;
|
|
95
|
-
|
|
96
|
-
&:hover {
|
|
97
|
-
background-color: $button-hover-color;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.close-step-times {
|
|
102
|
-
background: none;
|
|
103
|
-
border : none;
|
|
104
|
-
color : #878787;
|
|
105
|
-
font-size : 120%;
|
|
106
|
-
|
|
107
|
-
&:hover {
|
|
108
|
-
color: #494949;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
#cropsContainer{
|
|
113
|
-
.drag-handle {
|
|
114
|
-
color : #CCC;
|
|
115
|
-
font-weight : normal;
|
|
116
|
-
font-size : 86%;
|
|
117
|
-
margin-right : 10px;
|
|
118
|
-
vertical-align: middle;
|
|
119
|
-
cursor : grab;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
div.col {
|
|
123
|
-
cursor: pointer;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.form-control {
|
|
128
|
-
&.text-right {
|
|
129
|
-
text-align: right;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.modal {
|
|
134
|
-
.form-label {
|
|
135
|
-
font-weight: 600;
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
#code-snippet {
|
|
140
|
-
font-family : monospace;
|
|
141
|
-
font-size : 13px;
|
|
142
|
-
text-align : left;
|
|
143
|
-
border : 1px inset;
|
|
144
|
-
background-color: #f1f1f1;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
#attributeName, #interventionName {
|
|
148
|
-
font-weight: bold;
|
|
149
|
-
}
|
|
@@ -1,184 +0,0 @@
|
|
|
1
|
-
div.mainITKContainer {
|
|
2
|
-
container-type: inline-size;
|
|
3
|
-
container-name: myparent;
|
|
4
|
-
line-height : 1rem;
|
|
5
|
-
|
|
6
|
-
.left-transcript {
|
|
7
|
-
display : none;
|
|
8
|
-
width : 50%;
|
|
9
|
-
font-family: Segoe UI;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.chart-div {
|
|
13
|
-
width: 100%;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.bottom-transcript {
|
|
17
|
-
display: none;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&.withTranscript {
|
|
21
|
-
.bottom-transcript {
|
|
22
|
-
display : block;
|
|
23
|
-
font-family: Segoe UI;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@container myparent (min-width: 800px) {
|
|
28
|
-
&.withTranscript {
|
|
29
|
-
.left-transcript {
|
|
30
|
-
display: block;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.chart-div {
|
|
34
|
-
width: 50%;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.bottom-transcript {
|
|
38
|
-
display: none;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
@container myparent (min-width: 1000px) {
|
|
44
|
-
&.withTranscript {
|
|
45
|
-
.left-transcript {
|
|
46
|
-
display: block;
|
|
47
|
-
width : 40%;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.chart-div {
|
|
51
|
-
width: 60%;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.bottom-transcript {
|
|
55
|
-
display: none;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
div.rotation_item {
|
|
61
|
-
background-color: #F8FAFC;
|
|
62
|
-
border-left : #FFFFFF 14px solid;
|
|
63
|
-
border-radius : 7px;
|
|
64
|
-
padding : 8px 3px 5px 9px;
|
|
65
|
-
margin : 12px 0;
|
|
66
|
-
overflow-x : hidden;
|
|
67
|
-
|
|
68
|
-
&.highlighted {
|
|
69
|
-
box-shadow: 0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),
|
|
70
|
-
0px 1px 16px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16));
|
|
71
|
-
background-color: #F0F3F5;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
div.step-header {
|
|
75
|
-
h4 {
|
|
76
|
-
font-size : 20px;
|
|
77
|
-
margin-bottom: 0;
|
|
78
|
-
margin-top : 0;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
div.step_dates {
|
|
82
|
-
font-size : 11px;
|
|
83
|
-
background-color: #cdcccc;
|
|
84
|
-
color : #000000;
|
|
85
|
-
margin : 5px;
|
|
86
|
-
padding : 2px 5px;
|
|
87
|
-
border-radius : 5px;
|
|
88
|
-
height : 20px;
|
|
89
|
-
float : right;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
div.collapse-button {
|
|
93
|
-
border-radius: 50%;
|
|
94
|
-
width : 30px;
|
|
95
|
-
height : 30px;
|
|
96
|
-
text-align : center;
|
|
97
|
-
padding : 5px 0px;
|
|
98
|
-
margin : 0 5px 3px 0;
|
|
99
|
-
cursor : pointer;
|
|
100
|
-
background : #dfe6f7;
|
|
101
|
-
color : #7a8bad;
|
|
102
|
-
float : right;
|
|
103
|
-
transition : transform 0.3s ease-in-out;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.step_description {
|
|
108
|
-
clear: both;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
&.show-all {
|
|
112
|
-
div.collapse-button {
|
|
113
|
-
transform: rotate(180deg);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
div.details {
|
|
117
|
-
max-height: 10000px;
|
|
118
|
-
/* Adjust this value as needed */
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
div.details {
|
|
123
|
-
max-height: 0px;
|
|
124
|
-
overflow : hidden;
|
|
125
|
-
transition: max-height 0.3s ease-in-out;
|
|
126
|
-
|
|
127
|
-
div.intervention {
|
|
128
|
-
background-color: #FFFFFF;
|
|
129
|
-
border-radius : 5px;
|
|
130
|
-
margin-bottom : 11px;
|
|
131
|
-
padding : 13px;
|
|
132
|
-
cursor : pointer;
|
|
133
|
-
|
|
134
|
-
span.intervention_title {
|
|
135
|
-
font-weight: bold;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
span.intervention_date {
|
|
139
|
-
color : #707070;
|
|
140
|
-
background-color: #F0F3F5;
|
|
141
|
-
float : right;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
div.intervention_description {
|
|
145
|
-
margin-top: 5px;
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.step-edit {
|
|
151
|
-
display: none;
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.charts {
|
|
156
|
-
width : 100%;
|
|
157
|
-
height : 500px;
|
|
158
|
-
display: inline-block;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.transcript {
|
|
162
|
-
font-size : 80%;
|
|
163
|
-
width : 100%;
|
|
164
|
-
max-height : 450px;
|
|
165
|
-
overflow-y : scroll;
|
|
166
|
-
scroll-behavior: smooth;
|
|
167
|
-
padding : 3px;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.rotation-tooltip {
|
|
172
|
-
max-width : 400px;
|
|
173
|
-
text-align: left;
|
|
174
|
-
|
|
175
|
-
div.step_dates {
|
|
176
|
-
font-size : 9px;
|
|
177
|
-
background-color: #cdcccc;
|
|
178
|
-
color : #000000;
|
|
179
|
-
margin : 5px;
|
|
180
|
-
padding : 0px 5px;
|
|
181
|
-
border-radius : 5px;
|
|
182
|
-
float: right;
|
|
183
|
-
}
|
|
184
|
-
}
|