Skip to content

Commit a09a084

Browse files
BenjaminCharmesBenjaminCharmes
committed
Update components with new Bootstrap 5 class
New badge class Update CreateItemModal with new classes Update CreateCollectionModal with new classes Update CreateEquipmentModal with new classes Update QRScannerModal with new classes Update CreateEquipmentModal with new classes
1 parent 5b3c114 commit a09a084

File tree

8 files changed

+92
-111
lines changed

8 files changed

+92
-111
lines changed

‎webapp/src/components/BatchCreateItemModal.vue‎

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -20,44 +20,42 @@
2020
<transition name="slide-content-left">
2121
<div v-show="beforeSubmit" id="left-screen">
2222
<div class="row">
23-
<div class="input-group col-lg-3 col-6">
24-
<label for="batch-item-type-select" class="blue-label col-form-label mr-3">
25-
Type:
26-
</label>
23+
<div class="col-lg-4 col-md-4 col-12 mb-3 d-flex align-items-center gap-2">
24+
<label for="batch-item-type-select" class="blue-label"> Type: </label>
2725
<select
2826
id="batch-item-type-select"
2927
v-model="item_type"
30-
class="form-control"
28+
class="form-select"
3129
required
3230
>
3331
<option v-for="type in allowedTypes" :key="type" :value="type">
3432
{{ itemTypes[type].display }}
3533
</option>
3634
</select>
3735
</div>
38-
<div class="input-group col-lg-3 col-6">
39-
<label for="batchItemNRows" class="blue-label col-form-label text-left mb-2 mr-3">
36+
<div class="col-lg-4 col-md-4 col-12 mb-3 d-flex align-items-center gap-2">
37+
<label for="batchItemNRows" class="blue-label flex-shrink-0">
4038
Number of rows:
4139
</label>
4240
<input
4341
id="batchItemNRows"
4442
v-model="nSamples"
45-
class="form-control"
43+
class="form-control flex-grow-1"
4644
type="number"
4745
min="0"
4846
max="100"
4947
/>
5048
</div>
5149
</div>
5250
<div class="row">
53-
<div class="col-md-6 mt-2" @click="templateIsOpen = !templateIsOpen">
51+
<div class="col-md-6 d-flex gap-2" @click="templateIsOpen = !templateIsOpen">
5452
<font-awesome-icon
5553
:icon="['fas', 'chevron-right']"
5654
fixed-width
57-
class="collapse-arrow clickable"
55+
class="collapse-arrow"
5856
:class="{ expanded: templateIsOpen }"
5957
/>
60-
<label class="blue-label clickable pl-2"> Template: </label>
58+
<label class="blue-label ml-2"> Template: </label>
6159
</div>
6260
</div>
6361

@@ -68,7 +66,7 @@
6866
>
6967
<table data-testid="batch-add-table-template" class="table table-sm mb-2">
7068
<thead>
71-
<tr class="subheading template-subheading">
69+
<tr class="table-light subheading template-subheading">
7270
<th style="width: calc(12%)">ID</th>
7371
<th>Name</th>
7472
<th style="width: calc(15%)">Date</th>
@@ -81,7 +79,7 @@
8179
<td>
8280
<input
8381
v-model="itemTemplate.item_id"
84-
class="form-control"
82+
class="form-select"
8583
:placeholder="generateIDsAutomatically ? null : 'ex_{#}'"
8684
:disabled="generateIDsAutomatically"
8785
@input="applyIdTemplate"
@@ -91,12 +89,12 @@
9189
id="automatic-batch-id-label"
9290
v-model="generateIDsAutomatically"
9391
type="checkbox"
94-
class="form-check-input clickable"
92+
class="form-check-input"
9593
@input="setIDsNull"
9694
/>
9795
<label
9896
id="automatic-id-label"
99-
class="form-check-label clickable"
97+
class="form-check-label"
10098
for="automatic-batch-id-label"
10199
>
102100
auto IDs
@@ -106,15 +104,15 @@
106104
<td>
107105
<input
108106
v-model="itemTemplate.name"
109-
class="form-control"
107+
class="form-select"
110108
placeholder="Example name {#}"
111109
@input="applyNameTemplate"
112110
/>
113111
</td>
114112
<td>
115113
<input
116114
v-model="itemTemplate.date"
117-
class="form-control"
115+
class="form-select"
118116
type="datetime-local"
119117
:min="epochStart"
120118
:max="oneYearOn"
@@ -171,19 +169,15 @@
171169
</tbody>
172170
</table>
173171

