diff --git a/app/assets/stylesheets/pagination.scss b/app/assets/stylesheets/pagination.scss
index ad1ee08cac625ae0c00fde67bb843127442e0ac6..efce3caee22cf9d795aee97cf6136792b0e6b602 100644
--- a/app/assets/stylesheets/pagination.scss
+++ b/app/assets/stylesheets/pagination.scss
@@ -1,13 +1,6 @@
// From https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/components/menu.min.css
.ui.menu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;background:#FFF;font-weight:400;border:1px solid rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);border-radius:.28571429rem;min-height:2.85714286em}.ui.menu:after{content:'';display:block;height:0;clear:both;visibility:hidden}.ui.menu:first-child{margin-top:0}.ui.menu:last-child{margin-bottom:0}.ui.menu .menu{margin:0}.ui.menu:not(.vertical)>.menu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.ui.menu:not(.vertical) .item{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.ui.menu .item{position:relative;vertical-align:middle;line-height:1;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:0 0;padding:.92857143em 1.14285714em;text-transform:none;color:rgba(0,0,0,.87);font-weight:400;-webkit-transition:background .1s ease,box-shadow .1s ease,color .1s ease;transition:background .1s ease,box-shadow .1s ease,color .1s ease}.ui.menu>.item:first-child{border-radius:.28571429rem 0 0 .28571429rem}.ui.menu .item:before{position:absolute;content:'';top:0;right:0;height:100%;width:1px;background:rgba(34,36,38,.1)}.ui.menu .item>a:not(.ui),.ui.menu .item>p:only-child,.ui.menu .text.item>*{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;line-height:1.3}.ui.menu .item>p:first-child{margin-top:0}.ui.menu .item>p:last-child{margin-bottom:0}.ui.menu .item>i.icon{opacity:.9;float:none;margin:0 .35714286em 0 0}.ui.menu:not(.vertical) .item>.button{position:relative;top:0;margin:-.5em 0;padding-bottom:.78571429em;padding-top:.78571429em;font-size:1em}.ui.menu>.container,.ui.menu>.grid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:inherit;-webkit-align-items:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:inherit;-ms-flex-direction:inherit;flex-direction:inherit}.ui.menu .item>.input{width:100%}.ui.menu:not(.vertical) .item>.input{position:relative;top:0;margin:-.5em 0}.ui.menu .item>.input input{font-size:1em;padding-top:.57142857em;padding-bottom:.57142857em}.ui.menu .header.item,.ui.vertical.menu .header.item{margin:0;background:0 0;text-transform:normal;font-weight:700}.ui.vertical.menu .item>.header:not(.ui){margin:0 0 .5em;font-size:1em;font-weight:700}.ui.menu .ui.popup{display:none}.ui.menu .ui.visible.popup{display:block}.ui.menu .item>i.dropdown.icon{padding:0;float:right;margin:0 0 0 1em}.ui.menu .dropdown.item .menu{left:0;min-width:calc(100% - 1px);border-radius:0 0 .28571429rem .28571429rem;background:#FFF;margin:0;box-shadow:0 1px 3px 0 rgba(0,0,0,.08);-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-webkit-flex-direction:column!important;-ms-flex-direction:column!important;flex-direction:column!important}.ui.menu .ui.dropdown .menu>.item{margin:0;text-align:left;font-size:1em!important;padding:.78571429em 1.14285714em!important;background:0 0!important;color:rgba(0,0,0,.87)!important;text-transform:none!important;font-weight:400!important;box-shadow:none!important;-webkit-transition:none!important;transition:none!important}.ui.menu .ui.dropdown .menu>.item:hover,.ui.menu .ui.dropdown .menu>.selected.item{background:rgba(0,0,0,.05)!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown .menu>.active.item{background:rgba(0,0,0,.03)!important;font-weight:700!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown.item .menu .item:not(.filtered){display:block}.ui.menu .ui.dropdown .menu>.item .icon:not(.dropdown){display:inline-block;font-size:1em!important;float:none;margin:0 .75em 0 0}.ui.secondary.menu .dropdown.item>.menu,.ui.text.menu .dropdown.item>.menu{border-radius:.28571429rem;margin-top:.35714286em}.ui.menu .pointing.dropdown.item .menu{margin-top:.75em}.ui.inverted.menu .search.dropdown.item>.search,.ui.inverted.menu .search.dropdown.item>.text{color:rgba(255,255,255,.9)}.ui.vertical.menu .dropdown.item>.icon{float:right;content:"\f0da";margin-left:1em}.ui.vertical.menu .dropdown.item .menu{top:0!important;left:100%;min-width:0;margin:0;box-shadow:0 1px 3px 0 rgba(0,0,0,.08);border-radius:0 .28571429rem .28571429rem}.ui.vertical.menu .active.dropdown.item{border-top-right-radius:0;border-bottom-right-radius:0}.ui.vertical.menu .dropdown.active.item{box-shadow:none}.ui.item.menu .dropdown .menu .item{width:100%}.ui.menu .item>.label{background:#999;color:#FFF;margin-left:1em;padding:.3em .78571429em}.ui.vertical.menu .item>.label{background:#999;color:#FFF;margin-top:-.15em;margin-bottom:-.15em;padding:.3em .78571429em;float:right;text-align:center}.ui.menu .item>.floating.label{padding:.3em .78571429em}.ui.menu .item>img:not(.ui){display:inline-block;vertical-align:middle;margin:-.3em 0;width:2.5em}.ui.vertical.menu .item>img:not(.ui):only-child{display:block;max-width:100%;width:auto}.ui.vertical.sidebar.menu>.item:first-child:before{display:block!important}.ui.vertical.sidebar.menu>.item::before{top:auto;bottom:0}@media only screen and (max-width:767px){.ui.menu>.ui.container{width:100%!important;margin-left:0!important;margin-right:0!important}}@media only screen and (min-width:768px){.ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child{border-left:1px solid rgba(34,36,38,.1)}}.ui.link.menu .item:hover,.ui.menu .dropdown.item:hover,.ui.menu .link.item:hover,.ui.menu a.item:hover{cursor:pointer;background:rgba(0,0,0,.03);color:rgba(0,0,0,.95)}.ui.link.menu .item:active,.ui.menu .link.item:active,.ui.menu a.item:active{background:rgba(0,0,0,.03);color:rgba(0,0,0,.95)}.ui.menu .active.item{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);font-weight:400;box-shadow:none}.ui.menu .active.item>i.icon{opacity:1}.ui.menu .active.item:hover,.ui.vertical.menu .active.item:hover{background-color:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.menu .item.disabled,.ui.menu .item.disabled:hover{cursor:default;background-color:transparent!important;color:rgba(40,40,40,.3)}.ui.menu:not(.vertical) .left.item,.ui.menu:not(.vertical) .left.menu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:auto!important}.ui.menu:not(.vertical) .right.item,.ui.menu:not(.vertical) .right.menu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:auto!important}.ui.menu .right.item::before,.ui.menu .right.menu>.item::before{right:auto;left:0}.ui.vertical.menu{display:block;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:#FFF;box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.ui.vertical.menu .item{display:block;background:0 0;border-top:none;border-right:none}.ui.vertical.menu>.item:first-child{border-radius:.28571429rem .28571429rem 0 0}.ui.vertical.menu>.item:last-child{border-radius:0 0 .28571429rem .28571429rem}.ui.vertical.menu .item>i.icon{width:1.18em;float:right;margin:0 0 0 .5em}.ui.vertical.menu .item>.label+i.icon{float:none;margin:0 .5em 0 0}.ui.vertical.menu .item:before{position:absolute;content:'';top:0;left:0;width:100%;height:1px;background:rgba(34,36,38,.1)}.ui.vertical.menu .item:first-child:before{display:none!important}.ui.vertical.menu .item>.menu{margin:.5em -1.14285714em 0}.ui.vertical.menu .menu .item{background:0 0;padding:.5em 1.33333333em;font-size:.85714286em;color:rgba(0,0,0,.5)}.ui.vertical.menu .item .menu .link.item:hover,.ui.vertical.menu .item .menu a.item:hover{color:rgba(0,0,0,.85)}.ui.vertical.menu .menu .item:before{display:none}.ui.vertical.menu .active.item{background:rgba(0,0,0,.05);border-radius:0;box-shadow:none}.ui.vertical.menu>.active.item:first-child{border-radius:.28571429rem .28571429rem 0 0}.ui.vertical.menu>.active.item:last-child{border-radius:0 0 .28571429rem .28571429rem}.ui.vertical.menu>.active.item:only-child{border-radius:.28571429rem}.ui.vertical.menu .active.item .menu .active.item{border-left:none}.ui.vertical.menu .item .menu .active.item{background-color:transparent;font-weight:700;color:rgba(0,0,0,.95)}.ui.tabular.menu{border-radius:0;box-shadow:none!important;border:none;background:none;border-bottom:1px solid #D4D4D5}.ui.tabular.fluid.menu{width:calc(100% + 2px)!important}.ui.tabular.menu .item{background:0 0;border-bottom:none;border-left:1px solid transparent;border-right:1px solid transparent;border-top:2px solid transparent;padding:.92857143em 1.42857143em;color:rgba(0,0,0,.87)}.ui.tabular.menu .item:before{display:none}.ui.tabular.menu .item:hover{background-color:transparent;color:rgba(0,0,0,.8)}.ui.tabular.menu .active.item{background:#FFF;color:rgba(0,0,0,.95);border-top-width:1px;border-color:#D4D4D5;font-weight:700;margin-bottom:-1px;box-shadow:none;border-radius:.28571429rem .28571429rem 0 0!important}.ui.tabular.menu+.attached:not(.top).segment,.ui.tabular.menu+.attached:not(.top).segment+.attached:not(.top).segment{border-top:none;margin-left:0;margin-top:0;margin-right:0;width:100%}.top.attached.segment+.ui.bottom.tabular.menu{position:relative;width:calc(100% + 2px);left:-1px}.ui.bottom.tabular.menu{background:none;border-radius:0;box-shadow:none!important;border-bottom:none;border-top:1px solid #D4D4D5}.ui.bottom.tabular.menu .item{background:0 0;border-left:1px solid transparent;border-right:1px solid transparent;border-bottom:1px solid transparent;border-top:none}.ui.bottom.tabular.menu .active.item{background:#FFF;color:rgba(0,0,0,.95);border-color:#D4D4D5;margin:-1px 0 0;border-radius:0 0 .28571429rem .28571429rem!important}.ui.vertical.tabular.menu{background:none;border-radius:0;box-shadow:none!important;border-bottom:none;border-right:1px solid #D4D4D5}.ui.vertical.tabular.menu .item{background:0 0;border-left:1px solid transparent;border-bottom:1px solid transparent;border-top:1px solid transparent;border-right:none}.ui.vertical.tabular.menu .active.item{background:#FFF;color:rgba(0,0,0,.95);border-color:#D4D4D5;margin:0 -1px 0 0;border-radius:.28571429rem 0 0 .28571429rem!important}.ui.vertical.right.tabular.menu{background:none;border-radius:0;box-shadow:none!important;border-bottom:none;border-right:none;border-left:1px solid #D4D4D5}.ui.vertical.right.tabular.menu .item{background:0 0;border-right:1px solid transparent;border-bottom:1px solid transparent;border-top:1px solid transparent;border-left:none}.ui.vertical.right.tabular.menu .active.item{background:#FFF;color:rgba(0,0,0,.95);border-color:#D4D4D5;margin:0 0 0 -1px;border-radius:0 .28571429rem .28571429rem 0!important}.ui.tabular.menu .active.dropdown.item{margin-bottom:0;border-left:1px solid transparent;border-right:1px solid transparent;border-top:2px solid transparent;border-bottom:none}.ui.pagination.menu{margin:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.ui.pagination.menu .item:last-child{border-radius:0 .28571429rem .28571429rem 0}.ui.pagination.menu .item:last-child:before{display:none}.ui.pagination.menu .item{min-width:3em;text-align:center}.ui.pagination.menu .icon.item i.icon{vertical-align:top}.ui.pagination.menu .active.item{border-top:none;padding-top:.92857143em;background-color:rgba(0,0,0,.05);color:rgba(0,0,0,.95);box-shadow:none}.ui.secondary.menu{background:0 0;margin-left:-.35714286em;margin-right:-.35714286em;border-radius:0;border:none;box-shadow:none}.ui.secondary.menu .item{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;box-shadow:none;border:none;padding:.78571429em .92857143em;margin:0 .35714286em;background:0 0;-webkit-transition:color .1s ease;transition:color .1s ease;border-radius:.28571429rem}.ui.secondary.menu .item:before{display:none!important}.ui.secondary.menu .header.item{border-radius:0;border-right:none;background:none}.ui.secondary.menu .item>img:not(.ui){margin:0}.ui.secondary.menu .dropdown.item:hover,.ui.secondary.menu .link.item:hover,.ui.secondary.menu a.item:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.secondary.menu .active.item{box-shadow:none;background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);border-radius:.28571429rem}.ui.secondary.menu .active.item:hover{box-shadow:none;background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.secondary.inverted.menu .link.item,.ui.secondary.inverted.menu a.item{color:rgba(255,255,255,.7)!important}.ui.secondary.inverted.menu .dropdown.item:hover,.ui.secondary.inverted.menu .link.item:hover,.ui.secondary.inverted.menu a.item:hover{background:rgba(255,255,255,.08);color:#fff!important}.ui.secondary.inverted.menu .active.item{background:rgba(255,255,255,.15);color:#fff!important}.ui.secondary.item.menu{margin-left:0;margin-right:0}.ui.secondary.item.menu .item:last-child{margin-right:0}.ui.secondary.attached.menu{box-shadow:none}.ui.vertical.secondary.menu .item:not(.dropdown)>.menu{margin:0 -.92857143em}.ui.vertical.secondary.menu .item:not(.dropdown)>.menu>.item{margin:0;padding:.5em 1.33333333em}.ui.secondary.vertical.menu>.item{border:none;margin:0 0 .35714286em;border-radius:.28571429rem!important}.ui.secondary.vertical.menu>.header.item{border-radius:0}.ui.secondary.inverted.menu,.ui.vertical.secondary.menu .item>.menu .item{background-color:transparent}.ui.secondary.pointing.menu{margin-left:0;margin-right:0;border-bottom:2px solid rgba(34,36,38,.15)}.ui.secondary.pointing.menu .item{border-bottom-color:transparent;border-bottom-style:solid;border-radius:0;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;margin:0 0 -2px;padding:.85714286em 1.14285714em;border-bottom-width:2px;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.secondary.pointing.menu .header.item{color:rgba(0,0,0,.85)!important}.ui.secondary.pointing.menu .text.item{box-shadow:none!important}.ui.secondary.pointing.menu .item:after{display:none}.ui.secondary.pointing.menu .dropdown.item:hover,.ui.secondary.pointing.menu .link.item:hover,.ui.secondary.pointing.menu a.item:hover{background-color:transparent;color:rgba(0,0,0,.87)}.ui.secondary.pointing.menu .dropdown.item:active,.ui.secondary.pointing.menu .link.item:active,.ui.secondary.pointing.menu a.item:active{background-color:transparent;border-color:rgba(34,36,38,.15)}.ui.secondary.pointing.menu .active.item{background-color:transparent;box-shadow:none;border-color:#1B1C1D;font-weight:700;color:rgba(0,0,0,.95)}.ui.secondary.pointing.menu .active.item:hover{border-color:#1B1C1D;color:rgba(0,0,0,.95)}.ui.secondary.pointing.menu .active.dropdown.item{border-color:transparent}.ui.secondary.vertical.pointing.menu{border-bottom-width:0;border-right-width:2px;border-right-style:solid;border-right-color:rgba(34,36,38,.15)}.ui.secondary.vertical.pointing.menu .item{border-bottom:none;border-right-style:solid;border-right-color:transparent;border-radius:0!important;margin:0 -2px 0 0;border-right-width:2px}.ui.secondary.vertical.pointing.menu .active.item{border-color:#1B1C1D}.ui.secondary.inverted.pointing.menu{border-width:2px;border-color:rgba(34,36,38,.15)}.ui.secondary.inverted.pointing.menu .item{color:rgba(255,255,255,.9)}.ui.secondary.inverted.pointing.menu .header.item{color:#FFF!important}.ui.secondary.inverted.pointing.menu .link.item:hover,.ui.secondary.inverted.pointing.menu a.item:hover{color:rgba(0,0,0,.95)}.ui.secondary.inverted.pointing.menu .active.item{border-color:#FFF;color:#fff}.ui.text.menu{background:none;border-radius:0;box-shadow:none;border:none;margin:1em -.5em}.ui.text.menu .item{border-radius:0;box-shadow:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;margin:0;padding:.35714286em .5em;font-weight:400;color:rgba(0,0,0,.6);-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.text.menu .item:before,.ui.text.menu .menu .item:before{display:none!important}.ui.text.menu .header.item{background-color:transparent;opacity:1;color:rgba(0,0,0,.85);font-size:.92857143em;text-transform:uppercase;font-weight:700}.ui.text.item.menu .item,.ui.text.menu .item>img:not(.ui){margin:0}.ui.vertical.text.menu{margin:1em 0}.ui.vertical.text.menu:first-child{margin-top:0}.ui.vertical.text.menu:last-child{margin-bottom:0}.ui.vertical.text.menu .item{margin:.57142857em 0;padding-left:0;padding-right:0}.ui.vertical.text.menu .item>i.icon{float:none;margin:0 .35714286em 0 0}.ui.vertical.text.menu .header.item{margin:.57142857em 0 .71428571em}.ui.vertical.text.menu .item:not(.dropdown)>.menu{margin:0}.ui.vertical.text.menu .item:not(.dropdown)>.menu>.item{margin:0;padding:.5em 0}.ui.text.menu .item:hover{opacity:1;background-color:transparent}.ui.text.menu .active.item{background-color:transparent;border:none;box-shadow:none;font-weight:400;color:rgba(0,0,0,.95)}.ui.text.menu .active.item:hover{background-color:transparent}.ui.text.attached.menu,.ui.text.pointing.menu .active.item:after{box-shadow:none}.ui.inverted.text.menu,.ui.inverted.text.menu .active.item,.ui.inverted.text.menu .item,.ui.inverted.text.menu .item:hover{background-color:transparent!important}.ui.fluid.text.menu{margin-left:0;margin-right:0}.ui.vertical.icon.menu{display:inline-block;width:auto}.ui.icon.menu .item{height:auto;text-align:center;color:#1B1C1D}.ui.icon.menu .item>.icon:not(.dropdown){margin:0;opacity:1}.ui.icon.menu .icon:before{opacity:1}.ui.menu .icon.item>.icon{width:auto;margin:0 auto}.ui.vertical.icon.menu .item>.icon:not(.dropdown){display:block;opacity:1;margin:0 auto;float:none}.ui.inverted.icon.menu .item{color:#FFF}.ui.labeled.icon.menu{text-align:center}.ui.labeled.icon.menu .item{min-width:6em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.ui.labeled.icon.menu .item>.icon:not(.dropdown){height:1em;display:block;font-size:1.71428571em!important;margin:0 auto .5rem!important}.ui.fluid.labeled.icon.menu>.item{min-width:0}@media only screen and (max-width:767px){.ui.stackable.menu{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.ui.stackable.menu .item{width:100%!important}.ui.stackable.menu .item:before{position:absolute;content:'';top:auto;bottom:0;left:0;width:100%;height:1px;background:rgba(34,36,38,.1)}.ui.stackable.menu .left.item,.ui.stackable.menu .left.menu{margin-right:0!important}.ui.stackable.menu .right.item,.ui.stackable.menu .right.menu{margin-left:0!important}}.ui.menu .red.active.item,.ui.red.menu .active.item{border-color:#DB2828!important;color:#DB2828!important}.ui.menu .orange.active.item,.ui.orange.menu .active.item{border-color:#F2711C!important;color:#F2711C!important}.ui.menu .yellow.active.item,.ui.yellow.menu .active.item{border-color:#FBBD08!important;color:#FBBD08!important}.ui.menu .olive.active.item,.ui.olive.menu .active.item{border-color:#B5CC18!important;color:#B5CC18!important}.ui.green.menu .active.item,.ui.menu .green.active.item{border-color:#21BA45!important;color:#21BA45!important}.ui.menu .teal.active.item,.ui.teal.menu .active.item{border-color:#00B5AD!important;color:#00B5AD!important}.ui.blue.menu .active.item,.ui.menu .blue.active.item{border-color:#2185D0!important;color:#2185D0!important}.ui.menu .violet.active.item,.ui.violet.menu .active.item{border-color:#6435C9!important;color:#6435C9!important}.ui.menu .purple.active.item,.ui.purple.menu .active.item{border-color:#A333C8!important;color:#A333C8!important}.ui.menu .pink.active.item,.ui.pink.menu .active.item{border-color:#E03997!important;color:#E03997!important}.ui.brown.menu .active.item,.ui.menu .brown.active.item{border-color:#A5673F!important;color:#A5673F!important}.ui.grey.menu .active.item,.ui.menu .grey.active.item{border-color:#767676!important;color:#767676!important}.ui.inverted.menu{border:0 solid transparent;background:#1B1C1D;box-shadow:none}.ui.inverted.menu .item,.ui.inverted.menu .item>a:not(.ui){background:0 0;color:rgba(255,255,255,.9)}.ui.inverted.menu .item.menu{background:0 0}.ui.inverted.menu .item:before,.ui.vertical.inverted.menu .item:before{background:rgba(255,255,255,.08)}.ui.vertical.inverted.menu .menu .item,.ui.vertical.inverted.menu .menu .item a:not(.ui){color:rgba(255,255,255,.5)}.ui.inverted.menu .header.item{margin:0;background:0 0;box-shadow:none}.ui.inverted.menu .item.disabled,.ui.inverted.menu .item.disabled:hover{color:rgba(225,225,225,.3)}.ui.inverted.menu .dropdown.item:hover,.ui.inverted.menu .link.item:hover,.ui.inverted.menu a.item:hover,.ui.link.inverted.menu .item:hover{background:rgba(255,255,255,.08);color:#fff}.ui.vertical.inverted.menu .item .menu .link.item:hover,.ui.vertical.inverted.menu .item .menu a.item:hover{background:0 0;color:#fff}.ui.inverted.menu .link.item:active,.ui.inverted.menu a.item:active{background:rgba(255,255,255,.08);color:#fff}.ui.inverted.menu .active.item{background:rgba(255,255,255,.15);color:#fff!important}.ui.inverted.vertical.menu .item .menu .active.item{background:0 0;color:#FFF}.ui.inverted.pointing.menu .active.item:after{background:#3D3E3F!important;margin:0!important;box-shadow:none!important;border:none!important}.ui.inverted.menu .active.item:hover{background:rgba(255,255,255,.15);color:#FFF!important}.ui.inverted.pointing.menu .active.item:hover:after{background:#3D3E3F!important}.ui.floated.menu{float:left;margin:0 .5rem 0 0}.ui.floated.menu .item:last-child:before{display:none}.ui.right.floated.menu{float:right;margin:0 0 0 .5rem}.ui.inverted.menu .red.active.item,.ui.inverted.red.menu{background-color:#DB2828}.ui.inverted.red.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.red.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .orange.active.item,.ui.inverted.orange.menu{background-color:#F2711C}.ui.inverted.orange.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.orange.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .yellow.active.item,.ui.inverted.yellow.menu{background-color:#FBBD08}.ui.inverted.yellow.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.yellow.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .olive.active.item,.ui.inverted.olive.menu{background-color:#B5CC18}.ui.inverted.olive.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.olive.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.green.menu,.ui.inverted.menu .green.active.item{background-color:#21BA45}.ui.inverted.green.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.green.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .teal.active.item,.ui.inverted.teal.menu{background-color:#00B5AD}.ui.inverted.teal.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.teal.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.blue.menu,.ui.inverted.menu .blue.active.item{background-color:#2185D0}.ui.inverted.blue.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.blue.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .violet.active.item,.ui.inverted.violet.menu{background-color:#6435C9}.ui.inverted.violet.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.violet.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .purple.active.item,.ui.inverted.purple.menu{background-color:#A333C8}.ui.inverted.purple.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.purple.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .pink.active.item,.ui.inverted.pink.menu{background-color:#E03997}.ui.inverted.pink.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.pink.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.brown.menu,.ui.inverted.menu .brown.active.item{background-color:#A5673F}.ui.inverted.brown.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.brown.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.grey.menu,.ui.inverted.menu .grey.active.item{background-color:#767676}.ui.inverted.grey.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.grey.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.fitted.menu .item,.ui.fitted.menu .item .menu .item,.ui.menu .fitted.item{padding:0}.ui.horizontally.fitted.menu .item,.ui.horizontally.fitted.menu .item .menu .item,.ui.menu .horizontally.fitted.item{padding-top:.92857143em;padding-bottom:.92857143em}.ui.menu .vertically.fitted.item,.ui.vertically.fitted.menu .item,.ui.vertically.fitted.menu .item .menu .item{padding-left:1.14285714em;padding-right:1.14285714em}.ui.borderless.menu .item .menu .item:before,.ui.borderless.menu .item:before,.ui.menu .borderless.item:before{background:0 0!important}.ui.compact.menu{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin:0;vertical-align:middle}.ui.compact.vertical.menu{display:inline-block;width:auto!important}.ui.compact.menu .item:last-child{border-radius:0 .28571429rem .28571429rem 0}.ui.compact.menu .item:last-child:before{display:none}.ui.compact.vertical.menu .item:last-child::before{display:block}.ui.menu.fluid,.ui.vertical.menu.fluid{width:100%!important}.ui.item.menu,.ui.item.menu .item{width:100%;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important;text-align:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.ui.item.menu .item:last-child:before{display:none}.ui.menu.two.item .item{width:50%}.ui.menu.three.item .item{width:33.333%}.ui.menu.four.item .item{width:25%}.ui.menu.five.item .item{width:20%}.ui.menu.six.item .item{width:16.666%}.ui.menu.seven.item .item{width:14.285%}.ui.menu.eight.item .item{width:12.5%}.ui.menu.nine.item .item{width:11.11%}.ui.menu.ten.item .item{width:10%}.ui.menu.eleven.item .item{width:9.09%}.ui.menu.twelve.item .item{width:8.333%}.ui.menu.fixed{position:fixed;z-index:101;margin:0;width:100%}.ui.menu.fixed,.ui.menu.fixed .item:first-child,.ui.menu.fixed .item:last-child{border-radius:0!important}.ui.fixed.menu,.ui[class*="top fixed"].menu{top:0;left:0;right:auto;bottom:auto}.ui[class*="top fixed"].menu{border-top:none;border-left:none;border-right:none}.ui[class*="right fixed"].menu{border-top:none;border-bottom:none;border-right:none;top:0;right:0;left:auto;bottom:auto;width:auto;height:100%}.ui[class*="bottom fixed"].menu{border-bottom:none;border-left:none;border-right:none;bottom:0;left:0;top:auto;right:auto}.ui[class*="left fixed"].menu{border-top:none;border-bottom:none;border-left:none;top:0;left:0;right:auto;bottom:auto;width:auto;height:100%}.ui.fixed.menu+.ui.grid{padding-top:2.75rem}.ui.pointing.menu .item:after{visibility:hidden;position:absolute;content:'';top:100%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);background:0 0;margin:.5px 0 0;width:.57142857em;height:.57142857em;border:none;border-bottom:1px solid #D4D4D5;border-right:1px solid #D4D4D5;z-index:2;-webkit-transition:background .1s ease;transition:background .1s ease}.ui.vertical.pointing.menu .item:after{position:absolute;top:50%;right:0;bottom:auto;left:auto;-webkit-transform:translateX(50%) translateY(-50%) rotate(45deg);-ms-transform:translateX(50%) translateY(-50%) rotate(45deg);transform:translateX(50%) translateY(-50%) rotate(45deg);margin:0 -.5px 0 0;border:none;border-top:1px solid #D4D4D5;border-right:1px solid #D4D4D5}.ui.pointing.menu .active.item:after{visibility:visible}.ui.pointing.menu .active.dropdown.item:after{visibility:hidden}.ui.pointing.menu .active.item .menu .active.item:after,.ui.pointing.menu .dropdown.active.item:after{display:none}.ui.pointing.menu .active.item:after,.ui.pointing.menu .active.item:hover:after,.ui.vertical.pointing.menu .active.item:after,.ui.vertical.pointing.menu .active.item:hover:after{background-color:#F2F2F2}.ui.vertical.pointing.menu .menu .active.item:after{background-color:#FFF}.ui.attached.menu{top:0;bottom:0;border-radius:0;margin:0 -1px;width:calc(100% + 2px);max-width:calc(100% + 2px);box-shadow:none}.ui.attached+.ui.attached.menu:not(.top){border-top:none}.ui[class*="top attached"].menu{bottom:0;margin-bottom:0;top:0;margin-top:1rem;border-radius:.28571429rem .28571429rem 0 0}.ui.menu[class*="top attached"]:first-child{margin-top:0}.ui[class*="bottom attached"].menu{bottom:0;margin-top:0;top:0;margin-bottom:1rem;box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;border-radius:0 0 .28571429rem .28571429rem}.ui[class*="bottom attached"].menu:last-child{margin-bottom:0}.ui.top.attached.menu>.item:first-child{border-radius:.28571429rem 0 0}.ui.bottom.attached.menu>.item:first-child{border-radius:0 0 0 .28571429rem}.ui.attached.menu:not(.tabular){border:1px solid #D4D4D5}.ui.attached.inverted.menu{border:none}.ui.attached.tabular.menu{margin-left:0;margin-right:0;width:100%}.ui.mini.menu{font-size:.78571429rem}.ui.mini.vertical.menu{width:9rem}.ui.tiny.menu{font-size:.85714286rem}.ui.tiny.vertical.menu{width:11rem}.ui.small.menu{font-size:.92857143rem}.ui.small.vertical.menu{width:13rem}.ui.menu{font-size:1rem}.ui.vertical.menu{width:15rem}.ui.large.menu{font-size:1.07142857rem}.ui.large.vertical.menu{width:18rem}.ui.huge.menu{font-size:1.14285714rem}.ui.huge.vertical.menu{width:20rem}.ui.big.menu{font-size:1.21428571rem}.ui.big.vertical.menu{width:22rem}.ui.massive.menu{font-size:1.28571429rem}.ui.massive.vertical.menu{width:25rem}
-//Semantic UI pagination
-.pagination-wrapper {
- border-bottom: 2px solid whitesmoke;
- border-right: 2px solid whitesmoke;
- border-left: 2px solid whitesmoke;
-}
-
.semantic-ui-pagination {
.ui.menu {
position: relative;
@@ -49,4 +42,4 @@
border: none;
box-shadow: none;
}
-}
\ No newline at end of file
+}
diff --git a/app/javascript/components/admin/manage_users/BannedPendingUsersTable.jsx b/app/javascript/components/admin/manage_users/BannedPendingUsersTable.jsx
index d9e11ec33d91551fc6ed13a6637e52e00e109d6f..ee020957a9ef0fe108e57bbc6237cc592b5b579c 100644
--- a/app/javascript/components/admin/manage_users/BannedPendingUsersTable.jsx
+++ b/app/javascript/components/admin/manage_users/BannedPendingUsersTable.jsx
@@ -5,9 +5,12 @@ import PropTypes from 'prop-types';
import BannedPendingRow from './BannedPendingRow';
import EmptyUsersList from './EmptyUsersList';
import ManageUsersPendingBannedRowPlaceHolder from './ManageUsersPendingBannedRowPlaceHolder';
+import Pagination from '../../shared_components/Pagination';
// pendingTable prop is true when table is being used for pending data, false when table is being used for banned data
-export default function BannedPendingUsersTable({ users, pendingTable, isLoading }) {
+export default function BannedPendingUsersTable({
+ users, pendingTable, isLoading, pagination, setPage,
+}) {
const { t } = useTranslation();
if (!isLoading && users.length === 0) {
@@ -43,6 +46,20 @@ export default function BannedPendingUsersTable({ users, pendingTable, isLoading
)
}
</tbody>
+ { (pagination?.pages > 1)
+ && (
+ <tfoot>
+ <tr>
+ <td colSpan={12}>
+ <Pagination
+ page={pagination?.page}
+ totalPages={pagination?.pages}
+ setPage={setPage}
+ />
+ </td>
+ </tr>
+ </tfoot>
+ )}
</Table>
</div>
);
@@ -50,6 +67,10 @@ export default function BannedPendingUsersTable({ users, pendingTable, isLoading
BannedPendingUsersTable.defaultProps = {
users: [],
+ pagination: {
+ page: 1,
+ pages: 1,
+ },
};
BannedPendingUsersTable.propTypes = {
@@ -60,4 +81,9 @@ BannedPendingUsersTable.propTypes = {
})),
pendingTable: PropTypes.bool.isRequired,
isLoading: PropTypes.bool.isRequired,
+ pagination: PropTypes.shape({
+ page: PropTypes.number.isRequired,
+ pages: PropTypes.number.isRequired,
+ }),
+ setPage: PropTypes.func.isRequired,
};
diff --git a/app/javascript/components/admin/manage_users/BannedUsers.jsx b/app/javascript/components/admin/manage_users/BannedUsers.jsx
index c8c4fa963821cca0a0585a966e3fe038d2dfc23f..3a37e3e351b40f65b6cac4c02c80da7c778d9a30 100644
--- a/app/javascript/components/admin/manage_users/BannedUsers.jsx
+++ b/app/javascript/components/admin/manage_users/BannedUsers.jsx
@@ -1,7 +1,6 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
-import Pagination from '../../shared_components/Pagination';
import useBannedUsers from '../../../hooks/queries/admin/manage_users/useBannedUsers';
import BannedPendingUsersTable from './BannedPendingUsersTable';
import NoSearchResults from '../../shared_components/search/NoSearchResults';
@@ -20,17 +19,13 @@ export default function BannedUsers({ searchInput }) {
<NoSearchResults text={t('user.search_not_found')} searchInput={searchInput} />
</div>
) : (
- <div>
- <BannedPendingUsersTable users={bannedUsers?.data} pendingTable={false} isLoading={isLoading} />
- {!isLoading
- && (
- <Pagination
- page={bannedUsers.meta.page}
- totalPages={bannedUsers.meta.pages}
+ <BannedPendingUsersTable
+ users={bannedUsers?.data}
+ pendingTable={false}
+ isLoading={isLoading}
+ pagination={bannedUsers?.meta}
setPage={setPage}
/>
- )}
- </div>
)
}
</div>
diff --git a/app/javascript/components/admin/manage_users/InvitedUsers.jsx b/app/javascript/components/admin/manage_users/InvitedUsersTable.jsx
similarity index 90%
rename from app/javascript/components/admin/manage_users/InvitedUsers.jsx
rename to app/javascript/components/admin/manage_users/InvitedUsersTable.jsx
index 921616aeb64d135a548b3601d58462487aac0378..d01a43786f7e6928d2d1c23429882d96941c8fcb 100644
--- a/app/javascript/components/admin/manage_users/InvitedUsers.jsx
+++ b/app/javascript/components/admin/manage_users/InvitedUsersTable.jsx
@@ -12,7 +12,7 @@ import { localizeDateTimeString } from '../../../helpers/DateTimeHelper';
import { useAuth } from '../../../contexts/auth/AuthProvider';
import ManageUsersInvitedRowPlaceHolder from './ManageUsersInvitedRowPlaceHolder';
-export default function InvitedUsers({ searchInput }) {
+export default function InvitedUsersTable({ searchInput }) {
const { t } = useTranslation();
const [page, setPage] = useState();
const { isLoading, data: invitations } = useInvitations(searchInput, page);
@@ -63,28 +63,25 @@ export default function InvitedUsers({ searchInput }) {
)
}
</tbody>
- </Table>
- <div className="pagination-wrapper">
{ invitations?.meta && (
- <Pagination
- page={invitations?.meta?.page}
- totalPages={invitations?.meta?.pages}
- setPage={setPage}
- />
+ <Pagination
+ page={invitations?.meta?.page}
+ totalPages={invitations?.meta?.pages}
+ setPage={setPage}
+ />
) }
- </div>
+ </Table>
</div>
-
)
}
</div>
);
}
-InvitedUsers.propTypes = {
+InvitedUsersTable.propTypes = {
searchInput: PropTypes.string,
};
-InvitedUsers.defaultProps = {
+InvitedUsersTable.defaultProps = {
searchInput: '',
};
diff --git a/app/javascript/components/admin/manage_users/ManageUsers.jsx b/app/javascript/components/admin/manage_users/ManageUsers.jsx
index 0e3d2803f475f12b68329a1d03f2959a292c2a9e..ba370e8ef69962cf69983f71acde85dd76465e4c 100644
--- a/app/javascript/components/admin/manage_users/ManageUsers.jsx
+++ b/app/javascript/components/admin/manage_users/ManageUsers.jsx
@@ -13,7 +13,7 @@ import UserSignupForm from './forms/UserSignupForm';
import useSiteSetting from '../../../hooks/queries/site_settings/useSiteSetting';
import SearchBar from '../../shared_components/search/SearchBar';
import InviteUserForm from './forms/InviteUserForm';
-import InvitedUsers from './InvitedUsers';
+import InvitedUsersTable from './InvitedUsersTable';
import PendingUsers from './PendingUsers';
import BannedUsers from './BannedUsers';
import { useAuth } from '../../../contexts/auth/AuthProvider';
@@ -88,7 +88,7 @@ export default function ManageUsers() {
{ registrationMethod === 'invite'
&& (
<Tab eventKey="invited" title={t('admin.manage_users.invited_tab')}>
- <InvitedUsers input={searchInput} />
+ <InvitedUsersTable input={searchInput} />
</Tab>
)}
</Tabs>
diff --git a/app/javascript/components/admin/manage_users/ManageUsersTable.jsx b/app/javascript/components/admin/manage_users/ManageUsersTable.jsx
index 84b66ff43b9e6975c2086e40e1830dcdedf4fd35..d8eaaa7921adc052e0c9a46cf3a0b04b777a53dc 100644
--- a/app/javascript/components/admin/manage_users/ManageUsersTable.jsx
+++ b/app/javascript/components/admin/manage_users/ManageUsersTable.jsx
@@ -5,13 +5,15 @@ import { useTranslation } from 'react-i18next';
import ManageUserRow from './ManageUserRow';
import SortBy from '../../shared_components/search/SortBy';
import ManageUsersRowPlaceHolder from './ManageUsersRowPlaceHolder';
-
+import Pagination from '../../shared_components/Pagination';
import EmptyUsersList from './EmptyUsersList';
-export default function ManageUsersTable({ users, isLoading }) {
+export default function ManageUsersTable({
+ users, isLoading, pagination, setPage,
+}) {
const { t } = useTranslation();
- if (!isLoading && users.length === 0) {
+ if (!isLoading && users?.length === 0) {
return <EmptyUsersList text={t('admin.manage_users.empty_active_users')} subtext={t('admin.manage_users.empty_active_users_subtext')} />;
}
@@ -40,12 +42,30 @@ export default function ManageUsersTable({ users, isLoading }) {
)
}
</tbody>
+ { (pagination?.pages > 1)
+ && (
+ <tfoot>
+ <tr>
+ <td colSpan={12}>
+ <Pagination
+ page={pagination?.page}
+ totalPages={pagination?.pages}
+ setPage={setPage}
+ />
+ </td>
+ </tr>
+ </tfoot>
+ )}
</Table>
);
}
ManageUsersTable.defaultProps = {
users: [],
+ pagination: {
+ page: 1,
+ pages: 1,
+ },
};
ManageUsersTable.propTypes = {
@@ -61,4 +81,9 @@ ManageUsersTable.propTypes = {
}).isRequired,
})),
isLoading: PropTypes.bool.isRequired,
+ pagination: PropTypes.shape({
+ page: PropTypes.number.isRequired,
+ pages: PropTypes.number.isRequired,
+ }),
+ setPage: PropTypes.func.isRequired,
};
diff --git a/app/javascript/components/admin/manage_users/PendingUsers.jsx b/app/javascript/components/admin/manage_users/PendingUsers.jsx
index 7dee85404258e866c600009ef3d3a7bdc4a8e8d7..54adadea11f1dbab9205ef5df763d10ca7c6b41b 100644
--- a/app/javascript/components/admin/manage_users/PendingUsers.jsx
+++ b/app/javascript/components/admin/manage_users/PendingUsers.jsx
@@ -1,7 +1,6 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
-import Pagination from '../../shared_components/Pagination';
import usePendingUsers from '../../../hooks/queries/admin/manage_users/usePendingUsers';
import BannedPendingUsersTable from './BannedPendingUsersTable';
import NoSearchResults from '../../shared_components/search/NoSearchResults';
@@ -20,19 +19,9 @@ export default function PendingUsers({ searchInput }) {
<NoSearchResults text={t('user.search_not_found')} searchInput={searchInput} />
</div>
) : (
- <div>
- <BannedPendingUsersTable users={users?.data} pendingTable isLoading={isLoading} />
- {!isLoading
- && (
- <Pagination
- page={users?.meta.page}
- totalPages={users?.meta.pages}
- setPage={setPage}
- />
- )}
- </div>
+ <BannedPendingUsersTable users={users?.data} pendingTable isLoading={isLoading} pagination={users?.meta} setPage={setPage} />
)
- }
+ }
</div>
);
}
diff --git a/app/javascript/components/admin/manage_users/VerifiedUsers.jsx b/app/javascript/components/admin/manage_users/VerifiedUsers.jsx
index 36b83a93cca5488af68c1f499de8774ccbf8e2f4..2e66ef8429e5eda26bc7d1acd628f3f1783da7f6 100644
--- a/app/javascript/components/admin/manage_users/VerifiedUsers.jsx
+++ b/app/javascript/components/admin/manage_users/VerifiedUsers.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import useVerifiedUsers from '../../../hooks/queries/admin/manage_users/useVerifiedUsers';
import ManageUsersTable from './ManageUsersTable';
-import Pagination from '../../shared_components/Pagination';
import NoSearchResults from '../../shared_components/search/NoSearchResults';
export default function VerifiedUsers({ searchInput }) {
@@ -20,18 +19,7 @@ export default function VerifiedUsers({ searchInput }) {
<NoSearchResults text={t('user.search_not_found')} searchInput={searchInput} />
</div>
) : (
- <div>
- <ManageUsersTable users={verifiedUsers?.data} isLoading={isLoading} />
- {!isLoading
- && (
- <Pagination
- page={verifiedUsers.meta.page}
- totalPages={verifiedUsers.meta.pages}
- setPage={setPage}
- />
- )}
-
- </div>
+ <ManageUsersTable users={verifiedUsers?.data} isLoading={isLoading} pagination={verifiedUsers?.meta} setPage={setPage} />
)
}
</div>
diff --git a/app/javascript/components/admin/server_rooms/ServerRooms.jsx b/app/javascript/components/admin/server_rooms/ServerRooms.jsx
index 258ca9b77b730ad368acbc1823e2769f98161a84..d920d86356e4b0672a986ca5f8ddd6e08a96e653 100644
--- a/app/javascript/components/admin/server_rooms/ServerRooms.jsx
+++ b/app/javascript/components/admin/server_rooms/ServerRooms.jsx
@@ -89,15 +89,21 @@ export default function ServerRooms() {
)
}
</tbody>
+ { (serverRooms?.meta?.pages > 1)
+ && (
+ <tfoot>
+ <tr>
+ <td colSpan={12}>
+ <Pagination
+ page={serverRooms?.meta?.page}
+ totalPages={serverRooms?.meta?.pages}
+ setPage={setPage}
+ />
+ </td>
+ </tr>
+ </tfoot>
+ )}
</Table>
- {!isLoading
- && (
- <Pagination
- page={serverRooms.meta.page}
- totalPages={serverRooms.meta.pages}
- setPage={setPage}
- />
- )}
</div>
)
)
diff --git a/app/javascript/components/recordings/RecordingsList.jsx b/app/javascript/components/recordings/RecordingsList.jsx
index 61b26f5f117b709ab701f515789e8e2ea4f27318..5ba679eec7c860a4fdc26ae4a3b935b7c7a52276 100644
--- a/app/javascript/components/recordings/RecordingsList.jsx
+++ b/app/javascript/components/recordings/RecordingsList.jsx
@@ -60,15 +60,21 @@ export default function RecordingsList({
)))
}
</tbody>
+ { (recordings?.meta?.pages > 1)
+ && (
+ <tfoot>
+ <tr>
+ <td colSpan={12}>
+ <Pagination
+ page={recordings?.meta?.page}
+ totalPages={recordings?.meta?.pages}
+ setPage={setPage}
+ />
+ </td>
+ </tr>
+ </tfoot>
+ )}
</Table>
- {!isLoading
- && (
- <Pagination
- page={recordings?.meta?.page}
- totalPages={recordings?.meta?.pages}
- setPage={setPage}
- />
- )}
</Card>
)
}
diff --git a/app/javascript/components/shared_components/Pagination.jsx b/app/javascript/components/shared_components/Pagination.jsx
index 679cd3b110cbd31a13c7da7e5cb31e0c080f192f..b715a8a1a8fea0c80bb087eeff5da720569b4444 100644
--- a/app/javascript/components/shared_components/Pagination.jsx
+++ b/app/javascript/components/shared_components/Pagination.jsx
@@ -14,7 +14,7 @@ export default function Pagination({
if (totalPages > 1) {
return (
- <div className="semantic-ui-pagination pagination-wrapper">
+ <div className="semantic-ui-pagination">
<PaginationSemanticUi
secondary
defaultActivePage={page}