diff --git a/assets/css/common/_base.scss b/assets/css/common/_base.scss index 96b21abf..99ccfa6f 100644 --- a/assets/css/common/_base.scss +++ b/assets/css/common/_base.scss @@ -332,7 +332,7 @@ blockquote { } .page-current { - padding: $header_spacing; + padding: 0 $header_spacing; } i.favicon-home { diff --git a/assets/css/common/_blocks.scss b/assets/css/common/_blocks.scss index 74a0968e..c607c773 100644 --- a/assets/css/common/_blocks.scss +++ b/assets/css/common/_blocks.scss @@ -84,7 +84,7 @@ a.block__header--single-item, .block__header a { } } -.block__header a { +.block__header a, .block__header span { background: $block_header_color; } @@ -96,8 +96,11 @@ a.block__header--single-item, .block__header a { .block__header--light { background: $block_header_light_color; - a { + a, span { background: $block_header_light_color; + } + + a { color: $block_header_light_link_text_color; &:hover { background: $block_header_light_hover_color; diff --git a/assets/css/views/_pagination.scss b/assets/css/views/_pagination.scss index a15d58dc..a2cb4e49 100644 --- a/assets/css/views/_pagination.scss +++ b/assets/css/views/_pagination.scss @@ -9,7 +9,11 @@ flex-shrink: 0; } -@media (max-width: $min_px_width_for_desktop_layout) { +.pagination__dropdown { + min-width: 4em; +} + +@media (max-width: $min_px_width_for_desktop_thumb) { .imagelist__title, .imagelist__options { display: none; } diff --git a/lib/philomena_web/templates/pagination/_pagination.html.slime b/lib/philomena_web/templates/pagination/_pagination.html.slime index 9f666409..ba04fa51 100644 --- a/lib/philomena_web/templates/pagination/_pagination.html.slime +++ b/lib/philomena_web/templates/pagination/_pagination.html.slime @@ -1,29 +1,64 @@ - params = assigns[:params] || [] = if @page.total_pages > 1 do - nav.pagination + nav.pagination.hide-mobile-t = if not first_page?(@page) do = link("« First", to: first_page_path(@page, @route, params)) = link("‹ Prev", to: prev_page_path(@page, @route, params), class: "js-prev") - span.hide-mobile - = if left_gap?(@page) do - span.page.gap - ' … + = if left_gap?(@page) do + span.page.gap + ' … - = for number <- left_page_numbers(@page) do - = link(number, to: page_path(@route, params, number)) + = for number <- left_page_numbers(@page) do + = link(number, to: page_path(@route, params, number)) span.page-current = @page.page_number - span.hide-mobile - = for number <- right_page_numbers(@page) do - = link(number, to: page_path(@route, params, number)) + = for number <- right_page_numbers(@page) do + = link(number, to: page_path(@route, params, number)) - = if right_gap?(@page) do - span.page.gap - ' … + = if right_gap?(@page) do + span.page.gap + ' … = if not last_page?(@page) do = link("Next ›", to: next_page_path(@page, @route, params), class: "js-next") = link("Last »", to: last_page_path(@page, @route, params)) + + nav.pagination.hide-desktop-t + = if first_page?(@page) do + span « First + span ‹ Prev + - else + = link("« First", to: first_page_path(@page, @route, params)) + = link("‹ Prev", to: prev_page_path(@page, @route, params), class: "js-prev") + + .dropdown + a.page-current.pagination__dropdown + => @page.page_number + i.fa.fa-caret-down + + .dropdown__content + = if left_gap?(@page) do + span.page.gap + ' … + + = for number <- left_page_numbers(@page) do + = link(number, to: page_path(@route, params, number)) + + span.page-current = @page.page_number + + = for number <- right_page_numbers(@page) do + = link(number, to: page_path(@route, params, number)) + + = if right_gap?(@page) do + span.page.gap + ' … + + = if last_page?(@page) do + span Next › + span Last » + - else + = link("Next ›", to: next_page_path(@page, @route, params), class: "js-next") + = link("Last »", to: last_page_path(@page, @route, params))