Skip to content

Commit 3ddefbf

Browse files
davidhammakerdavidhammaker
committed
Update our-process
1 parent 772a3c8 commit 3ddefbf

3 files changed

Lines changed: 274 additions & 79 deletions

File tree

‎_includes/our-process.html‎

Lines changed: 229 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,238 @@
1-
<div id="our-process-box" class="row justify-content-between align-items-center">
2-
<div class="d-none d-md-flex col-md-1"></div>
3-
<div class="start-image-box order-1 col-12 col-md-5 text-center text-md-left">
4-
<img src="{{ "/assets/images/lego-stack.png" | relative_url }}" class="img-fluid" alt="A stack of bricks fitting nicely together">
5-
</div>
6-
<div class="content-box order-2 col-12 col-md-5">
7-
<p class="tagline">Our Process</p>
8-
<h2>From Idea to Reality</h2>
9-
<div class="process-accordion">
10-
<div id="process-accordion" class="accordion">
11-
<div class="accordion-item">
12-
<h2 class="accordion-header">
13-
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-one" aria-expanded="true" aria-controls="collapse-one">
14-
1 Initial Conversation
15-
</button>
16-
</h2>
17-
<div id="collapse-one" class="accordion-collapse collapse show" data-bs-parent="#process-accordion">
18-
<div class="accordion-body">
19-
We want to get to know you and your ministry context.
20-
</div>
21-
</div>
1+
<div
2+
id="our-process-box"
3+
class="row justify-content-between align-items-center"
4+
>
5+
<div class="d-none d-md-flex col-md-1"></div>
6+
<div class="start-image-box order-1 col-12 col-md-5 text-center text-md-left">
7+
<img src="{{ "/assets/images/lego-stack.png" | relative_url }}"
8+
class="img-fluid" alt="A stack of bricks fitting nicely together">
9+
</div>
10+
<div class="content-box order-2 col-12 col-md-5">
11+
<p class="tagline">Our Process</p>
12+
<h2>From Idea to Reality</h2>
13+
<div id="process-accordion" class="accordion">
14+
<div class="accordion-item">
15+
<div class="accordion-line"></div>
16+
<div class="accordion-box">
17+
<h2 class="accordion-header">
18+
<button
19+
class="accordion-button"
20+
type="button"
21+
data-bs-toggle="collapse"
22+
data-bs-target="#collapse-one"
23+
aria-expanded="true"
24+
aria-controls="collapse-one"
25+
onclick="updateButtons(1)"
26+
>
27+
<span class="accordion-title" key="1">Initial Conversation</span>
28+
</button>
29+
</h2>
30+
<div
31+
id="collapse-one"
32+
class="accordion-collapse collapse show"
33+
data-bs-parent="#process-accordion"
34+
>
35+
<div class="accordion-body">
36+
We want to get to know you and your ministry context.
37+
</div>
2238
</div>
23-
<div class="accordion-item">
24-
<h2 class="accordion-header">
25-
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-two" aria-expanded="true" aria-controls="collapse-two">
26-
2 Clarify Requirements
27-
</button>
28-
</h2>
29-
<div id="collapse-two" class="accordion-collapse collapse" data-bs-parent="#process-accordion">
30-
<div class="accordion-body">
31-
Together with you, we hone in on project goals and what’s needed to get there.
32-
</div>
33-
</div>
39+
</div>
40+
</div>
41+
<div class="accordion-item">
42+
<div class="accordion-line"></div>
43+
<div class="accordion-box">
44+
<h2 class="accordion-header">
45+
<button
46+
class="accordion-button collapsed"
47+
type="button"
48+
data-bs-toggle="collapse"
49+
data-bs-target="#collapse-two"
50+
aria-expanded="true"
51+
aria-controls="collapse-two"
52+
onclick="updateButtons(2)"
53+
>
54+
<span class="accordion-title" key="2">Clarify Requirements</span>
55+
</button>
56+
</h2>
57+
<div
58+
id="collapse-two"
59+
class="accordion-collapse collapse"
60+
data-bs-parent="#process-accordion"
61+
>
62+
<div class="accordion-body">
63+
Together with you, we hone in on project goals and what’s needed
64+
to get there.
65+
</div>
3466
</div>
35-
<div class="accordion-item">
36-
<h2 class="accordion-header">
37-
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-three" aria-expanded="true" aria-controls="collapse-three">
38-
3 Make Drafts
39-
</button>
40-
</h2>
41-
<div id="collapse-three" class="accordion-collapse collapse" data-bs-parent="#process-accordion">
42-
<div class="accordion-body">
43-
We produce designs of the app until they’re approved by you.
44-
</div>
45-
</div>
67+
</div>
68+
</div>
69+
<div class="accordion-item">
70+
<div class="accordion-line"></div>
71+
<div class="accordion-box">
72+
<h2 class="accordion-header">
73+
<button
74+
class="accordion-button collapsed"
75+
type="button"
76+
data-bs-toggle="collapse"
77+
data-bs-target="#collapse-three"
78+
aria-expanded="true"
79+
aria-controls="collapse-three"
80+
onclick="updateButtons(3)"
81+
>
82+
<span class="accordion-title" key="3">Make Drafts</span>
83+
</button>
84+
</h2>
85+
<div
86+
id="collapse-three"
87+
class="accordion-collapse collapse"
88+
data-bs-parent="#process-accordion"
89+
>
90+
<div class="accordion-body">
91+
We produce designs of the app until they’re approved by you.
92+
</div>
4693
</div>
47-
<div class="accordion-item">
48-
<h2 class="accordion-header">
49-
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-four" aria-expanded="true" aria-controls="collapse-four">
50-
4 Build and Test
51-
</button>
52-
</h2>
53-
<div id="collapse-four" class="accordion-collapse collapse" data-bs-parent="#process-accordion">
54-
<div class="accordion-body">
55-
Our volunteer technologists start coding. We also test for any problems.
56-
</div>
57-
</div>
94+
</div>
95+
</div>
96+
<div class="accordion-item">
97+
<div class="accordion-line"></div>
98+
<div class="accordion-box">
99+
<h2 class="accordion-header">
100+
<button
101+
class="accordion-button collapsed"
102+
type="button"
103+
data-bs-toggle="collapse"
104+
data-bs-target="#collapse-four"
105+
aria-expanded="true"
106+
aria-controls="collapse-four"
107+
onclick="updateButtons(4)"
108+
>
109+
<span class="accordion-title" key="4">Build and Test</span>
110+
</button>
111+
</h2>
112+
<div
113+
id="collapse-four"
114+
class="accordion-collapse collapse"
115+
data-bs-parent="#process-accordion"
116+
>
117+
<div class="accordion-body">
118+
Our volunteer technologists start coding. We also test for any
119+
problems.
120+
</div>
58121
</div>
59-
<div class="accordion-item">
60-
<h2 class="accordion-header">
61-
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-five" aria-expanded="true" aria-controls="collapse-five">
62-
5 Launch
63-
</button>
64-
</h2>
65-
<div id="collapse-five" class="accordion-collapse collapse" data-bs-parent="#process-accordion">
66-
<div class="accordion-body">
67-
We celebrate, give thanks, and pray as the app is made available to the public.
68-
</div>
69-
</div>
122+
</div>
123+
</div>
124+
<div class="accordion-item">
125+
<div class="accordion-line"></div>
126+
<div class="accordion-box">
127+
<h2 class="accordion-header">
128+
<button
129+
class="accordion-button collapsed"
130+
type="button"
131+
data-bs-toggle="collapse"
132+
data-bs-target="#collapse-five"
133+
aria-expanded="true"
134+
aria-controls="collapse-five"
135+
onclick="updateButtons(5)"
136+
>
137+
<span class="accordion-title" key="5">Launch</span>
138+
</button>
139+
</h2>
140+
<div
141+
id="collapse-five"
142+
class="accordion-collapse collapse"
143+
data-bs-parent="#process-accordion"
144+
>
145+
<div class="accordion-body">
146+
We celebrate, give thanks, and pray as the app is made available
147+
to the public.
148+
</div>
70149
</div>
71-
<div class="accordion-item">
72-
<h2 class="accordion-header">
73-
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-six" aria-expanded="true" aria-controls="collapse-six">
74-
6 Refine
75-
</button>
76-
</h2>
77-
<div id="collapse-six" class="accordion-collapse collapse" data-bs-parent="#process-accordion">
78-
<div class="accordion-body">
79-
Make adjustments based on user feedback and project goals.
80-
</div>
81-
</div>
150+
</div>
151+
</div>
152+
<div class="accordion-item">
153+
<div class="accordion-line" style="visibility: hidden"></div>
154+
<div class="accordion-box">
155+
<h2 class="accordion-header">
156+
<button
157+
class="accordion-button collapsed"
158+
type="button"
159+
data-bs-toggle="collapse"
160+
data-bs-target="#collapse-six"
161+
aria-expanded="true"
162+
aria-controls="collapse-six"
163+
onclick="updateButtons(6)"
164+
>
165+
<span class="accordion-title" key="6">Refine</span>
166+
</button>
167+
</h2>
168+
<div
169+
id="collapse-six"
170+
class="accordion-collapse collapse"
171+
data-bs-parent="#process-accordion"
172+
>
173+
<div class="accordion-body">
174+
Make adjustments based on user feedback and project goals.
175+
</div>
82176
</div>
83177
</div>
84178
</div>
85179
</div>
86-
<div class="d-none d-md-flex col-md-1"></div>
87-
</div>
180+
</div>
181+
<div class="d-none d-md-flex col-md-1"></div>
182+
</div>
183+
<script>
184+
/**
185+
* This block iterates over all elements with the "accordion-title"
186+
* class, giving each element a "number". The number is based on the
187+
* "key" attribute of the "accordion-title", and will render with
188+
* the "accordion-number" class. The first numbers will have the
189+
* "accordion-number-active" class to distinguish from unselected
190+
* numbers.
191+
*/
192+
let accordionTitles = document.getElementsByClassName("accordion-title");
193+
for (let i = 0; i < accordionTitles.length; i++) {
194+
let accordionTitle = accordionTitles[i];
195+
let numberCircle = document.createElement("span");
196+
const key = accordionTitle.getAttribute("key");
197+
const number = document.createTextNode(key);
198+
numberCircle.appendChild(number);
199+
numberCircle.classList.add("accordion-number");
200+
numberCircle.setAttribute("key", key);
201+
if (key === "1") {
202+
numberCircle.classList.add("accordion-number-active");
203+
}
204+
accordionTitle.parentNode.insertBefore(numberCircle, accordionTitle);
205+
}
206+
207+
/**
208+
* Update the "accordion-number" elements so that the selected
209+
* accordion button is shown as active, preceding buttons are shown
210+
* as check-marks, and subsequent buttons show as un-read.
211+
*/
212+
function updateButtons(keyStr) {
213+
const key = parseInt(keyStr);
214+
let accordionTitles = document.getElementsByClassName("accordion-title");
215+
for (let i = 0; i < accordionTitles.length; i++) {
216+
let accordionTitle = accordionTitles[i];
217+
const parentElem = accordionTitle.parentElement;
218+
for (let j = 0; j < accordionTitle.parentElement.childElementCount; j++) {
219+
let childElem = parentElem.children[j];
220+
if (childElem.className.includes("accordion-number")) {
221+
const elemKey = parseInt(childElem.getAttribute("key"));
222+
childElem.classList.remove("accordion-number-active");
223+
if (elemKey <= key) {
224+
childElem.classList.add("accordion-number-active");
225+
}
226+
if (elemKey < key) {
227+
let check = document.createElement("img");
228+
check.setAttribute("src", "/assets/images/icons/check.svg");
229+
childElem.innerHTML = "";
230+
childElem.appendChild(check);
231+
} else {
232+
childElem.innerHTML = elemKey;
233+
}
234+
}
235+
}
236+
}
237+
}
238+
</script>

