refactor: display of opening hours

src/app/modules/data/elements/title-card.component.html

@@ -13,8 +13,8 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 <ion-card>
-  <ion-card-content>
-    <ion-text color="dark">
+  <ion-card-header>
+    <ion-card-title>
       <h1>
         <ng-container *ngIf="$any(item).honorificPrefix">{{
           'honorificPrefix' | thingTranslate: item
@@ -24,9 +24,15 @@
           'honorificSuffix' | thingTranslate: item
         }}</ng-container>
       </h1>
-    </ion-text>
+    </ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <div *ngIf="$any(item).openingHours" class="openingHours">
+      <stapps-opening-hours
+        [openingHours]="item.openingHours"
+      ></stapps-opening-hours>
+    </div>
     <div *ngIf="item.description" class="description">
-      <br />
       <div
         class="text-accordion"
         [style.-webkit-line-clamp]="descriptionLinesToDisplay"

src/app/modules/data/elements/title-card.component.scss

@@ -26,15 +26,24 @@ ion-card {
   --background: var(--ion-color-primary);
   padding: 0 var(--spacing-md);
 
-  ion-card-content {
-    padding: var(--spacing-sm) 0 var(--header-spacing-bottom);
+  ion-card-header {
+    padding: 0;
 
     h1 {
       color: var(--ion-color-primary-contrast);
       font-weight: var(--font-weight-bold);
+      margin: var(--spacing-sm) 0 var(--spacing-sm) 0;
     }
+  }
+  
+  ion-card-content {
+    padding: 0 0 var(--header-spacing-bottom);
+
     .description * {
       color: var(--ion-color-light);
     }
+    .openingHours  {
+      color: var(--ion-color-light);
+    }
   }
 }

src/app/modules/data/types/place/place-list-item.html

@@ -20,7 +20,11 @@
         <ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
         <ng-container *ngIf="item.type !== 'floor'">
           <p class="title-sub" *ngIf="item.openingHours">
-            {{ item.openingHours | openingHours }}
+            <span>
+              <stapps-opening-hours
+                [openingHours]="item.openingHours"
+              ></stapps-opening-hours>
+            </span>
           </p>
           <p>
             <ion-note