Mercurial > gemma
annotate client/src/components/ui/UITableBody.vue @ 5629:84d01a536bec 729-node-js-newer-version
Transformed scss and sass styles into css
author | Luisa Beerboom <lbeerboom@intevation.de> |
---|---|
date | Thu, 11 May 2023 13:23:52 +0200 |
parents | 7768f14f6535 |
children |
rev | line source |
---|---|
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
2724
5bc657f60fd3
client: table body component: removed animation
Markus Kottlaender <markus@intevation.de>
parents:
2640
diff
changeset
|
2 <div |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
3 class="table-body text-left small" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
4 :style="'overflow-y: auto; max-height: ' + maxHeight" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
5 v-if="data.length" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
6 > |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
7 <div |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
8 v-for="(item, index) in data" |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
9 :key="key(index)" |
2880
c40540889b53
client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2874
diff
changeset
|
10 :class="['row-container border-top', { active: isActive(item) }]" |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
11 > |
2874
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
12 <div class="row mx-0"> |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
13 <slot :item="item" :index="index" name="row"></slot> |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
14 </div> |
2880
c40540889b53
client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2874
diff
changeset
|
15 <div class="expand" v-if="isActive(item)"> |
2874
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
16 <slot :item="item" :index="index" name="expand"></slot> |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
17 </div> |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
18 </div> |
2724
5bc657f60fd3
client: table body component: removed animation
Markus Kottlaender <markus@intevation.de>
parents:
2640
diff
changeset
|
19 </div> |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
20 <div v-else class="small text-center py-3 border-top"> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
21 <translate>No results.</translate> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
22 </div> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
23 </template> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 |
5629
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
25 <style> |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
26 .table-body .row-container > .row:hover { |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
27 background-color: #fcfcfc; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
28 } |
2874
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
29 |
5629
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
30 .table-body .row-container > .row .table-cell { |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
31 display: flex; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
32 align-items: center; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
33 padding: 1.5px 3px; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
34 border-right: solid 1px #dee2e6; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
35 } |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
36 .table-body .row-container > .row .table-cell:last-child { |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
37 border-right: none; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
38 } |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
39 .table-body .row-container > .row .table-cell.center { |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
40 justify-content: center; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
41 } |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
42 |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
43 .table-body .row-container .expand { |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
44 border-bottom: solid 2px var(--color-info); |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
45 } |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
46 |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
47 .table-body .row-container.active > .row { |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
48 color: #fff; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
49 } |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
50 .table-body .row-container.active > .row .table-cell { |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
51 border-right-color: rgba(255, 255, 255, 0.3); |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
52 background-color: var(--color-info); |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
53 color: #fff; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
54 } |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
55 .table-body .row-container.active > .row .table-cell a { |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
56 color: #fff !important; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
57 } |
2874
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
58 </style> |
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2724
diff
changeset
|
59 |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 <script> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 * without warranty, see README.md and license for details. |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 * |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 * SPDX-License-Identifier: AGPL-3.0-or-later |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 * License-Filename: LICENSES/AGPL-3.0.txt |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 * |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 * Copyright (C) 2018 by via donau |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 * – Österreichische Wasserstraßen-Gesellschaft mbH |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 * Software engineering by Intevation GmbH |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 * |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 * Author(s): |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 * Markus Kottländer <markus.kottlaender@intevation.de> |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 */ |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 export default { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 props: { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 data: { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 type: Array |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 }, |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
80 maxHeight: { |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 type: String, |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
82 default: "18rem" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
83 }, |
2880
c40540889b53
client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2874
diff
changeset
|
84 isActive: { |
c40540889b53
client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2874
diff
changeset
|
85 type: Function, |
c40540889b53
client: code cleanup, slight style improvements
Markus Kottlaender <markus@intevation.de>
parents:
2874
diff
changeset
|
86 default: () => false |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 } |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
88 }, |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
89 methods: { |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
90 key(index) { |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
91 return index; |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2411
diff
changeset
|
92 } |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 } |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
94 }; |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
95 </script> |