Comments and stars

src/app/pages/offres/offre-details/offre-details.page.html

@@ -18,20 +18,25 @@
         <ion-slides *ngIf="trip?.images?.length < 1" class="to-top" pager>
             <img [src]="trip.thumb" alt="">
         </ion-slides>
-        <ion-card-header color="primary">
+        <ion-card-header>
             <ion-card-title>{{ trip.sub_name }}</ion-card-title>
+            <span></span>
         </ion-card-header>
-        <ion-card-content>
-            {{ trip.description }}
-        </ion-card-content>
+        <ion-chip>
+            <ion-icon name="chatboxes" color="dark" class="ion-no-margin"></ion-icon> 100 avis
+        </ion-chip>
+        <ion-chip>
+            <ion-icon name="star" color="warning" class="ion-no-margin"></ion-icon> 4,5
+        </ion-chip>
+        <ion-card-content [innerHTML]="trip.description"> </ion-card-content>
         <ion-list>
             <ion-item *ngIf="trip?.brand_adresse">
                 <ion-icon name="pin" color="primary" slot="start"></ion-icon>
-                <ion-label>Adresse : {{ trip.brand_adresse }}</ion-label>
+                <ion-label class="ion-text-wrap">Adresse : {{ trip.brand_adresse }}</ion-label>
             </ion-item>
             <ion-item href="tel://{{ trip.brand_tel }}" lines="none" *ngIf="trip?.brand_tel">
                 <ion-icon name="phone-portrait" color="primary" slot="start"></ion-icon>
-                <ion-label>Tél : {{ trip.brand_tel }}</ion-label>
+                <ion-label class="ion-text-wrap">Tél : {{ trip.brand_tel }}</ion-label>
             </ion-item>
         </ion-list>
     </ion-card>

src/app/pages/offres/offre-details/offre-details.page.scss

@@ -8,6 +8,20 @@ ion-card-header {
   font-size: 20px;
 }
 
+ion-card {
+  ion-card-header {
+    ion-card-title {
+      font-family: "Open Sans Bold";
+    }
+    span {
+      width: 60px;
+      height: 10px;
+      background: var(--ion-color-primary, red);
+      display: inline-block;
+    }
+  }
+}
+
 .deal-title {
   margin-top: -50px !important;
   position: relative;

src/theme/variables.scss

@@ -23,6 +23,16 @@
   font-weight: normal;
   font-style: normal;
 }
+@font-face {
+  font-family: "Open Sans Bold";
+  src: url("../assets/fonts/opensans/bold/OpenSans-Bold-webfont.eot");
+  src: url("../assets/fonts/opensans/bold/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),
+    url("../assets/fonts/opensans/bold/OpenSans-Bold-webfont.woff") format("woff"),
+    url("../assets/fonts/opensans/bold/OpenSans-Bold-webfont.ttf") format("truetype"),
+    url("../assets/fonts/opensans/bold/OpenSans-Bold-webfont.svg#open_sanslight") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
 :root {
   /** primary **/
   --ion-color-primary: #f93129;