diff --git a/assets/css/common/_base.scss b/assets/css/common/_base.scss index ddb095ad..96b21abf 100644 --- a/assets/css/common/_base.scss +++ b/assets/css/common/_base.scss @@ -394,6 +394,7 @@ span.stat { @import "~views/polls"; @import "~views/posts"; @import "~views/profiles"; +@import "~views/pagination"; @import "~views/search"; @import "~views/stats"; @import "~views/tags"; diff --git a/assets/css/views/_pagination.scss b/assets/css/views/_pagination.scss new file mode 100644 index 00000000..a15d58dc --- /dev/null +++ b/assets/css/views/_pagination.scss @@ -0,0 +1,32 @@ +.imagelist__header { + display: flex; + flex-wrap: wrap; +} + +.imagelist__title, .imagelist__pagination { + display: inline-flex; + flex-wrap: nowrap; + flex-shrink: 0; +} + +@media (max-width: $min_px_width_for_desktop_layout) { + .imagelist__title, .imagelist__options { + display: none; + } + + .imagelist__header, .imagelist__pagination, .imagelist__info { + display: block; + text-align: center; + } + + .imagelist__pagination nav { + display: flex; + width: 100%; + + a, span { + text-align: center; + flex: 1 1 auto; + padding: 0 1vw; + } + } +} diff --git a/lib/philomena_web/templates/image/index.html.slime b/lib/philomena_web/templates/image/index.html.slime index 66a941ca..99d2b59b 100644 --- a/lib/philomena_web/templates/image/index.html.slime +++ b/lib/philomena_web/templates/image/index.html.slime @@ -10,13 +10,13 @@ elixir: info = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @images .block#imagelist-container - section.block__header.flex - span.block__header__title.hide-mobile + section.block__header.imagelist__header.flex + span.block__header__title.imagelist__title.hide-mobile => header - = pagination + .imagelist__pagination = pagination - .flex__right + .flex__right.imagelist__options = random_button @conn, params = hidden_toggle @conn, route, params = deleted_toggle @conn, route, params @@ -33,12 +33,13 @@ elixir: - image -> = render PhilomenaWeb.ImageView, "_image_box.html", image: image, link: image_url.(image), size: assigns[:size] || :thumb, conn: @conn - .block__header.block__header--light.flex - = pagination + .block__header.block__header--light.imagelist__header.flex + .imagelist__pagination = pagination - span.block__header__title + span.block__header__title.imagelist__info = info - .flex__right + + .flex__right.imagelist__options a href="/settings/edit" title="Display Settings" i.fa.fa-cog span.hide-mobile.hide-limited-desktop<> diff --git a/lib/philomena_web/templates/pagination/_pagination.html.slime b/lib/philomena_web/templates/pagination/_pagination.html.slime index 3932fc91..9f666409 100644 --- a/lib/philomena_web/templates/pagination/_pagination.html.slime +++ b/lib/philomena_web/templates/pagination/_pagination.html.slime @@ -6,21 +6,23 @@ = link("« First", to: first_page_path(@page, @route, params)) = link("‹ Prev", to: prev_page_path(@page, @route, params), class: "js-prev") - = if left_gap?(@page) do - span.page.gap - ' … + span.hide-mobile + = 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 - = for number <- right_page_numbers(@page) do - = link(number, to: page_path(@route, params, number)) + span.hide-mobile + = 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")