PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-23 20:18:00 +01:00
Code Issues Projects Releases Packages Wiki Activity

collapse image list pagination in low width

Browse source
This commit is contained in:
byte[] 2020-12-08 21:30:03 -05:00
parent 92ade8e543
commit c1ec2b3df2
4 changed files with 54 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/css/common/_base.scss
View file

@ -394,6 +394,7 @@ span.stat {
@import "~views/polls"; @import "~views/polls";
@import "~views/posts"; @import "~views/posts";
@import "~views/profiles"; @import "~views/profiles";
@import "~views/pagination";
@import "~views/search"; @import "~views/search";
@import "~views/stats"; @import "~views/stats";
@import "~views/tags"; @import "~views/tags";

32
assets/css/views/_pagination.scss Normal file
View file

@ -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;
}
}
}

17
lib/philomena_web/templates/image/index.html.slime
View file

@ -10,13 +10,13 @@ elixir:
info = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @images info = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @images
.block#imagelist-container .block#imagelist-container
section.block__header.flex section.block__header.imagelist__header.flex
span.block__header__title.hide-mobile span.block__header__title.imagelist__title.hide-mobile
=> header => header
= pagination .imagelist__pagination = pagination
.flex__right .flex__right.imagelist__options
= random_button @conn, params = random_button @conn, params
= hidden_toggle @conn, route, params = hidden_toggle @conn, route, params
= deleted_toggle @conn, route, params = deleted_toggle @conn, route, params
@ -33,12 +33,13 @@ elixir:
- image -> - image ->
= render PhilomenaWeb.ImageView, "_image_box.html", image: image, link: image_url.(image), size: assigns[:size] || :thumb, conn: @conn = render PhilomenaWeb.ImageView, "_image_box.html", image: image, link: image_url.(image), size: assigns[:size] || :thumb, conn: @conn
.block__header.block__header--light.flex .block__header.block__header--light.imagelist__header.flex
= pagination .imagelist__pagination = pagination
span.block__header__title span.block__header__title.imagelist__info
= info = info
.flex__right
.flex__right.imagelist__options
a href="/settings/edit" title="Display Settings" a href="/settings/edit" title="Display Settings"
i.fa.fa-cog i.fa.fa-cog
span.hide-mobile.hide-limited-desktop<> span.hide-mobile.hide-limited-desktop<>

2
lib/philomena_web/templates/pagination/_pagination.html.slime
View file

@ -6,6 +6,7 @@
= link("« First", to: first_page_path(@page, @route, params)) = link("« First", to: first_page_path(@page, @route, params))
= link("‹ Prev", to: prev_page_path(@page, @route, params), class: "js-prev") = link("‹ Prev", to: prev_page_path(@page, @route, params), class: "js-prev")
span.hide-mobile
= if left_gap?(@page) do = if left_gap?(@page) do
span.page.gap span.page.gap
' … ' …
@ -15,6 +16,7 @@
span.page-current = @page.page_number span.page-current = @page.page_number
span.hide-mobile
= for number <- right_page_numbers(@page) do = for number <- right_page_numbers(@page) do
= link(number, to: page_path(@route, params, number)) = link(number, to: page_path(@route, params, number))