refactor: inline display of dish icons

src/app/modules/data/list/data-list-item.scss

@@ -13,6 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 @import "src/theme/util/_mixins.scss";
+@import "src/theme/common/_helper.scss";
 
 ion-item {
   --border-color: transparent;
@@ -36,19 +37,7 @@ ion-item {
   }
   ::ng-deep {
     ion-note {
-      ul {
+      @extend %horizontal-list;
-        margin: 0;
-        padding: 0;
-
-        li {
-          list-style-type: none;
-          display: inline;
-        }
-
-        li:not(:first-child):before {
-          content: " • ";
-        }
-      }
     }
   }
 }

src/app/modules/data/types/dish/dish-detail-content.component.ts

@@ -20,6 +20,7 @@ import {SCDish} from '@openstapps/core';
  */
 @Component({
   selector: 'stapps-dish-detail-content',
+  styleUrls: ['dish-detail-content.scss'],
   templateUrl: 'dish-detail-content.html',
 })
 export class DishDetailContentComponent {

src/app/modules/data/types/dish/dish-detail-content.html

@@ -1,29 +1,30 @@
 <ion-grid>
   <ion-row>
     <ion-col>
-      <stapps-simple-card
+      <ion-card *ngIf="item.categories">
-        [title]="'categories' | propertyNameTranslate: item | titlecase"
+        <ion-card-header>
-        [content]="'categories' | thingTranslate: item"
+          {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
-      ></stapps-simple-card>
+        </ion-card-header>
+      </ion-card>
     </ion-col>
     <ion-col>
       <ion-card *ngIf="item.characteristics">
-        <ion-card-header class="no-padding-inline-start">{{
+        <ion-card-header class="no-padding-inline-start vertical-list">
-          'data.types.dish.CHARACTERISTICS' | translate
+          <ul>
-        }}</ion-card-header>
+            <li>
-        <ion-card-content class="no-padding-inline-start">
+              <ng-container
-          <p
                 *ngFor="
                   let characteristic of 'characteristics' | thingTranslate: item
                 "
               >
                 <img
-              *ngIf="characteristic.image"
                   [src]="characteristic.image"
-              alt=""
+                  [alt]="characteristic.name | titlecase"
-            /><span> {{ characteristic.name }}</span>
+                />
-          </p>
+              </ng-container>
-        </ion-card-content>
+            </li>
+          </ul>
+        </ion-card-header>
       </ion-card>
     </ion-col>
   </ion-row>
@@ -86,7 +87,7 @@
 -->
 <stapps-simple-card
   *ngIf="item.additives"
-  [title]="'additives' | propertyNameTranslate: item | titlecase"
+  [title]="'additives' | propertyNameTranslate: item"
   [content]="'additives' | thingTranslate: item | join: ', '"
 >
 </stapps-simple-card>

src/app/modules/data/types/dish/dish-detail-content.scss

@@ -0,0 +1,6 @@
+@import "src/theme/common/_helper.scss";
+.vertical-list {
+  ul li img {
+    filter: invert(0%) sepia(25%) saturate(5940%) hue-rotate(121deg) brightness(70%) contrast(87%);
+  }
+}

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

@@ -6,9 +6,25 @@
         <p class="title-sub ion-hide-sm-down">
           {{ 'description' | thingTranslate: item }}
         </p>
-        <ion-note>{{
+        <ion-note>
-          'categories' | thingTranslate: item | join: ', '
+          <ul>
-        }}</ion-note>
+            <li>
+              {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
+            </li>
+            <li *ngIf="item.characteristics">
+              <ng-container
+                *ngFor="
+                  let characteristic of 'characteristics' | thingTranslate: item
+                "
+              >
+                <img
+                  [src]="characteristic.image"
+                  [alt]="characteristic.name | titlecase"
+                />
+              </ng-container>
+            </li>
+          </ul>
+        </ion-note>
       </div>
     </ion-col>
     <ion-col width-10 text-right>

src/theme/common/_helper.scss

@@ -13,3 +13,45 @@
 .clickable {
   cursor: pointer;
 }
+
+
+%vertical-list  {
+  ul {
+    margin: 0;
+    padding: 0;
+
+    li {
+      list-style-type: none;
+    }
+
+    li img {
+      max-height: 1.25rem;
+      vertical-align: text-bottom;
+      filter: invert(45%) sepia(0%) saturate(0%) hue-rotate(227deg) brightness(97%) contrast(82%);
+    }
+  }
+}
+
+%horizontal-list  {
+  @extend %vertical-list;
+  ul {
+    li {
+      display: inline;
+    }
+    li:not(:first-child):before {
+      content: " • ";
+    }
+  }
+
+}
+
+.vertical-list {
+  @extend %vertical-list;
+}
+
+.horizontal-list {
+  @extend %vertical-list;
+  li {
+    display: inline;
+  }
+}