MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 23 Wiki Activity

funders page: responsive design for sorting actions

This commit is contained in:
Alex Martzios 2023-07-07 16:30:51 +03:00
parent 378d7ccb83
commit 9556ae36b9
1 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
explore/src/app/funders/funders.component.html
View File

@ -42,6 +42,8 @@
<ng-container *ngIf="!showLoading && funders?.length">
<div class="uk-container uk-container-large" uk-height-match="target: .percentage;">
<div id="target" class="uk-section" uk-height-match="target: .alias;">
<!-- sorting desktop view -->
<div class="uk-visible@m">
<div *ngIf="groupedFunders" class="uk-padding-small uk-padding-remove-vertical uk-margin-medium-bottom uk-flex uk-flex-middle uk-flex-between">
<ul class="uk-nav uk-nav-default uk-flex uk-flex-wrap">
<li *ngFor="let item of groupedFunders; let i = index;" class="uk-margin-right" [class.uk-margin-left]="i != 0"
@ -56,6 +58,29 @@
(valueChange)="sortByChanged()"></div>
</div>
</div>
</div>
<!-- sorting mobile view -->
<div class="uk-hidden@m">
<div *ngIf="groupedFunders" class="uk-padding-small uk-padding-remove-vertical uk-margin-bottom uk-flex uk-flex-column uk-flex-middle">
<div class="uk-width-medium">
<div input
type="select" placeholder="Show" inputClass="flat x-small"
[options]="options" [(value)]="sortBy" [disabled]="isDisabled"
(valueChange)="sortByChanged()"></div>
</div>
<div class="uk-padding uk-padding-remove-horizontal" >
<div class="uk-margin-left uk-margin-small-bottom uk-text-meta uk-text-small">
Sort Alphabetically
</div>
<ul class="uk-nav uk-nav-default uk-grid uk-grid-small uk-child-width-1-6" uk-grid>
<li *ngFor="let item of groupedFunders; let i = index;"
[class]="index == i ? 'uk-active':''" (click)="changeDisplayedFunders(i)">
<a class="uk-padding-remove">{{item.group}}</a>
</li>
</ul>
</div>
</div>
</div>
<div class="uk-margin-large-bottom" uk-height-match="target: .name;">
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-3@l uk-padding-small"
uk-grid uk-height-match="target: .info;">