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

(-)a/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss (-132 / +39 lines)
Lines 180-188 table { Link Here
180
            td {
180
            td {
181
                padding: .5em;
181
                padding: .5em;
182
            }
182
            }
183
183
            tr.dtrg-group {
184
            tr.dtrg-group {
184
                td {
185
                td {
185
                    background: #e0e0e0;
186
                    background: #E0E0E0;
186
                }
187
                }
187
            }
188
            }
188
        }
189
        }
Lines 455-495 div { Link Here
455
            }
456
            }
456
        }
457
        }
457
458
458
        .dt-info {
459
            float: none;
460
            line-height: 1.9em;
461
            padding-right: 1em;
462
            padding-top: 0;
463
        }
464
465
        .dt-length {
466
            display: none;
467
            float: none;
468
            line-height: 1.5em;
469
            padding-right: 1em;
470
        }
471
472
        .dt-input {
473
            float: none;
474
            padding-right: 1em;
475
            white-space: nowrap;
476
477
            input {
478
                border-radius: 0;
479
                padding: 1px 2px;
480
            }
481
        }
482
483
        .dt-buttons {
459
        .dt-buttons {
484
            display: flex;
460
            display: flex;
485
            flex-grow: 1;
461
            flex-grow: 1;
486
            justify-content: flex-end;
487
462
488
            > .dt-button {
463
            > .dt-button {
489
                background: transparent none;
464
                background: transparent none;
490
                border: 1px solid transparent;
465
                border: 1px solid transparent;
466
                display: unset;
491
                font-size: .9rem;
467
                font-size: .9rem;
492
                padding: .3rem .5rem;
468
                padding: .3rem .5rem;
469
                position: unset;
493
470
494
                &:hover:not( .disabled ) {
471
                &:hover:not( .disabled ) {
495
                    background: #EEE none;
472
                    background: #EEE none;
Lines 503-525 div { Link Here
503
        }
480
        }
504
481
505
        .dt-paging {
482
        .dt-paging {
506
            float: none;
507
            line-height: 1.5em;
508
            padding: 0;
509
            padding-right: 1em;
510
511
            span {
512
                .dt-paging-button,
513
                .ellipsis {
514
                    display: none;
515
                }
516
            }
517
518
            .dt-paging-button {
483
            .dt-paging-button {
519
                border: 1px solid transparent;
484
                border: 1px solid transparent;
520
                border-radius: 0;
485
                border-radius: 0;
521
                color: $green-text-color;
486
                color: $green-text-color;
522
                padding: .2em 1em .5em 1em;
487
                padding: .2em .7em .5em .7em;
523
488
524
                &:hover,
489
                &:hover,
525
                &:active {
490
                &:active {
Lines 597-602 div { Link Here
597
        }
562
        }
598
    }
563
    }
599
564
565
    .dt-info-row {
566
        border-bottom: 1px solid $table-border-color;
567
        flex-grow: 1;
568
        padding: .5rem 0;
569
    }
570
571
    .dt-search-buttons {
572
        flex-grow: 1;
573
    }
574
600
    .dt-button-collection {
575
    .dt-button-collection {
601
        width: auto;
576
        width: auto;
602
577
Lines 678-684 div { Link Here
678
            top: unset;
653
            top: unset;
679
        }
654
        }
680
    }
655
    }
681
682
}
656
}
683
657
684
.dt-button-down-arrow {
658
.dt-button-down-arrow {
Lines 687-717 div { Link Here
687
    padding-left: .3rem;
661
    padding-left: .3rem;
688
}
662
}
689
663
690
.dt-info {
664
.dt-paging-row {
691
    margin-top: .5em;
692
693
    & + .pager {
694
        border-top: 1px solid $table-border-color;
695
        margin-top: .3em;
696
    }
697
}
698
699
.dt-length, .dt-paging, .dt-search {
700
    display: flex;
701
    flex-wrap: wrap;
665
    flex-wrap: wrap;
702
    font-size: 90%;
666
    font-size: 90%;
667
    gap: 1rem;
668
}
703
669
704
    &.top {
670
#dt-paging-top {
705
        padding-top: 1em;
671
    .dt-layout-cell {
706
    }
672
        .dt-buttons {
707
673
            /* Override left margin to keep "Clear" button next to search field */
708
    &.bottom {
674
            margin-left: 0;
709
        border-bottom: 1px solid $table-border-color;
675
        }
710
        padding-bottom: 1em;
711
    }
676
    }
677
}
712
678
713
679
.dt-length,
714
680
.dt-paging,
681
.dt-search {
715
    input {
682
    input {
716
        &[type="search"] {
683
        &[type="search"] {
717
            border: 1px solid #CCC;
684
            border: 1px solid #CCC;
Lines 748-834 div { Link Here
748
    }
715
    }
749
}
716
}
750
717
751
.table_entries {
718
@media only screen and ( min-width: 950px ) and ( max-width: 1525px ) {
752
    clear: both;
753
    display: flex;
754
}
755
756
.table_controls {
757
    border-top: 1px solid #EEE;
758
    display: flex;
759
    flex-grow: 1;
760
    justify-content: flex-end;
761
    margin-top: .5em;
762
    padding-top: .5em;
763
}
764
765
@media ( min-width: 1275px ) {
766
    .dt-button-text {
719
    .dt-button-text {
767
        display: inline;
720
        display: none;
768
    }
769
770
    div {
771
        .dt-container {
772
            .dt-paging {
773
                .dt-paging-button {
774
                    &.first,
775
                    &.last {
776
                        display: inline-block;
777
                    }
778
                }
779
            }
780
        }
781
    }
782
}
783
784
@media only screen and ( min-width: 500px ) {
785
    div {
786
        .dt-container {
787
            .dt-length {
788
                display: block;
789
            }
790
        }
791
    }
721
    }
792
}
722
}
793
723
794
@media only screen and ( max-width: 767px ) {
724
@media ( min-width: 1390 ) {
795
    div {
725
    .dt-layout-row {
796
        .dt-container {
726
        flex-wrap: wrap;
797
            .dt-info,
798
            .dt-paging {
799
                float: none;
800
                text-align: left;
801
            }
802
        }
803
    }
727
    }
804
}
805
728
806
@media only screen and ( min-width: 950px ) and ( max-width: 1125px ) {
807
    .dt-button-text {
729
    .dt-button-text {
808
        display: none;
730
        display: inline;
809
    }
810
}
811
812
@media only screen and ( min-width: 950px ) {
813
    .table_entries,
814
    .table_controls {
815
        border-top: 0;
816
        clear: none;
817
        margin: 0;
818
        padding: 0;
819
    }
731
    }
820
}
732
}
821
733
822
@media only screen and ( min-width: 1500px ) {
734
@media screen and ( max-width: 767px ) {
823
    div {
735
    div.dt-container {
824
        .dt-container {
736
        div.dt-layout-row:not( .dt-layout-table ) {
825
            .dt-paging {
737
            div.dt-layout-cell {
826
                span {
738
                text-align: left;
827
                    .dt-paging-button,
828
                    .ellipsis {
829
                        display: inline-block;
830
                    }
831
                }
832
            }
739
            }
833
        }
740
        }
834
    }
741
    }
(-)a/koha-tmpl/intranet-tmpl/prog/js/datatables.js (-13 / +24 lines)
Lines 36-60 var dataTablesDefaults = { Link Here
36
            excel: __("Excel"),
36
            excel: __("Excel"),
37
        },
37
        },
38
    },
38
    },
39
    //    dom: '<"dt-info"i><"top pager"<"table_entries"lp><"table_controls"fB>>tr<"bottom pager"ip>',
39
40
    layout: {
40
    layout: {
41
        //top3Start: ["info"],
41
        top2Start: {
42
        //top3End: null,
42
            className: "dt-info-row",
43
        //top2Start: ["pageLength", "paging"],
43
            features: ["info"],
44
        //top2End: null,
44
            rowClass: "dt-layout-row info-row",
45
        //top: ["search", "buttons"],
45
        },
46
        //topStart: null,
47
        //topEnd: null,
48
49
        top2Start: ["info"],
50
        top2End: null,
46
        top2End: null,
51
        top: ["pageLength", "paging", "search", "buttons"],
47
        top1Start: {
48
            rowId: "dt-paging-top",
49
            className: "dt-layout-cell dt-layout-start dt-paging",
50
            features: ["pageLength", "paging"],
51
            rowClass: "dt-layout-row dt-paging-row",
52
        },
53
        top1End: {
54
            className: "dt-layout-cell dt-layout-end dt-search-buttons",
55
            features: ["search", "buttons"],
56
        },
57
        top: null,
52
        topStart: null,
58
        topStart: null,
53
        topEnd: null,
59
        topEnd: null,
54
60
55
        bottomStart: ["info", "paging"],
61
        bottomStart: {
62
            rowId: "dt-paging-bottom",
63
            className: "dt-layout-cell dt-layout-start dt-paging",
64
            features: ["info", "paging"],
65
            rowClass: "dt-layout-row dt-paging-row",
66
        },
56
        bottomEnd: null,
67
        bottomEnd: null,
57
    },
68
    },
69
58
    buttons: [
70
    buttons: [
59
        {
71
        {
60
            fade: 100,
72
            fade: 100,
61
- 

Return to bug 38185