Skip to content

Commit e03e158

Browse files
spwoodcockspwoodcock
committed
docs: update timeline doc to be more manageable / maintainable
1 parent 5bf8aa0 commit e03e158

File tree

4 files changed

+156
-118
lines changed

4 files changed

+156
-118
lines changed

‎docs/css/timeline.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.timeline-container {
2+
border-left: 4px solid gray;
3+
border-radius: 0 4px 4px 0;
4+
background: rgba(200, 200, 200, 0.15);
5+
margin: 2rem auto;
6+
padding: 1rem 2rem;
7+
position: relative;
8+
text-align: center;
9+
margin-left: 7rem;
10+
}
11+
12+
.timeline-entry {
13+
text-align: left;
14+
position: relative;
15+
padding-bottom: 1rem;
16+
margin-bottom: 1rem;
17+
}
18+
19+
.timeline-date {
20+
position: absolute;
21+
left: -10rem;
22+
text-align: right;
23+
font-size: 0.9rem;
24+
font-weight: 700;
25+
opacity: 0.7;
26+
min-width: 6rem;
27+
top: 2px;
28+
}
29+
30+
.timeline-dot {
31+
position: absolute;
32+
box-shadow: 0 0 0 4px gray;
33+
left: -2.5rem;
34+
background: #444;
35+
border-radius: 50%;
36+
height: 11px;
37+
width: 11px;
38+
top: 5px;
39+
}

‎docs/manuals/xlsform-design.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ The example CSV can be downloaded
138138
saved to when submitted. This should probably match the field name.
139139
- The form to create the Entity List is then uploaded to ODK Central:
140140

141-
![Entities Create UI](../images/xlsform-design/odk-central-entity-reg.png)
141+
![Entities Create UI](../images/xlsform-design/odk-central-entity-registration.png)
142142

143143
### 3. From Code (API)
144144

‎docs/timeline.md

Lines changed: 115 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,123 @@
11
# Timeline
22

3+
In reverse chronological order, with most recent events first.
4+
35
<!-- markdownlint-disable -->
46