174-
<div class="form-group mt-2 mb-1" style="display: flex">
175-
<label
176-
id="start-counting-label"
177-
for="start-counting"
178-
class="px-3 col-form-label-sm"
179-
>
172+
<div class="mt-2 mb-1" style="display: flex">
173+
<label id="start-counting-label" for="start-counting" class="px-3 form-label-sm">
180174
start counting {#} at:
181175
</label>
182176
<input
183177
id="start-counting"
184178
v-model="templateStartNumber"
185179
type="number"
186-
class="form-control form-control-sm"
180+
class="form-select form-select-sm"
187181
style="width: 5em"
188182
@input="applyIdAndNameTemplates"
189183
/>
@@ -207,22 +201,22 @@
207201
<td>
208202
<input
209203
v-model="item.item_id"
210-
class="form-control"
204+
class="form-select"
211205
:disabled="generateIDsAutomatically"
212206
@input="itemTemplate.item_id = ''"
213207
/>
214208
</td>
215209
<td>
216210
<input
217211
v-model="item.name"
218-
class="form-control"
212+
class="form-select"
219213
@input="itemTemplate.name = ''"
220214
/>
221215
</td>
222216
<td>
223217
<input
224218
v-model="item.date"
225-
class="form-control"
219+
class="form-select"
226220
type="datetime-local"
227221
:min="epochStart"
228222
:max="oneYearOn"
@@ -269,12 +263,10 @@
269263
<td>
270264
<button
271265
type="button"
272-
class="close"
266+
class="btn-close"
273267
aria-label="delete"
274268
@click.stop="removeRow(index)"
275-
>
276-
<span aria-hidden="true">&times;</span>
277-
</button>
269+
></button>
278270
</td>
279271
</tr>
280272
<td colspan="3">

‎webapp/src/components/CreateCollectionModal.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
<template #header> Create new collection </template>
99

1010
<template #body>
11-
<div class="form-row">
12-
<div class="form-group col-md-6">
13-
<label for="collection-id" class="col-form-label">Collection ID:</label>
11+
<div class="row">
12+
<div class="col-md-6 mb-3">
13+
<label for="collection-id" class="form-label">Collection ID:</label>
1414
<input
1515
id="collection-id"
1616
v-model="collection_id"
@@ -22,15 +22,15 @@
2222
<div class="form-error" v-html="isValidEntryID"></div>
2323
</div>
2424
</div>
25-
<div class="form-row">
26-
<div class="form-group col-md-12">
25+
<div class="row">
26+
<div class="col-md-12 mb-3">
2727
<label for="title">Full title:</label>
2828
<input id="title" v-model="title" type="text" class="form-control" />
2929
</div>
3030
</div>
31-
<div class="form-row">
32-
<div class="col-md-12 form-group">
33-
<label id="startWithMembers">(Optional) Start with members:</label>
31+
<div class="row">
32+
<div class="col-md-12 mb-3">
33+
<label id="startWithMembers" class="form-label">(Optional) Start with members:</label>
3434
<ItemSelect
3535
v-model="startingMembers"
3636
aria-labelledby="startWithMembersLabel"

‎webapp/src/components/CreateEquipmentModal.vue‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,19 @@
88
<template #header> Add equipment </template>
99

1010
<template #body>
11-
<div class="form-row">
12-
<div class="form-group col-md-6">
13-
<label for="equipment-id" class="col-form-label">ID:</label>
11+
<div class="row">
12+
<div class="col-md-6 mb-3">
13+
<label for="equipment-id" class="form-label">ID:</label>
1414
<input id="equipment-id" v-model="item_id" type="text" class="form-control" required />
1515
<!-- eslint-disable-next-line vue/no-v-html -->
1616
<div class="form-error" v-html="isValidEntryID"></div>
1717
</div>
18-
<div class="form-group col-md-6">
19-
<label for="create-equipment-modal-item-type-select" class="col-form-label"
20-
>Type:</label
21-
>
18+
<div class="col-md-6 mb-3">
19+
<label for="create-equipment-modal-item-type-select" class="form-label">Type:</label>
2220
<select
2321
id="create-equipment-modal-item-type-select"
2422
v-model="item_type"
25-
class="form-control"
23+
class="form-select"
2624
required
2725
disabled
2826
>
@@ -31,8 +29,8 @@
3129
</option>
3230
</select>
3331
</div>
34-
<div class="form-group col-md-6">
35-
<label for="create-equipment-modal-date" class="col-form-label">Date Created:</label>
32+
<div class="col-md-6 mb-3">
33+
<label for="create-equipment-modal-date" class="form-label">Date Created:</label>
3634
<input
3735
id="create-equipment-modal-date"
3836
v-model="date"
@@ -44,8 +42,8 @@
4442
/>
4543
</div>
4644
</div>
47-
<div class="form-row">
48-
<div class="form-group col-md-12">
45+
<div class="row">
46+
<div class="col-md-12 mb-3">
4947
<label for="create-equipment-modal-name">Name:</label>
5048
<input
5149
id="create-equipment-modal-name"
@@ -56,8 +54,8 @@
5654
</div>
5755
</div>
5856
<!-- All item types can be added to a collection, so this is always available -->
59-
<!-- <div class="form-row">
60-
<div class="col-md-12 form-group">
57+
<!-- <div class="row">
58+
<div class="col-md-12 mb-3">
6159
<label id="startInCollection">(Optional) Insert into collection:</label>
6260
<CollectionSelect
6361
aria-labelledby="startInCollection"
@@ -66,9 +64,9 @@
6664
/>
6765
</div>
6866
</div> -->
69-
<div class="form-row">
70-
<div class="col-md-12 form-group">
71-
<label id="copyFromSelectLabel"
67+
<div class="row">
68+
<div class="col-md-12 mb-3">
69+
<label id="copyFromSelectLabel" class="form-label"
7270
>(Optional) Copy from existing {{ itemTypeDisplayName }}:</label
7371
>
7472
<ItemSelect

0 commit comments

Comments
 (0)