Mercurial > gemma
diff client/src/components/ui/UITableBody.vue @ 2874:b9a6abef9f1c
client: more unified table layout
Expandable/collapsible rows are now also handled by the component
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Mon, 01 Apr 2019 11:51:03 +0200 |
| parents | 5bc657f60fd3 |
| children | c40540889b53 |
line wrap: on
line diff
--- a/client/src/components/ui/UITableBody.vue Mon Apr 01 10:46:18 2019 +0200 +++ b/client/src/components/ui/UITableBody.vue Mon Apr 01 11:51:03 2019 +0200 @@ -7,12 +7,14 @@ <div v-for="(item, index) in data" :key="key(index)" - :class="[ - 'border-top row mx-0 align-items-center', - { active: active === item } - ]" + :class="['row-container border-top', { active: active === item }]" > - <slot :item="item" :index="index"></slot> + <div class="row mx-0"> + <slot :item="item" :index="index" name="row"></slot> + </div> + <div class="expand" v-if="active === item"> + <slot :item="item" :index="index" name="expand"></slot> + </div> </div> </div> <div v-else class="small text-center py-3 border-top"> @@ -20,6 +22,37 @@ </div> </template> +<style lang="sass"> +.table-body + .row-container + > .row + &:hover + background-color: #fafafa + .table-cell + display: flex + align-items: center + padding: 1.5px 3px + border-right: solid 1px #dee2e6 + &:hover + background-color: #f2f2f2 + &:last-child + border-right: none + &.center + justify-content: center + .expand + border-bottom: solid 1px $color-info + + &.active + > .row + color: #fff + .table-cell + border-right-color: rgba(255, 255, 255, 0.3) + background-color: $color-info + color: #fff + a + color: #fff !important +</style> + <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details.