zo/GenderDysphoria.fyi
1
0
Fork 0
mirror of https://github.com/GenderDysphoria/GenderDysphoria.fyi.git synced 2025-01-31 07:16:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix pager on mobile

Browse Source
This commit is contained in:
Jocelyn Badgley (Twipped) 2020-12-01 11:42:43 -08:00
parent 2a7f3bd2fe
commit 70e218bdbd
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
scss/_pager.scss
View File

@ -26,17 +26,24 @@
width: 100%;
// min-width: 75%;
display: flex;
height: 36px;
max-width: calc(50vw - 10px);
.caption {
overflow-x: hidden;
}
}
.btn.left {
.btn.left .caption {
justify-content: flex-start;
}
.btn.right {
.btn.right .caption {
justify-content: flex-end;
}
span.svg-icon {
margin-top: 1px;
flex: 0 0 20px;
}
}

8
templates/page.hbs
View File

@ -28,10 +28,10 @@
{{#if siblings}}
<div class="pager">
<div class="prev">{{#if siblings.prev}}<a href="{{siblings.prev}}" class="btn btn-primary left">{{icon 'angle-left'}} {{#if siblings.prevCaption}}{{siblings.prevCaption}}{{else}}Back{{/if}}</a>{{/if}}</div>
<div class="first">{{#if siblings.first}}<a href="{{siblings.first}}" class="btn btn-primary left">{{icon 'angle-double-left'}} {{#if siblings.firstCaption}}{{siblings.firstCaption}}{{else}}Newest{{/if}}</a>{{/if}}</div>
<div class="last">{{#if siblings.last}}<a href="{{siblings.last}}" class="btn btn-primary right">{{#if siblings.lastCaption}}{{siblings.lastCaption}}{{else}}Oldest{{/if}} {{icon 'angle-double-right'}}</a>{{/if}}</div>
<div class="next">{{#if siblings.next}}<a href="{{siblings.next}}" class="btn btn-primary right">{{#if siblings.nextCaption}}{{siblings.nextCaption}}{{else}}Next{{/if}} {{icon 'angle-right'}}</a>{{/if}}</div>
<div class="prev">{{#if siblings.prev}}<a href="{{siblings.prev}}" class="btn btn-primary left">{{icon 'angle-left'}}<span class="caption">{{#if siblings.prevCaption}}{{siblings.prevCaption}}{{else}}Back{{/if}}</a>{{/if}}</span></div>
<div class="first">{{#if siblings.first}}<a href="{{siblings.first}}" class="btn btn-primary left">{{icon 'angle-double-left'}}<span class="caption">{{#if siblings.firstCaption}}{{siblings.firstCaption}}{{else}}Newest{{/if}}</a>{{/if}}</span></div>
<div class="last">{{#if siblings.last}}<a href="{{siblings.last}}" class="btn btn-primary right"><span class="caption">{{#if siblings.lastCaption}}{{siblings.lastCaption}}{{else}}Oldest{{/if}}</span>{{icon 'angle-double-right'}}</a>{{/if}}</div>
<div class="next">{{#if siblings.next}}<a href="{{siblings.next}}" class="btn btn-primary right"><span class="caption">{{#if siblings.nextCaption}}{{siblings.nextCaption}}{{else}}Next{{/if}}</span>{{icon 'angle-right'}}</a>{{/if}}</div>
</div>
{{/if}}
</article>