inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1478] Make the pagination more responsive (#2315)

Browse Source
This commit is contained in:
Popovics András 2017-09-11 12:29:52 +01:00 committed by Denys Vuika
parent 2fc9b63f5c
commit 45038c52ce
2 changed files with 46 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.html
View File

@ -1,4 +1,4 @@
<div class="adf-pagination__block">
<div class="adf-pagination__block adf-pagination__range-block">
<span class="adf-pagination__range">
{{
'CORE.PAGINATION.ITEMS_RANGE' | translate: {
@ -9,7 +9,7 @@
</span>
</div>
<div class="adf-pagination__block">
<div class="adf-pagination__block adf-pagination__perpage-block">
<span>
{{ 'CORE.PAGINATION.ITEMS_PER_PAGE' | translate }}
</span>
@ -32,7 +32,7 @@
</md-menu>
</div>
<div class="adf-pagination__block">
<div class="adf-pagination__block adf-pagination__actualinfo-block">
<span class="adf-pagination__current-page">
{{ 'CORE.PAGINATION.CURRENT_PAGE' | translate: { number: current } }}
</span>
@ -58,7 +58,7 @@
</md-menu>
</div>
<div class="adf-pagination__block">
<div class="adf-pagination__block adf-pagination__controls-block">
<button
class="adf-pagination__previous-button"
md-icon-button

42
ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.scss
View File

@ -29,6 +29,48 @@
}
}
@media (max-width: 500px) {
& {
flex-wrap: wrap;
padding-bottom: 24px;
padding-top: 8px;
}
&__range-block.adf-pagination__block:first-child {
order: 1;
width: 50%;
flex: 0 0 auto;
box-sizing: border-box;
padding-left: 16px;
justify-content: flex-start;
}
&__perpage-block {
order: 3;
width: 50%;
box-sizing: border-box;
padding-left: 16px;
justify-content: flex-start;
}
&__actualinfo-block {
order: 2;
width: 50%;
box-sizing: border-box;
padding-right: 16px;
justify-content: flex-end;
}
&__controls-block {
order: 4;
width: 50%;
box-sizing: border-box;
padding-right: 16px;
justify-content: flex-end;
}
}
&__max-items {
margin-left: 10px;
}