Further styling improvements

Refs #2575

modules/backend/widgets/lists/partials/_list_pagination.htm

@@ -1,72 +1,70 @@
-<div class="loading-indicator-container size-small">
+<div class="loading-indicator-container size-small pull-right">
     <div class="control-pagination">
         <span class="page-iteration">
             <?= e(trans('backend::lang.list.pagination', ['from' => $pageFrom, 'to' => $pageTo, 'total' => $recordTotal])) ?>
         </span>
-        <?php if ($pageCurrent > 2): ?>
-        <a
-            href="javascript:;"
-            class="page-first"
-            data-request="<?= $this->getEventHandler('onPaginate') ?>"
-            data-request-data="page: 1"
-            data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>"
-            title="<?= e(trans('backend::lang.list.first_page')) ?>"></a>
-        <?php else: ?>
-        <span
-            href="javascript:;"
-            class="page-first"
-            title="<?= e(trans('backend::lang.list.first_page')) ?>"></span>
-        <?php endif ?>
-        <?php if ($pageCurrent > 1): ?>
-        <a
-            href="javascript:;"
-            class="page-back"
-            data-request="<?= $this->getEventHandler('onPaginate') ?>"
-            data-request-data="page: <?= $pageCurrent-1 ?>"
-            data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>"
-            title="<?= e(trans('backend::lang.list.prev_page')) ?>"></a>
-        <?php else: ?>
-        <span
-            href="javascript:;"
-            class="page-back"
-            title="<?= e(trans('backend::lang.list.prev_page')) ?>"></span>
-        <?php endif ?>
-        <select
-            name="page"
-            class="form-control input-sm custom-select"
-            data-request="<?= $this->getEventHandler('onPaginate') ?>"
-            data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>">
-            <?php for($i = 1; $i <= $pageLast ; $i++): ?>
-            <option value="<?= $i ?>" <?= $i === $pageCurrent ? 'selected' : '' ?>><?= $i ?></option>
-            <?php endfor ?>
-        </select>
-        <?php if ($pageLast > $pageCurrent): ?>
-        <a
-            href="javascript:;"
-            class="page-next"
-            data-request-data="page: <?= $pageCurrent+1 ?>"
-            data-request="<?= $this->getEventHandler('onPaginate') ?>"
-            data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>"
-            title="<?= e(trans('backend::lang.list.next_page')) ?>"></a>
-        <?php else: ?>
-        <span
-            href="javascript:;"
-            class="page-next"
-            title="<?= e(trans('backend::lang.list.next_page')) ?>"></span>
-        <?php endif ?>
-        <?php if ($pageLast > $pageCurrent + 1): ?>
-        <a
-            href="javascript:;"
-            class="page-last"
-            data-request-data="page: <?= $pageLast ?>"
-            data-request="<?= $this->getEventHandler('onPaginate') ?>"
-            data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>"
-            title="<?= e(trans('backend::lang.list.last_page')) ?>"></a>
-        <?php else: ?>
-        <span
-            href="javascript:;"
-            class="page-last"
-            title="<?= e(trans('backend::lang.list.last_page')) ?>"></span>
+        <?php if ($pageLast > 1): ?>
+            <?php if ($pageCurrent > 1): ?>
+                <a
+                    href="javascript:;"
+                    class="page-first"
+                    data-request="<?= $this->getEventHandler('onPaginate') ?>"
+                    data-request-data="page: 1"
+                    data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>"
+                    title="<?= e(trans('backend::lang.list.first_page')) ?>"></a>
+            <?php else: ?>
+                <span
+                    class="page-first"
+                    title="<?= e(trans('backend::lang.list.first_page')) ?>"></span>
+            <?php endif ?>
+            <?php if ($pageCurrent > 1): ?>
+                <a
+                    href="javascript:;"
+                    class="page-back"
+                    data-request="<?= $this->getEventHandler('onPaginate') ?>"
+                    data-request-data="page: <?= $pageCurrent-1 ?>"
+                    data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>"
+                    title="<?= e(trans('backend::lang.list.prev_page')) ?>"></a>
+            <?php else: ?>
+                <span
+                    class="page-back"
+                    title="<?= e(trans('backend::lang.list.prev_page')) ?>"></span>
+            <?php endif ?>
+            <select
+                name="page"
+                class="form-control input-sm custom-select select-no-search"
+                data-request="<?= $this->getEventHandler('onPaginate') ?>"
+                data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>">
+                <?php for($i = 1; $i <= $pageLast ; $i++): ?>
+                    <option value="<?= $i ?>" <?= $i === $pageCurrent ? 'selected' : '' ?>><?= $i ?></option>
+                <?php endfor ?>
+            </select>
+            <?php if ($pageLast > $pageCurrent): ?>
+                <a
+                    href="javascript:;"
+                    class="page-next"
+                    data-request-data="page: <?= $pageCurrent+1 ?>"
+                    data-request="<?= $this->getEventHandler('onPaginate') ?>"
+                    data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>"
+                    title="<?= e(trans('backend::lang.list.next_page')) ?>"></a>
+            <?php else: ?>
+                <span
+                    class="page-next"
+                    title="<?= e(trans('backend::lang.list.next_page')) ?>"></span>
+            <?php endif ?>
+            <?php if ($pageLast > $pageCurrent): ?>
+                <a
+                    href="javascript:;"
+                    class="page-last"
+                    data-request-data="page: <?= $pageLast ?>"
+                    data-request="<?= $this->getEventHandler('onPaginate') ?>"
+                    data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>"
+                    title="<?= e(trans('backend::lang.list.last_page')) ?>"></a>
+            <?php else: ?>
+                <span
+                    class="page-last"
+                    title="<?= e(trans('backend::lang.list.last_page')) ?>"></span>
+            <?php endif ?>
         <?php endif ?>
     </div>
