core/templates/components/summary-tile/collection-summary-tile.component.html - develop - githubmirror/oppia

core/templates/components/summary-tile/collection-summary-tile.component.html
79 строк3 KB
tanmaygoyal2007
Fix part of #26609: Removed play later functionality (#26610)
03 авг 2026, 09:18
03 авг 2026, 09:183d1dd30
<div *ngIf="!mobileCardToBeShown">
  <mat-card class="oppia-activity-summary-tile e2e-test-collection-card" [style.padding]="0">
    <a [href]="getCollectionLink()" class="thumbnail">
      <div class="title-section" [ngStyle]="{'background-color': getThumbnailBgColor}">
        <img class="collection-corner-image" [src]="getStaticImageUrl('/general/collection_corner.svg')" alt="">
        <img class="thumbnail-image" [src]="getCompleteThumbnailIconUrl()" alt="{{ getCategory }}">
        <h3 class="activity-title e2e-test-collection-summary-tile-title">
          {{ getCollectionTitle || defaultEmptyTitle }}
        </h3>
      </div>

      <div [ngStyle]="isPlaylistTile && {'float': 'right', 'width': '67%', 'margin-top': '3%'}">
        <div class="objective">
          {{ getObjective | truncateAndCapitalize: 95 }}
          <span *ngIf="!getObjective">No objective specified.</span>
        </div>
        <ul class="metrics layout-row">
          <li>
            <span>
              {{ 'I18N_COMMUNITY_LIBRARY_PAGE_COLLECTION' | translate }} ({{ getNodeCount }})
            </span>
          </li>
          <li>
            <span>
              <span class="oppia-icon-accessibility-label">Last Updated</span>
              {{ getLastUpdatedDatetime() }}
            </span>
          </li>
        </ul>
      </div>
      <div *ngIf="!isPlaylistTile" class="title-section-mask"
           (mouseenter)="setHoverState(true)" (mouseleave)="setHoverState(false)">
      </div>
    </a>
  </mat-card>
</div>

<div *ngIf="mobileCardToBeShown">
  <mat-card class="mobile-activity-summary-card">
    <a [href]="getCollectionLink()" class="thumbnail">

      <div class="mobile-collection-card-cascading-images-container">
        <div class="mobile-collection-card-image-container rear-image" [ngStyle]="{'background-color': getThumbnailBgColor}">
          <img class="mobile-collection-card-image" [src]="getCompleteThumbnailIconUrl()" alt="{{ getCategory }}">
        </div>
        <div class="mobile-collection-card-image-container middle-image" [ngStyle]="{'background-color': getThumbnailBgColor}">
          <img class="mobile-collection-card-image" [src]="getCompleteThumbnailIconUrl()" alt="{{ getCategory }}">
        </div>
        <div class="mobile-collection-card-image-container front-image" [ngStyle]="{'background-color': getThumbnailBgColor}">
          <img class="mobile-collection-card-image" [src]="getCompleteThumbnailIconUrl()" alt="{{ getCategory }}">
        </div>
      </div>

      <div class="mobile-activity-card-details">
        <h3 class="mobile-collection-title e2e-test-collection-summary-tile-title">{{ getCollectionTitle || defaultEmptyTitle }}</h3>
        <div class="mobile-activity-card-summary-section">
          <ul class="mobile-activity-card-summary-elements">
            <li>
              <span>
                {{ getNodeCount }} explorations
              </span>
            </li>
            <li>
              <span>
                <i class="fas fa-circle bullet-separator"></i>
              </span>
            </li>
            <li>
              <span>
                <span class="oppia-icon-accessibility-label">Last Updated</span>
                {{ relativeLastUpdatedDateTime }}
              </span>
            </li>
          </ul>
        </div>
      </div>
    </a>
  </mat-card>
</div>