Skip to content

Commit 883c560

Browse files
bblanchonbblanchon
committed
Upgrade to Bootstrap 5
1 parent 850a3ec commit 883c560

File tree

2 files changed

+33
-95
lines changed

2 files changed

+33
-95
lines changed

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<TroubleshooterStep :key="step.hash" :step="step" @choose="choose" :active="idx == steps.length - 1" />
1414
</Transition>
1515
<div v-if="needsAssistance">
16-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#assistance-modal">
16+
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#assistance-modal">
1717
Contact support
1818
</button> <button class="btn" :class="{
1919
'btn-outline-primary': !reportCopied,

‎src/components/AssistanceModal.vue‎

Lines changed: 32 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,7 @@
44
<form class="modal-content" ref="issueForm" @submit.prevent="createIssue">
55
<div class="modal-header bg-primary text-white">
66
<h5 class="modal-title">Contact support</h5>
7-
<button
8-
type="button"
9-
class="close"
10-
data-dismiss="modal"
11-
aria-label="Close"
12-
>
13-
<span aria-hidden="true">&times;</span>
7+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
148
</button>
159
</div>
1610
<div class="modal-body">
@@ -21,105 +15,49 @@
2115
to submit the issue.<br />
2216
<b>A GitHub account is required.</b>
2317
</div>
24-
<div class="form-group">
18+
<div class="mb-3">
2519
<label for="title-input">Title</label>
26-
<input
27-
type="text"
28-
name="title"
29-
class="form-control"
30-
id="title-input"
31-
aria-describedby="title-help"
32-
required
33-
/>
34-
<small id="title-help" class="form-text text-muted"
35-
>Summarize your issue in one sentence.</small
36-
>
20+
<input type="text" name="title" class="form-control" id="title-input" aria-describedby="title-help"
21+
required />
22+
<small id="title-help" class="form-text text-muted">Summarize your issue in one sentence.</small>
3723
</div>
38-
<div class="form-group">
24+
<div class="mb-3">
3925
<label for="description-input">Description</label>
40-
<textarea
41-
name="description"
42-
rows="3"
43-
class="form-control"
44-
id="description-input"
45-
aria-describedby="description-help"
46-
required
47-
placeholder="When I do ..., I expect ..., but instead I get ..."
48-
></textarea>
49-
<small id="description-help" class="form-text text-muted"
50-
>Describe your issue with a few sentences.</small
51-
>
26+
<textarea name="description" rows="3" class="form-control" id="description-input"
27+
aria-describedby="description-help" required
28+
placeholder="When I do ..., I expect ..., but instead I get ..."></textarea>
29+
<small id="description-help" class="form-text text-muted">Describe your issue with a few sentences.</small>
5230
</div>
53-
<div class="form-group">
31+
<div class="mb-3">
5432
<label for="mcu-input">Microcontroller</label>
55-
<input
56-
type="text"
57-
name="mcu"
58-
class="form-control"
59-
id="mcu-input"
60-
aria-describedby="mcu-help"
61-
placeholder="ESP8266"
62-
required
63-
/>
64-
<small id="mcu-help" class="form-text text-muted"
65-
>Which processor or with board do you use?</small
66-
>
33+
<input type="text" name="mcu" class="form-control" id="mcu-input" aria-describedby="mcu-help"
34+
placeholder="ESP8266" required />
35+
<small id="mcu-help" class="form-text text-muted">Which processor or with board do you use?</small>
6736
</div>
68-
<div class="form-group">
37+
<div class="mb-3">
6938
<label for="framework-input">Arduino Core / Framework</label>
70-
<input
71-
type="text"
72-
name="framework"
73-
class="form-control"
74-
id="framework-input"
75-
aria-describedby="framework-help"
76-
placeholder="ESP8266 core for Arduino v3.0.2"
77-
/>
78-
<small id="framework-help" class="form-text text-muted"
79-
>Please include version number.</small
80-
>
39+
<input type="text" name="framework" class="form-control" id="framework-input"
40+
aria-describedby="framework-help" placeholder="ESP8266 core for Arduino v3.0.2" />
41+
<small id="framework-help" class="form-text text-muted">Please include version number.</small>
8142
</div>
82-
<div class="form-group">
43+
<div class="mb-3">
8344
<label for="ide-input">IDE</label>
84-
<input
85-
type="text"
86-
name="ide"
87-
class="form-control"
88-
id="ide-input"
89-
aria-describedby="ide-help"
90-
placeholder="Arduino IDE 1.8.16"
91-
/>
92-
<small id="ide-help" class="form-text text-muted"
93-
>Please include version number.</small
94-
>
45+
<input type="text" name="ide" class="form-control" id="ide-input" aria-describedby="ide-help"
46+
placeholder="Arduino IDE 1.8.16" />
47+
<small id="ide-help" class="form-text text-muted">Please include version number.</small>
9548
</div>
96-
<div class="form-group">
49+
<div class="mb-3">
9750
<label for="repro-input">Reproduction code</label>
98-
<textarea
99-
name="repro"
100-
rows="10"
101-
class="form-control text-monospace"
102-
style="font-size: 80%"
103-
id="repro-input"
104-
aria-describedby="repro-help"
105-
placeholder="DynamicJsonDocuemnt doc(1024);\n..."
106-
></textarea>
107-
<small id="repro-help" class="form-text text-muted"
108-
>Write a few lines of code that demonstrate the issue.</small
109-
>
51+
<textarea name="repro" rows="10" class="form-control text-monospace" style="font-size: 80%" id="repro-input"
52+
aria-describedby="repro-help" placeholder="DynamicJsonDocuemnt doc(1024);\n..."></textarea>
53+
<small id="repro-help" class="form-text text-muted">Write a few lines of code that demonstrate the
54+
issue.</small>
11055
</div>
111-
<div class="form-group">
56+
<div class="mb-3">
11257
<label for="remarks-input">Remarks</label>
113-
<textarea
114-
name="remarks"
115-
rows="4"
116-
class="form-control"
117-
id="remarks-input"
118-
aria-describedby="remarks-help"
119-
></textarea>
120-
<small id="remarks-help" class="form-text text-muted"
121-
>Anything else you need to tell us?</small
122-
>
58+
<textarea name="remarks" rows="4" class="form-control" id="remarks-input"
59+
aria-describedby="remarks-help"></textarea>
60+
<small id="remarks-help" class="form-text text-muted">Anything else you need to tell us?</small>
12361
</div>
12462
</div>
12563
<div class="modal-footer">
@@ -184,7 +122,7 @@ export default defineComponent({
184122
console.log("URL", url)
185123
window.open(url, "_blank")
186124
187-
$("#assistance-modal").modal("hide")
125+
bootstrap.Modal.getInstance(this.$el).hide()
188126
}
189127
}
190128
})

0 commit comments

Comments
 (0)