<ng-template #updateSettings let-fragment>
- <div class="label-description text-muted" i18n>
+ <div class="label-description muted" i18n>
Update
<a routerLink="/my-account/settings" [fragment]="fragment">
- <span (click)="onAccountSettingsClick($event)">your settings</span>
+ <button class="button-unstyle" (click)="onAccountSettingsClick($event)">your settings</button>
</a
></div>
</ng-template>
<div class="first-row">
<div class="active-filters">
- <div
- class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed" role="button"
+ <button
+ class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed"
[attr.aria-expanded]="!areFiltersCollapsed" aria-controls="collapseBasic"
[ngClass]="{ active: !areFiltersCollapsed }"
>
<ng-container i18n *ngIf="!areFiltersCollapsed">Hide filters</ng-container>
<my-global-icon iconName="chevrons-up"></my-global-icon>
- </div>
+ </button>
- <div
+ <button
*ngFor="let activeFilter of filters.getActiveFilters()" (click)="resetFilter(activeFilter.key, activeFilter.canRemove)"
- class="active-filter pastille" [ngClass]="{ 'can-remove': activeFilter.canRemove }" [title]="getFilterTitle(activeFilter.canRemove)"
+ class="active-filter pastille button-unstyle" [ngClass]="{ 'can-remove': activeFilter.canRemove }" [title]="getFilterTitle(activeFilter.canRemove)"
>
<span>
{{ activeFilter.label }}
</span>
<my-global-icon *ngIf="activeFilter.canRemove" iconName="cross"></my-global-icon>
- </div>
+ </button>
</div>
<ng-select
formControlName="sort"
[clearable]="false"
[searchable]="false"
+ [bindValue]="null"
>
<ng-option i18n value="-publishedAt">Sort by <strong>"Recently Added"</strong></ng-option>
+ <ng-option i18n value="-originallyPublishedAt">Sort by <strong>"Original Publication Date"</strong></ng-option>
+ <ng-option i18n value="name">Sort by <strong>"Name"</strong></ng-option>
<ng-option i18n *ngIf="isTrendingSortEnabled('most-viewed')" value="-trending">Sort by <strong>"Recent Views"</strong></ng-option>
<ng-option i18n *ngIf="isTrendingSortEnabled('hot')" value="-hot">Sort by <strong>"Hot"</strong></ng-option>
- <ng-option i18n *ngIf="isTrendingSortEnabled('best')" value="-best">Sort by <strong>"Best"</strong></ng-option>
<ng-option i18n *ngIf="isTrendingSortEnabled('most-liked')" value="-likes">Sort by <strong>"Likes"</strong></ng-option>
+ <ng-option i18n value="-views">Sort by <strong>"Global Views"</strong></ng-option>
</ng-select>
</div>
- <div class="collapse-transition" [ngbCollapse]="areFiltersCollapsed">
+ <div [ngbCollapse]="areFiltersCollapsed" [animation]="true">
<div class="filters">
<div class="form-group">
<label class="with-description" for="languageOneOf" i18n>Languages:</label>