Pagination controls: apply CSS media queries for mobile devices

This commit is contained in:
Vitaliy Vlasov 2018-01-22 17:42:01 +02:00
parent 326c221988
commit df8de46532
2 changed files with 21 additions and 11 deletions

View File

@ -123,8 +123,9 @@
[:div [:div
[draw-items] [draw-items]
[:div.page-nav-container [:div.page-nav-container
[draw-rect :backward] [:div.page-direction-container
[draw-rect :forward] [draw-rect :backward]
[draw-rect :forward]]
[:div.page-nav-text [:span (str "Page " page-number " of " page-count)]] [:div.page-nav-text [:span (str "Page " page-number " of " page-count)]]
[draw-page-numbers page-number page-count]]]))) [draw-page-numbers page-number page-count]]])))

View File

@ -919,15 +919,6 @@ body {
filter: fliph; filter: fliph;
} }
.pagination-text {
width: 83px;
height: 15px;
font-family: PostGrotesk;
font-size: 15px;
text-align: center;
color: #8d99a4;
}
.icon-forward-gray { .icon-forward-gray {
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -937,10 +928,24 @@ body {
.page-nav-container { .page-nav-container {
display: flex; display: flex;
margin: 0 -6px; margin: 0 -6px;
@media (max-width: 767px) {
align-items: center;
flex-direction: column;
}
}
.page-direction-container {
display: flex;
@media (max-width: 767px) {
flex-direction: row;
}
} }
.page-nums-container { .page-nums-container {
display: flex; display: flex;
@media (max-width: 767px) {
display: none;
}
margin-left: auto; margin-left: auto;
justify-content: space-between; justify-content: space-between;
} }
@ -955,6 +960,10 @@ body {
flex: none; flex: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@media (max-width: 767px) {
margin-top: 12px;
}
} }
.item-counts-label { .item-counts-label {