tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Position sticky for checkboxes on Items List table.

This commit is contained in:
Mateus Machado Luna 2018-05-17 18:23:40 -03:00
parent 3f1e2b7c3a
commit bea8da20ab
2 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/admin/components/lists/items-list.vue
View File

@ -1,15 +1,6 @@
<template> <template>
<div class="table-container"> <div class="table-container">
<!-- <b-field
grouped
group-multiline>
<button
v-if="selectedItems.length > 0 && items.length > 0 && items[0].current_user_can_edit"
class="button field is-danger"
@click="deleteSelectedItems()">
<span>{{ $i18n.get('instruction_delete_selected_items') }} </span><b-icon icon="delete"/>
</button>
</b-field> -->
<div <div
v-if="!isOnTheme" v-if="!isOnTheme"
class="selection-control"> class="selection-control">
@ -50,9 +41,7 @@
<thead> <thead>
<tr> <tr>
<!-- Checking list --> <!-- Checking list -->
<th <th v-if="!isOnTheme">
v-if="!isOnTheme"
class="checkbox-cell">
&nbsp; &nbsp;
<!-- nothing to show on header --> <!-- nothing to show on header -->
</th> </th>
@ -371,7 +360,42 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../scss/_variables.scss"; @import "../../scss/_variables.scss";
.table-test{
height: 240px;
th {
position: -webkit-sticky; // for safari
position: sticky;
top: 0; left: 0;
background: #ddd !important;
color: black;
white-space: nowrap;
&:first-child {
z-index: 3 !important;
}
}
tr:hover td:first-child{
visibility: visible;
}
th, td {
padding: 10px 100px;
text-transform: capitalize;
&:first-child {
visibility: hidden;
position: -webkit-sticky; // for safari
position: sticky;
background-color: #eee;
left: 0px;
z-index: 2;
width: 200px;
}
}
}
.selection-control { .selection-control {
padding: 6px 14px 0px 14px; padding: 6px 14px 0px 14px;
@ -399,21 +423,22 @@ export default {
background-color: white; background-color: white;
border-bottom: 1px solid $tainacan-input-background; border-bottom: 1px solid $tainacan-input-background;
top: 0px; top: 0px;
z-index: 99999
} }
&.selectable-table th:nth-child(2), &.selectable-table td:nth-child(2) { // &.selectable-table th:nth-child(2), &.selectable-table td:nth-child(2) {
padding-left: 54px; // padding-left: 54px;
} // }
.checkbox-cell { .checkbox-cell {
width: 44px; width: 44px;
height: 58px; height: 58px;
padding: 0; padding: 0;
position: absolute !important; position: sticky !important;
left: 8.333333%; position: -webkit-sticky !important;
left: 0;
top: auto;
visibility: hidden; visibility: hidden;
display: flex;
justify-content: space-around;
z-index: 9; z-index: 9;
&::before { &::before {
@ -493,6 +518,7 @@ export default {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
right: 8.333333%; right: 8.333333%;
top: auto;
display: none; display: none;
.actions-container { .actions-container {

7
src/admin/pages/lists/items-page.vue
View File

@ -409,15 +409,14 @@
} }
.filters-menu { .filters-menu {
position: relative; position: absolute;
width: $filter-menu-width; width: $filter-menu-width;
max-width: $filter-menu-width; max-width: $filter-menu-width;
min-height: 100%; min-height: calc(100% - 82px);
height: calc(100% - 82px);
background-color: $tainacan-input-background; background-color: $tainacan-input-background;
padding: $page-small-side-padding; padding: $page-small-side-padding;
float: left; float: left;
height: 100%;
max-height: 100%;
overflow-y: auto; overflow-y: auto;
visibility: visible; visibility: visible;
display: block; display: block;