Skip to content

Commit 1f7dc9f

Browse files
author
Yeliazar
committed
updated and customized Basic Table page
1 parent ee6a729 commit 1f7dc9f

File tree

3 files changed

+36
-26
lines changed

3 files changed

+36
-26
lines changed

‎src/pages/Tables/Basic/Basic.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,10 @@
44
.table th {
55
font-size: $font-size-sm;
66
}
7-
}
7+
}
8+
9+
.table-bordered th {
10+
background: $blue;
11+
color: $gray-default;
12+
border: none;
13+
}

‎src/pages/Tables/Basic/Basic.vue

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
<td>
3030
{{row.description}}
3131
<div v-if="row.label">
32-
<b-badge :variant="row.label.colorClass">{{row.label.text}}</b-badge>
32+
<span :class="row.label.colorClass ? `badge bg-${row.label.colorClass}` : ''" class="text-white">{{row.label.text}}</span>
3333
</div>
3434
</td>
3535
<td>
@@ -63,7 +63,7 @@
6363
</table>
6464
</div>
6565
<div class="clearfix">
66-
<div class="float-right">
66+
<div class="float-end">
6767
<b-button variant="default" class="me-3" size="sm">Send to...</b-button>
6868
<b-dropdown variant="inverse" class="me-sm-2" size="sm" text="Clear" right>
6969
<b-dropdown-item>Clear</b-dropdown-item>
@@ -117,7 +117,7 @@
117117
</td>
118118
<td>Mark</td>
119119
<td>Otto</td>
120-
<td><b-badge variant="success">Online</b-badge></td>
120+
<td><span class="badge bg-success">Online</span></td>
121121
</tr>
122122
<tr>
123123
<td>
@@ -129,9 +129,9 @@
129129
<label for="checkbox3" />
130130
</div>
131131
</td>
132-
<td>Jacob <b-badge variant="warning" class="text-gray-dark">ALERT!</b-badge></td>
132+
<td>Jacob <span class="badge bg-warning text-gray-dark">ALERT!</span></td>
133133
<td>Thornton</td>
134-
<td><b-badge variant="gray">Away</b-badge></td>
134+
<td><span class="badge bg-gray">Away</span></td>
135135
</tr>
136136
<tr>
137137
<td>
@@ -145,7 +145,7 @@
145145
</td>
146146
<td>Larry</td>
147147
<td>the Bird</td>
148-
<td><b-badge variant="danger">Construct</b-badge></td>
148+
<td><span class="badge bg-danger">Construct</span></td>
149149
</tr>
150150
</tbody>
151151
</table>
@@ -169,28 +169,28 @@
169169
<td>Mark</td>
170170
<td>Otto</td>
171171
<td><a href="#">[email protected]</a></td>
172-
<td><b-badge variant="info" pill>Pending</b-badge></td>
172+
<td><span class="badge bg-info rounded-pill">Pending</span></td>
173173
</tr>
174174
<tr>
175175
<td>2</td>
176176
<td>Jacob</td>
177177
<td>Thornton</td>
178178
<td><a href="#">[email protected]</a></td>
179-
<td><b-badge variant="warning" pill>Unconfirmed</b-badge></td>
179+
<td><span class="badge bg-warning">Unconfirmed</span></td>
180180
</tr>
181181
<tr>
182182
<td>3</td>
183183
<td>Larry</td>
184184
<td>the Bird</td>
185185
<td><a href="#">[email protected]</a></td>
186-
<td><b-badge variant="primary" pill>New</b-badge></td>
186+
<td><span class="badge bg-primary">New</span></td>
187187
</tr>
188188
<tr>
189189
<td>4</td>
190190
<td>Peter</td>
191191
<td>Horadnia</td>
192192
<td><a href="#">[email protected]</a></td>
193-
<td><b-badge variant="danger" pill>Active</b-badge></td>
193+
<td><span class="badge bg-danger">Active</span></td>
194194
</tr>
195195
</tbody>
196196
</table>
@@ -206,7 +206,7 @@
206206
<p>Each row is highlighted. You will never lost there. That&apos;s how
207207
all of us learned in school the table should look like. Just add
208208
<code>.table-bordered</code> to it.</p>
209-
<table class="table table-bordered table-lg mt-lg mb-0">
209+
<table class="table table-bordered table-lg mt-lg-1 mb-0">
210210
<thead class="text-uppercase">
211211
<tr>
212212
<th>
@@ -219,7 +219,7 @@
219219
</div>
220220
</th>
221221
<th>Product</th>
222-
<th class="text-right">Price</th>
222+
<th class="text-end">Price</th>
223223
<th class="text-center">Sales</th>
224224
</tr>
225225
</thead>
@@ -235,7 +235,7 @@
235235
</div>
236236
</td>
237237
<td>On the Road</td>
238-
<td class="text-right">$25 224.2</td>
238+
<td class="text-end">$25 224.2</td>
239239
<td class="text-center">
240240
<Sparklines :data="getRandomData()" :options="getRandomColor()"></Sparklines>
241241
</td>
@@ -251,7 +251,7 @@
251251
</div>
252252
</td>
253253
<td>HP Core i7</td>
254-
<td class="text-right">$87 346.1</td>
254+
<td class="text-end">$87 346.1</td>
255255
<td class="text-center">
256256
<Sparklines :data="getRandomData()" :options="getRandomColor()"></Sparklines>
257257
</td>
@@ -267,7 +267,7 @@
267267
</div>
268268
</td>
269269
<td>Let&apos;s Dance</td>
270-
<td class="text-right">$57 944.6</td>
270+
<td class="text-end">$57 944.6</td>
271271
<td class="text-center">
272272
<Sparklines :data="getRandomData()" :options="getRandomColor()"></Sparklines>
273273
</td>
@@ -283,7 +283,7 @@
283283
</div>
284284
</td>
285285
<td>Air Pro</td>
286-
<td class="text-right">$118 533.1</td>
286+
<td class="text-end">$118 533.1</td>
287287
<td class="text-center">
288288
<Sparklines :data="getRandomData()" :options="getRandomColor()"></Sparklines>
289289
</td>
@@ -299,7 +299,7 @@
299299
</div>
300300
</td>
301301
<td>Version Control</td>
302-
<td class="text-right">$72 854.5</td>
302+
<td class="text-end">$72 854.5</td>
303303
<td class="text-center">
304304
<Sparklines :data="getRandomData()" :options="getRandomColor()"></Sparklines>
305305
</td>
@@ -332,7 +332,7 @@
332332
</div>
333333
</th>
334334
<th>Product</th>
335-
<th class="text-right">Price</th>
335+
<th class="text-end">Price</th>
336336
<th class="text-center">Sales</th>
337337
</tr>
338338
</thead>
@@ -348,7 +348,7 @@
348348
</div>
349349
</td>
350350
<td>On the Road</td>
351-
<td class="text-right">$25 224.2</td>
351+
<td class="text-end">$25 224.2</td>
352352
<td class="text-center">
353353
<Sparklines :data="getRandomData()" :options="getRandomColor()"></Sparklines>
354354
</td>
@@ -364,7 +364,7 @@
364364
</div>
365365
</td>
366366
<td>HP Core i7</td>
367-
<td class="text-right">$87 346.1</td>
367+
<td class="text-end">$87 346.1</td>
368368
<td class="text-center">
369369
<Sparklines :data="getRandomData()" :options="getRandomColor()"></Sparklines>
370370
</td>
@@ -380,7 +380,7 @@
380380
</div>
381381
</td>
382382
<td>Let&apos;s Dance</td>
383-
<td class="text-right">$57 944.6</td>
383+
<td class="text-end">$57 944.6</td>
384384
<td class="text-center">
385385
<Sparklines :data="getRandomData()" :options="getRandomColor()"></Sparklines>
386386
</td>
@@ -396,7 +396,7 @@
396396
</div>
397397
</td>
398398
<td>Air Pro</td>
399-
<td class="text-right">$118 533.1</td>
399+
<td class="text-end">$118 533.1</td>
400400
<td class="text-center">
401401
<Sparklines :data="getRandomData()" :options="getRandomColor()"></Sparklines>
402402
</td>
@@ -412,7 +412,7 @@
412412
</div>
413413
</td>
414414
<td>Version Control</td>
415-
<td class="text-right">$72 854.5</td>
415+
<td class="text-end">$72 854.5</td>
416416
<td class="text-center">
417417
<Sparklines :data="getRandomData()" :options="getRandomColor()"></Sparklines>
418418
</td>
@@ -550,8 +550,8 @@ export default {
550550
return [{data: result}];
551551
},
552552
getRandomColor() {
553-
const {primary, success, info, danger} = this.appConfig.colors;
554-
const colors = [info, primary, danger, success];
553+
const {primary, success, info, danger, inverse, warning, secondary, gray} = this.appConfig.colors;
554+
const colors = [info, primary, danger, success, inverse, warning, secondary, gray];
555555
return {colors: [colors[Math.floor(Math.random() * colors.length)]]}
556556
}
557557
},

‎src/styles/_general.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ a,
2323
font-family: $font-family-base;
2424
}
2525

26+
.dropdown-item {
27+
white-space: normal;
28+
}
29+
2630
th {
2731
font-weight: 600;
2832
}

0 commit comments

Comments
 (0)