diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 538ea29f3d..e7851bdb96 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -14,6 +14,7 @@ @use "shared/notifier"; @use "shared/dashboard"; +@use "shared/data_tables_overide"; @use "shared/flashes"; @use "shared/footer"; @use "shared/form"; diff --git a/app/assets/stylesheets/shared/data_tables_overide.scss b/app/assets/stylesheets/shared/data_tables_overide.scss new file mode 100644 index 0000000000..abef82dab0 --- /dev/null +++ b/app/assets/stylesheets/shared/data_tables_overide.scss @@ -0,0 +1,11 @@ +/** + Needed to display the prev, next, number, and ellipsis buttons on the same line. This causes issues on mobile with + lots of pages, but there is no current way to change the number of pages in a view or in JS based on window size. + */ +.dataTables_paginate { + white-space: nowrap !important; + + span { + display: inline-block !important; + } +} diff --git a/app/assets/stylesheets/shared/layout.scss b/app/assets/stylesheets/shared/layout.scss index ecb473d836..e246224ca7 100644 --- a/app/assets/stylesheets/shared/layout.scss +++ b/app/assets/stylesheets/shared/layout.scss @@ -114,51 +114,3 @@ div.row.volunteer-filters { } } } - - - -@media only screen and (max-width: 2560px) { - - #casa-cases_paginate.dataTables_paginate.paging_simple_numbers { - position: absolute; - right: 0.3%; - span.ellipsis { - position: absolute; - right: 10.5%; - bottom: 12%; - } - } - - #casa-cases_next.paginate_button.next, - #volunteers_next.paginate_button.next - { - position: absolute; - bottom: 48%; - right: 0.4%; - } - - #volunteers_previous.paginate_button.previous, - #casa-cases_previous.paginate_button.previous{ - margin-right: 100px; - } - - #volunteers_paginate.dataTables_paginate.paging_simple_numbers { - position: absolute; - right: 0.3%; - margin-top: 15px; - span.ellipsis { - position: absolute; - right: 10%; - bottom: 12%; - } - } - -} - -@media only screen and (min-width: 768px) and (max-width: 992px) { - - .dataTables_wrapper .dataTables_info { - width: 50%; - } - -}