Migrate to bootstrap 5

[github/Chocobozzz/PeerTube.git] / client / src / app / +my-library / my-follows / my-followers.component.html

<h1>
  <span>
    <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
    <ng-container i18n>My followers</ng-container>
    <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
  </span>
</h1>

<div class="followers-header">
  <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
</div>

<div class="no-results" i18n *ngIf="pagination.totalItems === 0">No follower found.</div>

<div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
  <div *ngFor="let follow of follows" class="actor">
    <my-actor-avatar [account]="follow.follower" [href]="follow.follower.url" size="40"></my-actor-avatar>

    <div class="actor-info">
      <a [href]="follow.follower.url" class="actor-names" rel="noopener noreferrer" target="_blank" i18n-title title="Follower page">
        <div class="actor-display-name">{{ follow.follower.name + '@' + follow.follower.host }}</div>
        <span class="glyphicon glyphicon-new-window"></span>
      </a>

      <div class="muted">
        <ng-container *ngIf="isFollowingAccount(follow)" i18n>Is following all your channels</ng-container>
        <ng-container *ngIf="!isFollowingAccount(follow)" i18n>Is following your channel {{ follow.following.name }}</ng-container>
      </div>
    </div>
  </div>
</div>