Skip to content

Commit e2f813f

Browse files
tmorehousepi0
tmorehouse
authored and
pi0
committed
[table] CSS refactor (bootstrap-vue#425)
* [carousel] Fixed this arg in forEach Should address issue bootstrap-vue#396 * [carousel] coerce querySelectorAll into an array Coerce slide nodelist into an Array * [carousel] ESLint * [table] Position arrows for table-sm When `b-table` had prop `small`, the arrows were not aligned top to bottom correctly (up to high). Also removed erroneous `.` from `table-responsive` class * [table] Refactor CSS Refactored CSS to reduce footprint Removed unused CSS
1 parent 8e7f694 commit e2f813f

File tree

1 file changed

+32
-79
lines changed

1 file changed

+32
-79
lines changed

‎lib/components/table.vue

Lines changed: 32 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
@click="headClick(field,key)"
1010
@keydown.enter="headClick(field,key)"
1111
@keydown.space.prevent="headClick(field,key)"
12-
:class="[field.sortable?'sorting':null,sortBy===key?'sorting_'+(sortDesc?'desc':'asc'):'',field.class?field.class:null,field.invisible?'invisible':null]"
12+
:class="fieldClass(field)"
1313
:aria-label="field.sortable ? (sortDesc ? labelSortAsc : labelSortDesc) : null"
1414
:aria-sort="(field.sortable && sortBy === key) ? (sortDesc ? 'descending' : 'ascending') : null"
1515
:tabindex="field.sortable?'0':null"
@@ -23,7 +23,7 @@
2323
@click="headClick(field,key)"
2424
@keydown.enter="headClick(field,key)"
2525
@keydown.space.prevent="headClick(field,key)"
26-
:class="[field.sortable?'sorting':null,sortBy===key?'sorting_'+(sortDesc?'desc':'asc'):'',field.class?field.class:null,field.invisible?'invisible':null]"
26+
:class="fieldClass(field)"
2727
:aria-label="field.sortable ? (sortDesc ? labelSortAsc : labelSortDesc) : null"
2828
:aria-sort="(field.sortable && sortBy === key) ? (sortDesc ? 'descending' : 'ascending') : null"
2929
:tabindex="field.sortable?'0':null"
@@ -186,7 +186,7 @@
186186
this.hover ? 'table-hover' : '',
187187
this.inverse ? 'table-inverse' : '',
188188
this.bordered ? 'table-bordered' : '',
189-
this.responsive ? '.table-responsive' : '',
189+
this.responsive ? 'table-responsive' : '',
190190
this.small ? 'table-sm' : ''
191191
];
192192
},
@@ -239,6 +239,14 @@
239239
}
240240
},
241241
methods: {
242+
fieldClass(field) {
243+
return [
244+
field.sortable ? 'sorting' : '',
245+
(field.sortable && sortBy===key) ? 'sorting_' + (sortDesc ? 'desc' : 'asc') : '',
246+
field.class ? field.class : '',
247+
field.invisible ? 'invisible' : ''
248+
];
249+
},
242250
rowClicked(item, index) {
243251
this.$emit('row-clicked', item, index);
244252
},
@@ -262,101 +270,46 @@
262270
<style>
263271
/* https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap4.css */
264272
265-
table thead > tr > th.sorting_asc, table thead > tr > th.sorting_desc, table thead > tr > th.sorting,
266-
table thead > tr > td.sorting_asc,
267-
table thead > tr > td.sorting_desc,
268-
table thead > tr > td.sorting,
269-
table tfoot > tr > th.sorting_asc, table tfoot > tr > th.sorting_desc, table tfoot > tr > th.sorting,
270-
table tfoot > tr > td.sorting_asc,
271-
table tfoot > tr > td.sorting_desc,
272-
table tfoot > tr > td.sorting {
273+
table > thead > tr > .sorting,
274+
table > tfoot > tr > .sorting {
273275
padding-right: 30px;
274-
}
275-
276-
table thead > tr > th:active,
277-
table thead > tr > td:active,
278-
table tfoot > tr > th:active,
279-
table tfoot > tr > td:active {
280-
outline: none;
281-
}
282-
283-
table thead .sorting,
284-
table thead .sorting_asc,
285-
table thead .sorting_desc,
286-
table thead .sorting_asc_disabled,
287-
table thead .sorting_desc_disabled,
288-
table tfoot .sorting,
289-
table tfoot .sorting_asc,
290-
table tfoot .sorting_desc,
291-
table tfoot .sorting_asc_disabled,
292-
table tfoot .sorting_desc_disabled {
293276
cursor: pointer;
294277
position: relative;
295278
}
296279
297-
table thead .sorting:before, table thead .sorting:after,
298-
table thead .sorting_asc:before,
299-
table thead .sorting_asc:after,
300-
table thead .sorting_desc:before,
301-
table thead .sorting_desc:after,
302-
table thead .sorting_asc_disabled:before,
303-
table thead .sorting_asc_disabled:after,
304-
table thead .sorting_desc_disabled:before,
305-
table thead .sorting_desc_disabled:after,
306-
table tfoot .sorting:before, table thead .sorting:after,
307-
table tfoot .sorting_asc:before,
308-
table tfoot .sorting_asc:after,
309-
table tfoot .sorting_desc:before,
310-
table tfoot .sorting_desc:after,
311-
table tfoot .sorting_asc_disabled:before,
312-
table tfoot .sorting_asc_disabled:after,
313-
table tfoot .sorting_desc_disabled:before,
314-
table tfoot .sorting_desc_disabled:after {
280+
table thead > tr > .sorting:before,
281+
table thead > tr > .sorting:after,
282+
table tfoot > tr > .sorting:before,
283+
table thead > tr > .sorting:after {
315284
position: absolute;
316285
bottom: 0.9em;
317286
display: block;
318287
opacity: 0.3;
319288
}
320289
321-
table thead .sorting:before,
322-
table thead .sorting_asc:before,
323-
table thead .sorting_desc:before,
324-
table thead .sorting_asc_disabled:before,
325-
table thead .sorting_desc_disabled:before,
326-
table tfoot .sorting:before,
327-
table tfoot .sorting_asc:before,
328-
table tfoot .sorting_desc:before,
329-
table tfoot .sorting_asc_disabled:before,
330-
table tfoot .sorting_desc_disabled:before {
290+
table.table-sm > thead > tr > .sorting:before,
291+
table.table-sm > thead > tr > .sorting:after,
292+
table.table-sm > tfoot > tr > .sorting:before,
293+
table.table-sm > thead > tr > .sorting:after {
294+
bottom: 0.4em;
295+
}
296+
297+
table > thead > tr > .sorting:before,
298+
table > tfoot > tr > .sorting:before {
331299
right: 1em;
332300
content: "\2191";
333301
}
334302
335-
table thead .sorting:after,
336-
table thead .sorting_asc:after,
337-
table thead .sorting_desc:after,
338-
table thead .sorting_asc_disabled:after,
339-
table thead .sorting_desc_disabled:after,
340-
table tfoot .sorting:after,
341-
table tfoot .sorting_asc:after,
342-
table tfoot .sorting_desc:after,
343-
table tfoot .sorting_asc_disabled:after,
344-
table tfoot .sorting_desc_disabled:after {
303+
table > thead > tr > .sorting:after,
304+
table > tfoot > tr > .sorting:after {
345305
right: 0.5em;
346306
content: "\2193";
347307
}
348308
349-
table thead .sorting_asc:before,
350-
table thead .sorting_desc:after,
351-
table tfoot .sorting_asc:before,
352-
table tfoot .sorting_desc:after {
309+
table > thead > tr > .sorting_asc:before,
310+
table > thead > tr > .sorting_desc:after,
311+
table > tfoot > tr > .sorting_asc:before,
312+
table > tfoot > tr > .sorting_desc:after {
353313
opacity: 1;
354314
}
355-
356-
table thead .sorting_asc_disabled:before,
357-
table thead .sorting_desc_disabled:after,
358-
table tfoot .sorting_asc_disabled:before,
359-
table tfoot .sorting_desc_disabled:after {
360-
opacity: 0;
361-
}
362315
</style>

0 commit comments

Comments
 (0)