View | Details | Raw Unified | Return to bug 39320
Collapse All | Expand All

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ModuleDashboard/ModuleDashboard.vue (-1 / +51 lines)
Lines 11-16 Link Here
11
    </div>
11
    </div>
12
    <div class="row">
12
    <div class="row">
13
        <div class="col-md-6 dashboard-left-col">
13
        <div class="col-md-6 dashboard-left-col">
14
            <div
15
                v-if="selectedWidgetsLeft.length === 0"
16
                class="empty-placeholder"
17
            >
18
                {{ $__("Drop widgets here") }}
19
            </div>
14
            <draggable
20
            <draggable
15
                :ghost="true"
21
                :ghost="true"
16
                @drag="handleDrag"
22
                @drag="handleDrag"
Lines 18-23 Link Here
18
                :list="selectedWidgetsLeft"
24
                :list="selectedWidgetsLeft"
19
                group="widgets"
25
                group="widgets"
20
                handle=".widget-drag-handle"
26
                handle=".widget-drag-handle"
27
                :class="[
28
                    'dragArea',
29
                    'list-group',
30
                    'w-full',
31
                    { 'empty-drag-area': selectedWidgetsLeft.length === 0 },
32
                ]"
21
            >
33
            >
22
                <component
34
                <component
23
                    v-for="(widget, index) in selectedWidgetsLeft"
35
                    v-for="(widget, index) in selectedWidgetsLeft"
Lines 32-37 Link Here
32
            </draggable>
44
            </draggable>
33
        </div>
45
        </div>
34
        <div class="col-md-6 dashboard-right-col">
46
        <div class="col-md-6 dashboard-right-col">
47
            <div
48
                v-if="selectedWidgetsRight.length === 0"
49
                class="empty-placeholder"
50
            >
51
                {{ $__("Drop widgets here") }}
52
            </div>
35
            <draggable
53
            <draggable
36
                :ghost="true"
54
                :ghost="true"
37
                @drag="handleDrag"
55
                @drag="handleDrag"
Lines 39-44 Link Here
39
                :list="selectedWidgetsRight"
57
                :list="selectedWidgetsRight"
40
                group="widgets"
58
                group="widgets"
41
                handle=".widget-drag-handle"
59
                handle=".widget-drag-handle"
60
                :class="[
61
                    'dragArea',
62
                    'list-group',
63
                    'w-full',
64
                    { 'empty-drag-area': selectedWidgetsRight.length === 0 },
65
                ]"
42
            >
66
            >
43
                <component
67
                <component
44
                    v-for="(widget, index) in selectedWidgetsRight"
68
                    v-for="(widget, index) in selectedWidgetsRight"
Lines 253-256 export default { Link Here
253
.sortable-ghost.sortable-chosen > * {
277
.sortable-ghost.sortable-chosen > * {
254
    visibility: hidden;
278
    visibility: hidden;
255
}
279
}
280
.dashboard-right-col,
281
.dashboard-left-col {
282
    position: relative;
283
}
284
285
.empty-placeholder {
286
    position: absolute;
287
    top: 0;
288
    left: 0;
289
    right: 0;
290
    min-height: 150px;
291
    background-color: #fafafa;
292
    color: #999;
293
    font-style: italic;
294
    font-size: 1.2rem;
295
    pointer-events: none;
296
    border: 2px dotted #ccc;
297
    display: flex;
298
    align-items: center;
299
    justify-content: center;
300
    border-radius: 8px;
301
    z-index: 2;
302
}
303
304
.empty-drag-area {
305
    min-height: 150px;
306
}
256
</style>
307
</style>
257
- 

Return to bug 39320