angular-osf/src/app/features/registries/components/registry-provider-hero/registry-provider-hero.component.html at 11fac03900bc2459717239357d468ebcd6716f46 · bodintsov/angular-osf · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<section class="registries-hero-container py-5 px-3 flex flex-column gap-4 md:py-6 md:px-4">
  <div class="flex flex-column align-items-start justify-content-between gap-4 md:flex-row">
    <div class="gap-2`"></div>
    <div class="flex align-items-center gap-2">
      @if (isProviderLoading()) {
        <p-skeleton width="3rem" height="1.5rem" />
        <p-skeleton width="12rem" height="1.5rem" />
      } @else {
        <img alt="Provider Logo" height="80" [src]="provider()!.brand?.heroLogoImageUrl" />
      }
    </div>

    <p-button [label]="'registries.addRegistration' | translate" (onClick)="navigateToCreatePage()"></p-button>
  </div>

  <div class="provider-description">
    @if (isProviderLoading()) {
      <div class="flex flex-column gap-2">
        <p-skeleton width="40%" height="1.5rem"></p-skeleton>
        <p-skeleton width="70%" height="1.5rem"></p-skeleton>

        <p-skeleton width="10%" height="1rem"></p-skeleton>
      </div>
    } @else {
      <div [innerHTML]="provider()!.descriptionHtml | decodeHtml"></div>
    }
  </div>

  @if (isProviderLoading()) {
    <p-skeleton class="w-full" height="3rem" />
  } @else {
    <osf-search-input
      class="w-full"
      [showHelpIcon]="true"
      [placeholder]="'preprints.searchPlaceholder' | translate: { preprintWord: 'Registrations' } | titlecase"
      [control]="searchControl()"
      (triggerSearch)="onTriggerSearch($event)"
      (helpClicked)="openHelpDialog()"
    />
  }
</section>