Mercurial > gemma
comparison 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 |
comparison
equal
deleted
inserted
replaced
| 2873:b1707f60f241 | 2874:b9a6abef9f1c |
|---|---|
| 5 v-if="data.length" | 5 v-if="data.length" |
| 6 > | 6 > |
| 7 <div | 7 <div |
| 8 v-for="(item, index) in data" | 8 v-for="(item, index) in data" |
| 9 :key="key(index)" | 9 :key="key(index)" |
| 10 :class="[ | 10 :class="['row-container border-top', { active: active === item }]" |
| 11 'border-top row mx-0 align-items-center', | |
| 12 { active: active === item } | |
| 13 ]" | |
| 14 > | 11 > |
| 15 <slot :item="item" :index="index"></slot> | 12 <div class="row mx-0"> |
| 13 <slot :item="item" :index="index" name="row"></slot> | |
| 14 </div> | |
| 15 <div class="expand" v-if="active === item"> | |
| 16 <slot :item="item" :index="index" name="expand"></slot> | |
| 17 </div> | |
| 16 </div> | 18 </div> |
| 17 </div> | 19 </div> |
| 18 <div v-else class="small text-center py-3 border-top"> | 20 <div v-else class="small text-center py-3 border-top"> |
| 19 <translate>No results.</translate> | 21 <translate>No results.</translate> |
| 20 </div> | 22 </div> |
| 21 </template> | 23 </template> |
| 24 | |
| 25 <style lang="sass"> | |
| 26 .table-body | |
| 27 .row-container | |
| 28 > .row | |
| 29 &:hover | |
| 30 background-color: #fafafa | |
| 31 .table-cell | |
| 32 display: flex | |
| 33 align-items: center | |
| 34 padding: 1.5px 3px | |
| 35 border-right: solid 1px #dee2e6 | |
| 36 &:hover | |
| 37 background-color: #f2f2f2 | |
| 38 &:last-child | |
| 39 border-right: none | |
| 40 &.center | |
| 41 justify-content: center | |
| 42 .expand | |
| 43 border-bottom: solid 1px $color-info | |
| 44 | |
| 45 &.active | |
| 46 > .row | |
| 47 color: #fff | |
| 48 .table-cell | |
| 49 border-right-color: rgba(255, 255, 255, 0.3) | |
| 50 background-color: $color-info | |
| 51 color: #fff | |
| 52 a | |
| 53 color: #fff !important | |
| 54 </style> | |
| 22 | 55 |
| 23 <script> | 56 <script> |
| 24 /* This is Free Software under GNU Affero General Public License v >= 3.0 | 57 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
| 25 * without warranty, see README.md and license for details. | 58 * without warranty, see README.md and license for details. |
| 26 * | 59 * |