‎_sass/base.scss‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -916,20 +916,36 @@ main {
916916
.content-box {
917917
@include media-breakpoint-down(md) {
918918
margin-top: 48px;
919+
padding: 0px;
919920
}
920921

922+
923+
921924
#process-accordion {
922925
h2 {
923926
margin-top: 0px;
924927
}
925928

926929
.accordion-item {
927-
margin-bottom: 40px;
930+
display: flex;
931+
margin-bottom: 0px;
932+
}
933+
934+
.accordion-line {
935+
display: flex;
936+
border-left: solid 2px map-get($neutral-colors, 6);
937+
position: relative;
938+
left: 42px;
939+
}
940+
941+
.accordion-box {
942+
padding-bottom: 40px;
928943
}
929944

930945
.accordion-body {
931946
padding-bottom: 0px;
932947
padding-top: 0px;
948+
margin-left: 58px;
933949
}
934950

935951
.accordion-button {
@@ -954,6 +970,31 @@ main {
954970
content: none;
955971
}
956972
}
973+
974+
.accordion-number {
975+
height: 40px;
976+
width: 40px;
977+
border-radius: 20px;
978+
border-width: 2px;
979+
border-style: solid;
980+
border-color: map-get($neutral-colors, 6);
981+
box-shadow: 0 0 0 6px map-get($primary-colors, 'white');
982+
align-content: center;
983+
text-align: center;
984+
margin-right: 18px;
985+
font-size: 14px;
986+
font-family: Gilroy, sans-serif;
987+
}
988+
989+
.accordion-number img {
990+
padding-bottom: 3px;
991+
}
992+
993+
.accordion-number-active {
994+
color: map-get($primary-colors, 'black')!important;
995+
background-color: map-get($primary-colors, 'salmon');
996+
border-style: none;
997+
}
957998
}
958999
}
9591000
}

‎assets/images/icons/check.svg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)