-</div>
+</div>

modules/system/assets/ui/docs/pagination.md

@@ -1,10 +1,23 @@
-# Pagination
+### Basic example
 
-Pagination
+    <div class="control-pagination">
+        <span class="page-iteration">Displayed records: 1-5 of 20</span>
+        <a href="#" class="page-back" title="Previous page"></a><a href="#" class="page-next" title="Next page"></a>
+    </div>
 
-# Example
+### Complete example
 
-<div class="control-pagination">
-    <span class="page-iteration">Displayed records: 1-5 of 20</span>
-    <a href="#" class="page-back" title="Previous page"></a><a href="#" class="page-next" title="Next page"></a>
-</div>
+    <div class="control-pagination">
+        <span class="page-iteration">Displayed records: 1-5 of 20</span>
+        <span class="page-first" title="First page"></span>
+        <span class="page-back" title="Previous page"></span>
+        <select
+            name="page"
+            class="form-control custom-select select-no-search">
+                <option value="1" selected>1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+        </select>
+        <a href="#" class="page-next" title="Next page"></a>
+        <a href="#" class="page-last" title="Last page"></a>
+    </div>

modules/system/assets/ui/less/pagination.less

@@ -21,9 +21,11 @@
 .control-pagination {
     font-size: 0;
     text-align: center;
+
     @media (min-width: @screen-sm-min) {
         text-align: right;
     }
+
     .page-iteration {
         margin-right: 4px;
         font-size: @font-size-base - 1;
@@ -33,25 +35,54 @@
             display: inline-block;
         }
     }
+
+    //
+    // Page selector
+    //
+
+    select {
+        width: 50px;
+        border: none;
+        background: transparent;
+    }
     select, .select2-container {
-        width: 80px;
         text-align: center;
         display: inline-block;
+    }
+    .select2-container {
+        min-width: 50px;
         vertical-align: bottom;
-        bottom: 4px;
+        bottom: 2px;
 
-        .select2-selection--single {
-            height: auto;
-            padding: 4px 25px 4px 4px;
+        .select2-selection {
+            height: 29px;
+            line-height: 29px;
+            padding: 0 30px 0 10px;
+            border: none !important;
+            font-size: 12px;
+
+            background-color: transparent;
+
+            .border-radius(0) !important;
+            .box-shadow(none) !important;
+
+            &.select2-default {
+                font-weight: normal !important;
+            }
         }
     }
+
+    //
+    // Next and previous
+    //
+
     .page-next, .page-back, .page-last, .page-first {
         display: inline-block;
         padding: 10px 15px;
         &:before {
             color: @color-pagination-icon;
-            font-size: 24px;
-            line-height: 24px;
+            font-size: 19px;
+            line-height: 19px;
             display: inline-block;
             vertical-align: baseline;
             position: relative;
@@ -68,6 +99,12 @@
             color: @color-pagination-inactive;
         }
     }
+    .page-next {
+        padding-left: 6px;
+    }
+    .page-back {
+        padding-right: 6px;
+    }
     .page-last {
         padding-left: 6px;
     }