feat: add title view-transition-name

trungvose · Jul 14, 2024 · 52efd72 · 52efd72
1 parent e076bb1
commit 52efd72
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/apps/angular-spotify/src/custom/_view-transitions.scss b/apps/angular-spotify/src/custom/_view-transitions.scss
@@ -1,11 +1,18 @@
-.with-view-transition as-media-cover {
-  view-transition-name: media-cover;
+.with-view-transition {
+  as-media-cover {
+    view-transition-name: media-cover;
+  }
+
+  h2 {
+    view-transition-name: media-title;
+  }
 }
 
 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }

diff --git a/libs/web/shared/ui/media-summary/src/lib/media-summary.component.scss b/libs/web/shared/ui/media-summary/src/lib/media-summary.component.scss
@@ -2,7 +2,7 @@
   min-height: 250px;
   max-height: 450px;
   gap: 24px;
-  grid-template-columns: minmax(120px, 192px) 1fr;
+  grid-template-columns: minmax(160px, 240px) 1fr;
   align-items: flex-end;
   @apply grid pb-6;
 }

diff --git a/libs/web/shared/ui/media/src/lib/card.component.html b/libs/web/shared/ui/media/src/lib/card.component.html
@@ -15,9 +15,9 @@
     </as-play-button>
   </div>
   <div class="card-body">
-    <div class="card-title font-bold text-white ellipsis-one-line">
+    <h2 class="card-title font-bold text-white ellipsis-one-line">
       {{ title }}
-    </div>
+    </h2>
     <div class="card-description text-description">
       {{ description }}
     </div>