Skip to content

Commit 83cde52

Browse files
author
Vikas Agarwal
committed
Github issue #372, [Pagination] - keep fixed pagination option displaying 5 pages.
-- Implemented the required behaviour. Needs more user testing before going live.
1 parent 790bab3 commit 83cde52

File tree

2 files changed

+242
-163
lines changed

2 files changed

+242
-163
lines changed

‎src/components/Grid/GridView.scss‎

Lines changed: 144 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -410,140 +410,157 @@
410410

411411
/* .pages */
412412
.pages {
413-
background: $tc-gray-neutral-light;
414-
min-height: 70px;
415-
border-bottom-left-radius: 4px;
416-
border-bottom-right-radius: 4px;
417-
.right-page {
413+
background: $tc-gray-neutral-light;
414+
min-height: 70px;
415+
border-bottom-left-radius: 4px;
416+
border-bottom-right-radius: 4px;
417+
.right-page {
418+
background: $tc-white;
419+
border: 1px solid $tc-gray-30;
420+
border-radius: 2px;
421+
height: 30px;
422+
margin: 20px 20px 0 0;
423+
float: right;
424+
display: flex;
425+
ul {
426+
display: flex;
427+
}
428+
ul,
429+
li,
430+
.btn-prev,
431+
.btn-next {
432+
text-align: center;
433+
// float: left;
434+
}
435+
li {
436+
border-right: 1px solid $tc-gray-30;
437+
position: relative;
438+
&.active a {
439+
background: $tc-gray-20;
440+
box-shadow: inset -1px 1px 2px 0px rgba(71,71,79,0.20);
441+
}
442+
.down-layer {
418443
background: $tc-white;
419-
border: 1px solid $tc-gray-30;
420-
border-radius: 2px;
421-
height: 30px;
422-
margin: 20px 20px 0 0;
423-
float: right;
424-
ul,
425-
li,
426-
.btn-prev,
427-
.btn-next {
428-
text-align: center;
429-
float: left;
444+
border-radius: 5px;
445+
text-align: left;
446+
min-width: 140px;
447+
min-height: 55px;
448+
margin-bottom: 15px;
449+
position: absolute;
450+
top: 40px;
451+
left: 50%;
452+
margin-left: -70px;
453+
box-shadow: 0 0 10px rgba(10, 10, 10, 0.2);
454+
z-index: 99;
455+
&::before {
456+
font-size: 0;
457+
line-height: 0;
458+
width: 0;
459+
height: 0;
460+
border-left: 7px solid transparent;
461+
border-right: 7px solid transparent;
462+
border-bottom: 7px solid #fff;
463+
content: "";
464+
display: block;
465+
position: absolute;
466+
top: -7px;
467+
left: 50%;
468+
margin-left: -7px;
430469
}
431-
li {
432-
border-right: 1px solid $tc-gray-30;
433-
position: relative;
434-
&.active a {
435-
background: $tc-gray-20;
436-
box-shadow: inset -1px 1px 2px 0px rgba(71,71,79,0.20);
437-
}
438-
.down-layer {
439-
background: $tc-white;
440-
border-radius: 5px;
441-
text-align: left;
442-
min-width: 140px;
443-
min-height: 55px;
444-
margin-bottom: 15px;
445-
position: absolute;
446-
top: 40px;
447-
left: 50%;
448-
margin-left: -70px;
449-
box-shadow: 0 0 10px rgba(10, 10, 10, 0.2);
450-
z-index: 99;
451-
&::before {
452-
font-size: 0;
453-
line-height: 0;
454-
width: 0;
455-
height: 0;
456-
border-left: 7px solid transparent;
457-
border-right: 7px solid transparent;
458-
border-bottom: 7px solid #fff;
459-
content: "";
460-
display: block;
461-
position: absolute;
462-
top: -7px;
463-
left: 50%;
464-
margin-left: -7px;
465-
}
466-
.txt {
467-
@include roboto;
468-
font-size: $tc-label-md;
469-
color: #394146;
470-
line-height: $base-unit * 6;
471-
padding: 13px 0 0 13px;
472-
display: block;
473-
float: left;
474-
}
475-
.inputs {
476-
width: 34px;
477-
height: 30px;
478-
display: block;
479-
margin: 13px 0 0 90px;
480-
input {
481-
@include roboto;
482-
font-size: $tc-label-md;
483-
color: #394146;
484-
background: $tc-gray-neutral-light;
485-
line-height: $base-unit * 4;
486-
text-align: center;
487-
height: 30px;
488-
padding: 2px 0 0 0;
489-
margin: 0;
490-
}
491-
}
492-
}
493-
494-
&.go-to-page-pill {
495-
.tooltip-target {
496-
min-width: 27px;
497-
height: 28px;
498-
}
499-
}
470+
.txt {
471+
@include roboto;
472+
font-size: $tc-label-md;
473+
color: #394146;
474+
line-height: $base-unit * 6;
475+
padding: 13px 0 0 13px;
476+
display: block;
477+
float: left;
500478
}
501-
a {
479+
.inputs {
480+
width: 34px;
481+
height: 30px;
482+
display: block;
483+
margin: 13px 0 0 90px;
484+
input {
502485
@include roboto;
503486
font-size: $tc-label-md;
504-
color: $tc-gray-80;
505-
height: 28px;
506-
min-width: 27px;
507-
padding: 1px 8px;
508-
line-height: $base-unit + 23;
509-
display: block;
510-
&.btn-prev {
511-
border-right: 1px solid $tc-gray-30;
512-
min-width: 70px;
513-
padding-left: 24px;
514-
position: relative;
515-
&:before {
516-
font-size: 0;
517-
line-height: 0;
518-
background: url("./images/arrow-left.svg") no-repeat 0 0;
519-
width: 12px;
520-
height: 12px;
521-
content: "";
522-
display: block;
523-
position: absolute;
524-
top: 9px;
525-
left: 12px;
526-
}
527-
}
528-
&.btn-next {
529-
min-width: 70px;
530-
padding-right: 24px;
531-
position: relative;
532-
&:after {
533-
font-size: 0;
534-
line-height: 0;
535-
background: url("./images/arrow-right.svg") no-repeat 0 0;
536-
width: 12px;
537-
height: 12px;
538-
content: "";
539-
display: block;
540-
position: absolute;
541-
top: 9px;
542-
right: 12px;
543-
}
544-
}
487+
color: #394146;
488+
background: $tc-gray-neutral-light;
489+
line-height: $base-unit * 4;
490+
text-align: center;
491+
height: 30px;
492+
padding: 2px 0 0 0;
493+
margin: 0;
494+
}
495+
}
496+
}
497+
498+
&.go-to-page-pill {
499+
// position: inherit;
500+
.tooltip-target {
501+
min-width: 27px;
502+
height: 28px;
503+
}
504+
505+
.go-to-page-tooltip {
506+
display: flex;
507+
align-items: center;
508+
509+
input[type="number"] {
510+
width: 50px;
511+
height: 30px;
512+
margin-bottom: 0px;
513+
margin-left: $base-unit * 2;
514+
}
545515
}
516+
}
517+
}
518+
a {
519+
@include roboto;
520+
font-size: $tc-label-md;
521+
color: $tc-gray-80;
522+
height: 28px;
523+
min-width: 27px;
524+
padding: 1px 8px;
525+
line-height: $base-unit + 23;
526+
display: block;
527+
&.btn-prev {
528+
border-right: 1px solid $tc-gray-30;
529+
min-width: 70px;
530+
padding-left: 24px;
531+
position: relative;
532+
&:before {
533+
font-size: 0;
534+
line-height: 0;
535+
background: url("./images/arrow-left.svg") no-repeat 0 0;
536+
width: 12px;
537+
height: 12px;
538+
content: "";
539+
display: block;
540+
position: absolute;
541+
top: 9px;
542+
left: 12px;
543+
}
544+
}
545+
&.btn-next {
546+
min-width: 70px;
547+
padding-right: 24px;
548+
position: relative;
549+
&:after {
550+
font-size: 0;
551+
line-height: 0;
552+
background: url("./images/arrow-right.svg") no-repeat 0 0;
553+
width: 12px;
554+
height: 12px;
555+
content: "";
556+
display: block;
557+
position: absolute;
558+
top: 9px;
559+
right: 12px;
560+
}
561+
}
546562
}
563+
}
547564
}
548565

549566

0 commit comments

Comments
 (0)