Newer
Older
CamaraComercioWeb / src / app / modules / public / discover / components / slide-sites / slide-sites.component.html
  1. <div class="carousel_size">
  2. <owl-carousel-o [options]="customOptions" class="d-flex">
  3. <ng-template carouselSlide *ngFor="let site of sites; index as i">
  4. <div *ngIf="site.show_information; then thenBlock; else elseBlock"></div>
  5. <ng-template #thenBlock
  6. ><div class="slide2 d-flex flex-column p-3">
  7. <h2 class="Ws-24">{{ site.name }}</h2>
  8. <div class="d-flex align-items-center mb-1">
  9. <ion-icon name="time-outline" class="me-2 time-icon"></ion-icon>
  10. <span class="me-3 Tx-15">Abierto</span>
  11. <span class="ms-3 Tx-15">Cierra a las 21:00</span>
  12. </div>
  13. <p *ngIf="site.description" class="Tx-14">
  14. {{ site.description | truncate: [138, "..."] }}
  15. </p>
  16. <div class="d-flex blue-color">
  17. <ion-icon class="me-1 call-icon" name="call-outline"></ion-icon>
  18. <span class="me-3 Tx-12">{{ site!.phone_number }}</span>
  19. <ion-icon class="me-1 mail-icon" name="mail-outline"></ion-icon>
  20. <span class="Tx-12">{{ site!.email }}</span>
  21. <ion-icon (click)="showInformation(i)" class="icon-down ms-4" name="chevron-down-outline"></ion-icon>
  22. </div>
  23. </div></ng-template
  24. >
  25. <ng-template #elseBlock
  26. ><div
  27. class="slide d-flex flex-column justify-content-between"
  28. [ngStyle]="{ 'background-image': 'url(https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg)' }"
  29. >
  30. <div class="d-flex justify-content-end align-items-center mt-4">
  31. <span>5</span>
  32. <ion-icon
  33. name="star-half-outline"
  34. class="me-3 icon-star"
  35. ></ion-icon>
  36. </div>
  37. <div
  38. class="mb-4 Ws-24 d-flex align-items-center justify-content-between"
  39. >
  40. <i>{{ site!.name }}</i>
  41. <ion-icon
  42. (click)="showInformation(i)"
  43. name="chevron-up-outline"
  44. class="me-3 icon-up"
  45. ></ion-icon>
  46. </div></div
  47. ></ng-template>
  48. </ng-template>
  49. </owl-carousel-o>
  50. </div>
  51.  
  52. <!--
  53. worsans 24
  54. source 18
  55. -->