5-
> <div style="border-left: 4px solid gray; border-radius: 0 4px 4px 0; background: rgba(200, 200, 200, 0.15); margin: 2rem auto; padding: 1rem 2rem; position: relative; text-align: center; margin-left: 7rem;">
6-
>
7-
> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
8-
> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2022-09</div>
9-
>
10-
> <h3>Initial Research & Concept</h3>
11-
> 🔬 <a style="text-decoration:none;color:grey;" href="https://docs.google.com/document/d/1adG2pXuMXI0wPbR_09ASORMx2gcVn0H6nsCNNGG7tpM/edit#heading=h.k45v77hc1cu1">Concept Note</a> written for a 'Field Mapping Tasking Manager'.
12-
>
13-
> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
14-
> </div>
15-
>
16-
> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
17-
> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2022-10</div>
18-
>
19-
> <h3>Project Start</h3>
20-
> 🏁 Design sprint & first commit to the Github project.
21-
>
22-
> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
23-
> </div>
24-
>
25-
> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
26-
> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2022-11</div>
27-
>
28-
> <h3>Backend API & Mobile Design</h3>
29-
> 📱 The mobile UI was prototyped & first version of FMTM API (server) created.
30-
>
31-
> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
32-
> </div>
33-
>
34-
> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
35-
> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2022-12</div>
36-
>
37-
> <h3>Demo: DRC, Kenya, Tanzania</h3>
38-
> 🚀 From Dec 2022 - Jan 2023 initial tests conducted with FMTM demonstrate its potential as a project.
39-
>
40-
> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
41-
> </div>
42-
>
43-
> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
44-
> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2023-02</div>
45-
>
46-
> <h3>Demo: Response to Turkey/Syria Earthquake</h3>
47-
> 🚀 A call was made for open-source software developers to assist rapid development for the earthquake response.
48-
>
49-
> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
50-
> </div>
51-
>
52-
> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
53-
> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2023-03</div>
54-
>
55-
> <h3>NAXA Awarded Contract to Assist FMTM Development</h3>
56-
> 💻 HOT's main collaborator on FMTM, NAXA, was contracted to continue development.
57-
>
58-
> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
59-
> </div>
60-
>
61-
> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
62-
> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2023-05</div>
63-
>
64-
> <h3>Hackathon</h3>
65-
> 👨‍💻 A hackathon was conducted by NAXA for the task splitting algorithm.
66-
>
67-
> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
68-
> </div>
69-
>
70-
> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
71-
> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2023-08</div>
72-
>
73-
> <h3>Demo: Rwanda Road Assessment</h3>
74-
> 🚀 Rwanda building and road assessment after severe flooding.
75-
>
76-
> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
77-
> </div>
78-
>
79-
> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
80-
> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2023-08</div>
81-
>
82-
> <h3>Rapid Development & Iteration of FMTM</h3>
83-
> 🏗️ Growth phase of FMTM with large improvements to the FMTM workflow & usability.
84-
>
85-
> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
86-
> </div>
87-
>
88-
> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
89-
> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2024-02</div>
90-
>
91-
> <h3>Demo: Monrovia, Liberia</h3>
92-
> 🚀 The first conceptualisation of HOT's full E2E workflow, after field mapping feedback.
93-
>
94-
> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
95-
> </div>
96-
>
97-
> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
98-
> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2024-03</div>
99-
>
100-
> <h3>Public Beta Release</h3>
101-
> 🆕 A big push to get the public beta released 1st March. Open for testing by the public.
102-
>
103-
> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
104-
> </div>
105-
>
106-
> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
107-
> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2024-03</div>
108-
>
109-
> <h3>Demo: Karangasem, Bali</h3>
110-
> 🚀 Landslide risk assessment, refinement of the E2E workflow.
111-
>
112-
> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
113-
> </div>
114-
>
115-
> <div style="text-align: left; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;">
116-
> <div style="position: absolute; left: -10rem; text-align: right; font-size: 0.9rem; font-weight: 700; opacity: 0.7; min-width: 6rem; top: 2px;">2024-04</div>
117-
>
118-
> <h3>Demo: CLIGEOS, Nepal</h3>
119-
> 🚀 Demo of FMTM within a full E2E workshop.
7+
<!-- NOTE the styling for this timeline is bundled in mkdocs as timeline.css -->
8+
<!-- Additional emojis: community 🧑‍🧑‍🧒‍🧒 -->
9+
10+
> <div class="timeline-container">
11+
> <div class="timeline-entry">
12+
> <div class="timeline-date">2024-07</div>
13+
> <h3>Community Webinar 2</h3>
14+
> 🎥 Public webinar displaying FMTM's current capabilities and building
15+
> partnerships.
16+
> <div class="timeline-dot"></div>
17+
> </div>
18+
> <div class="timeline-entry">
19+
> <div class="timeline-date">2024-07</div>
20+
> <h3>Demo: Alpa Corral, Argentina </h3>
21+
> 🚀 Field test with over 100 users for fire hazard assessment
22+
23+
and prevention mapping.
24+
25+
> <div class="timeline-dot"></div>
26+
> </div>
27+
> <div class="timeline-entry">
28+
> <div class="timeline-date">2024-06</div>
29+
> <h3>Demo: Karangasem, Bali (v2)</h3>
30+
> 🚀 Further refinement of E2E workflow in conjunction with imagery
31+
> from Drone Tasking Manager.
32+
> <div class="timeline-dot"></div>
33+
> </div>
34+
> <div class="timeline-entry">
35+
> <div class="timeline-date">2024-04</div>
36+
> <h3>Demo: CLIGEOS, Nepal</h3>
37+
> 🚀 Demo of FMTM within a full E2E workshop.
38+
> <div class="timeline-dot"></div>
39+
> </div>
40+
> <div class="timeline-entry">
41+
> <div class="timeline-date">2024-03</div>
42+
> <h3>Demo: Karangasem, Bali</h3>
43+
> 🚀 Landslide risk assessment, refinement of the E2E workflow.
44+
> <div class="timeline-dot"></div>
45+
> </div>
46+
> <div class="timeline-entry">
47+
> <div class="timeline-date">2024-03</div>
48+
> <h3>Public Beta Release</h3>
49+
> 🆕 A big push to get the public beta released 1st March. Open for
50+
> testing by the public.
51+
> <div class="timeline-dot"></div>
52+
> </div>
53+
> <div class="timeline-entry">
54+
> <div class="timeline-date">2024-02</div>
55+
> <h3>Demo: Monrovia, Liberia</h3>
56+
> 🚀 The first conceptualisation of HOT's full E2E workflow, after field
57+
> mapping feedback.
58+
> <div class="timeline-dot"></div>
59+
> </div>
60+
> <div class="timeline-entry">
61+
> <div class="timeline-date">2023-08</div>
62+
> <h3>Rapid Development & Iteration of FMTM</h3>
63+
> 🏗️ Growth phase of FMTM with large improvements to the FMTM
64+
> workflow & usability.
65+
> <div class="timeline-dot"></div>
66+
> </div>
67+
> <div class="timeline-entry">
68+
> <div class="timeline-date">2023-08</div>
69+
> <h3>Demo: Rwanda Road Assessment</h3>
70+
> 🚀 Rwanda building and road assessment after severe flooding.
71+
> <div class="timeline-dot"></div>
72+
> </div>
73+
> <div class="timeline-entry">
74+
> <div class="timeline-date">2023-05</div>
75+
> <h3>Hackathon</h3>
76+
> 👨‍💻 A hackathon was conducted by NAXA for the task splitting
77+
> algorithm.
78+
> <div class="timeline-dot"></div>
79+
> </div>
80+
> <div class="timeline-entry">
81+
> <div class="timeline-date">2023-03</div>
82+
> <h3>NAXA Awarded Contract to Assist FMTM Development</h3>
83+
> 💻 HOT's main collaborator on FMTM, NAXA, was contracted to continue
84+
> development.
85+
> <div class="timeline-dot"></div>
86+
> </div>
87+
> <div class="timeline-entry">
88+
> <div class="timeline-date">2023-02</div>
89+
> <h3>Demo: Response to Turkey/Syria Earthquake</h3>
90+
> 🚀 A call was made for open-source software developers to assist rapid
91+
> development for the earthquake response.
92+
> <div class="timeline-dot"></div>
93+
> </div>
94+
> <div class="timeline-entry">
95+
> <div class="timeline-date">2022-12</div>
96+
> <h3>Demo: DRC, Kenya, Tanzania</h3>
97+
> 🚀 From Dec 2022 - Jan 2023 initial tests conducted with FMTM
98+
> demonstrate its potential as a project.
99+
> <div class="timeline-dot"></div>
100+
> </div>
101+
> <div class="timeline-entry">
102+
> <div class="timeline-date">2022-11</div>
103+
> <h3>Backend API & Mobile Design</h3>
104+
> 📱 The mobile UI was prototyped & first version of FMTM API (server)
105+
> created.
106+
> <div class="timeline-dot"></div>
107+
> </div>
108+
> <div class="timeline-entry">
109+
> <div class="timeline-date">2022-10</div>
110+
> <h3>Project Start</h3>
111+
> 🏁 Design sprint & first commit to the Github project.
112+
> <div class="timeline-dot"></div>
113+
> </div>
114+
> <div class="timeline-entry">
115+
> <div class="timeline-date">2022-09</div>
116+
> <h3>Initial Research & Concept</h3>
117+
> 🔬 [Concept Note][1] written for a 'Field Mapping Tasking Manager'.
118+
> <div class="timeline-dot"></div>
119+
> </div>
120120
>
121-
> <div style="position: absolute; box-shadow: 0 0 0 4px gray; left: -2.5rem; background: #444; border-radius: 50%; height: 11px; width: 11px; top: 5px;"></div>
122-
> </div>
123121
> </div>
124122
125123
<!-- markdownlint-restore -->

‎mkdocs.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ theme:
2828

2929
extra_css:
3030
- css/extra.css
31+
- css/timeline.css
3132

3233
markdown_extensions:
3334
- tables

0 commit comments

Comments
 (0)