splashScreen.template.html

<div splashScreenContainer>
  <div splashScreenHeader>
    <span splashScreenHeaderTitle media="screen and (min-width: 670px)">Iteractive Atlas Viewer</span>
  </div>
  <div splashScreenTemplate>
    <div *ngFor="let template of loadedTemplate$ | async | filterNull" splashScreenTemplateItem>
      <div class="template-card" (click) = "selectTemplate(template)">

        <div splashScreenTemplateHeader>
          {{template.properties.name}}
        </div>
        <div splashScreenTemplateBody>
          <div splashScreenTemplateBodyImage>
            <img class="template-image" [src]="'./res/image/' + correctString(template.properties.name) + '.png'">
          </div>
          <div splashScreenTemplateBodyDescription>
            {{template.properties.description.substring(0, 500)}}
          </div>
        </div>

      </div>
    </div>

  </div>
</div>



<!--
<div class = "container-fluid" splashScreenContainer>
  <div
    class = "row"
    templateCardContainer>
    <div
      *ngFor = "let template of loadedTemplate$ | async | filterNull"
      (click) = "selectTemplate(template)"
      templateCard
      hoverable>
      <h2>{{ template.properties.name }}</h2>
      <readmore-component>
        <small>{{ template.properties.description }}</small>
      </readmore-component>
    </div>
    <div *ngIf = "(loadedTemplate$ | async).length < totalTemplates">
      <h1 style = "text-align:center;">
        <small>
          Loading Templates
        </small>
        <span class = "homeAnimationDots loadingAnimationDots">&bull;</span>
        <span class = "homeAnimationDots loadingAnimationDots">&bull;</span>
        <span class = "homeAnimationDots loadingAnimationDots">&bull;</span>
      </h1>
    </div>
  </div>
</div> -->