doneit-web/src/app/pages/events/attachments/attachments.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button routerDirection="back">Voltar</ion-back-button>
    </ion-buttons>
    <ion-title>Anexos do evento</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div *ngIf="loadedEventAttachments">
    <ion-list>
      <ion-item-sliding>
        <ion-item lines="none" *ngFor="let att of loadedEventAttachments" [routerLink]="['/home/viewer', att.SourceId]">
          <div class="div-item">
            <div class="div-up">
              <div class="div-icon">
                <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
              </div>
              <div class="div-content-attachment">
                <h3>{{ att.SourceName }}</h3>
                <p>{{ att.CreateDate }}</p>
                <p>{{ att.Description }}</p>
              </div>
            </div>
            <div class="div-botton">
              <div class="div-botton-left">
                <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
              </div>
              <div class="div-botton-middle">
                <p class="item-list-small">{{ att.Stakeholders }}</p>
              </div>
            </div>
          </div>
        </ion-item>
      </ion-item-sliding>
    </ion-list>
  </div>
  <!-- Skeleton screen -->
<div *ngIf="!loadedEventAttachments">
  <div class="ion-padding custom-skeleton">
    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
    <ion-skeleton-text animated></ion-skeleton-text>
    <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
    <ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
  </div>

  <ion-list>
    <ion-list-header>
      <ion-label>
        <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
      </ion-label>
    </ion-list-header>
    <ion-item>
      <ion-avatar slot="start">
        <ion-skeleton-text animated></ion-skeleton-text>
      </ion-avatar>
      <ion-label>
        <h3>
          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
        </h3>
        <p>
          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
        </p>
        <p>
          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
        </p>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-thumbnail slot="start">
        <ion-skeleton-text animated></ion-skeleton-text>
      </ion-thumbnail>
      <ion-label>
        <h3>
          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
        </h3>
        <p>
          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
        </p>
        <p>
          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
        </p>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
      <ion-label>
        <h3>
          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
        </h3>
        <p>
          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
        </p>
        <p>
          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
        </p>
      </ion-label>
    </ion-item>
  </ion-list>
</div>
</ion-content>