Improved illustrations displays

pierreavn · Aug 17, 2024 · 0c9987e · 0c9987e
1 parent cc313ca
commit 0c9987e
Show file tree

Hide file tree

Showing 8 changed files with 2,312 additions and 1,114 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^15.0.4",
-    "@angular/cli": "~15.0.4",
+    "@angular/cli": "^15.2.11",
     "@angular/compiler-cli": "^15.0.0",
     "@types/jasmine": "~4.3.0",
     "@types/js-yaml": "^4.0.5",

diff --git a/src/app/cookbook/recipe/steps/ingredient/ingredient.component.html b/src/app/cookbook/recipe/steps/ingredient/ingredient.component.html
@@ -1,4 +1,4 @@
-<span>
+<span class="ingredient">
   {{ displayName }}
   <tui-badge
     *ngIf="displayBadge"

diff --git a/src/app/cookbook/recipe/steps/ingredient/ingredient.component.scss b/src/app/cookbook/recipe/steps/ingredient/ingredient.component.scss
@@ -1,3 +1,7 @@
+.ingredient {
+  white-space: nowrap;
+}
+
 tui-badge {
   background-color: var(--tui-info-bg);
   color: black;

diff --git a/src/app/cookbook/recipe/steps/step/step.component.scss b/src/app/cookbook/recipe/steps/step/step.component.scss
@@ -19,7 +19,8 @@
 
   &__title {
     text-transform: uppercase;
-    font-weight: bold;
     margin-bottom: .5rem;
+    color: var(--tui-text-02);
+    font-size: 13px;
   }
 }
diff --git a/src/app/cookbook/recipe/steps/steps.component.scss b/src/app/cookbook/recipe/steps/steps.component.scss
@@ -19,6 +19,9 @@
     position: relative;
     margin-top: -2rem;
     transform: translateY(1rem);
+    color: var(--tui-text-02);
+    text-transform: uppercase;
+    font-size: 13px;
 
     &::before {
       content: " ";

diff --git a/src/app/shared/components/recipe-card/recipe-card.component.html b/src/app/shared/components/recipe-card/recipe-card.component.html
@@ -1,14 +1,9 @@
 <tui-island size="l" (click)="openRecipe()">
-  <div class="tui-island__content">
-      <div>
-        <img
-          *ngIf="recipe.pictures && recipe.pictures.length > 0"
-                    class="image"
-                    [src]="recipe.pictures[0]"
-                /><br/>
-          <p class="tui-island__category" *ngIf="recipe.category">{{ recipe.category }}</p>
-          <h3 class="tui-island__title">{{ recipe.name }}</h3>
-      </div>
-  </div>
+  <div
+    *ngIf="recipe.pictures && recipe.pictures.length > 0"
+    class="image"
+    [style.background-image]="'url(' + recipe.pictures[0] + ')'"></div>
+  <h3 class="tui-island__title">{{ recipe.name }}</h3>
+  <p class="tui-island__category" *ngIf="recipe.category">{{ recipe.category }}</p>
 </tui-island>
 
diff --git a/src/app/shared/components/recipe-card/recipe-card.component.scss b/src/app/shared/components/recipe-card/recipe-card.component.scss
@@ -1,3 +1,16 @@
-img {
-  height: 10rem;
+.image {
+  width: calc(100% + 2*1.25rem);
+  height: 8rem;
+  margin-bottom: 10px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-top-left-radius: var(--tui-radius-xl);
+  border-top-right-radius: var(--tui-radius-xl);
+  margin: -1.25rem;
+  margin-bottom: 1rem;
+}
+
+.tui-island__category {
+  margin-bottom: 0;
 }