diff --git a/src/app/_samples/mediaco/components/gallery-grid/gallery-grid-component.html b/src/app/_samples/mediaco/components/gallery-grid/gallery-grid-component.html index 270722e1..88dc6ba7 100644 --- a/src/app/_samples/mediaco/components/gallery-grid/gallery-grid-component.html +++ b/src/app/_samples/mediaco/components/gallery-grid/gallery-grid-component.html @@ -1,6 +1,9 @@
-

All Content

+
+

{{data.dataPage === 'D_AccountHistoryList' ? 'All Activities' : 'Featured Content'}}

+
{{data.items.length}} items available
+
diff --git a/src/app/_samples/mediaco/components/gallery-grid/gallery-grid-component.scss b/src/app/_samples/mediaco/components/gallery-grid/gallery-grid-component.scss index 1b55fd5f..2791e69c 100644 --- a/src/app/_samples/mediaco/components/gallery-grid/gallery-grid-component.scss +++ b/src/app/_samples/mediaco/components/gallery-grid/gallery-grid-component.scss @@ -11,41 +11,46 @@ flex-direction: column; height: 100%; overflow: hidden; + background: #f8f2fb; } .dialog-header { display: flex; justify-content: space-between; align-items: center; - padding: 16px 24px; + padding: 1.5rem 2rem; border-bottom: 1px solid #e0e0e0; - background: #fff; flex-shrink: 0; h2 { + letter-spacing: 0; + font-size: 45px; + font-weight: 400; + line-height: 52px; margin: 0; - font-size: 22px; - font-weight: 500; } } .grid-container { flex: 1; display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 20px; padding: 24px; overflow-y: auto; } .grid-item { - border: 1px solid #e0e0e0; - border-radius: 8px; - overflow: hidden; + position: relative; display: flex; flex-direction: column; + border: 1px solid #e0e0e0; + border-radius: 1.5rem; + overflow: hidden; background: white; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + box-shadow: + 0px 1px 2px 0px #0000004d, + 0px 2px 6px 2px #00000026; transition: transform 0.2s; height: 240px; @@ -56,21 +61,22 @@ img { width: 100%; - height: 160px; + height: 100%; object-fit: cover; display: block; } p { + position: absolute; + bottom: 0; + left: 0; margin: 0; padding: 16px; - text-align: center; font-weight: 500; - color: #333; - flex: 1; - display: flex; - align-items: center; - justify-content: center; + color: #fff; + letter-spacing: 0.15px; + font-size: 16px; + line-height: 24px; } } @@ -78,7 +84,7 @@ display: grid; grid-template-columns: 1fr; gap: 18px; - padding: 12px; + padding: 1.5rem 2rem; overflow-y: scroll; @media (min-width: 900px) { @@ -86,3 +92,11 @@ gap: 22px; } } + +.count { + color: #6b7280; + letter-spacing: 0.25px; + font-size: 14px; + font-weight: 400; + line-height: 20px; +} diff --git a/src/app/_samples/mediaco/components/gallery-grid/table-template-card/table-template-card.scss b/src/app/_samples/mediaco/components/gallery-grid/table-template-card/table-template-card.scss index 9cc7e7aa..3483dab4 100644 --- a/src/app/_samples/mediaco/components/gallery-grid/table-template-card/table-template-card.scss +++ b/src/app/_samples/mediaco/components/gallery-grid/table-template-card/table-template-card.scss @@ -1,9 +1,12 @@ .m-card { border: 1px solid #e0e0e0; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - padding: 14px 16px; - transition: transform 0.2s; + border-radius: 20px; + box-shadow: + 0px 1px 2px 0px #0000004d, + 0px 2px 6px 2px #00000026; + padding: 18px; + transition: transform 0.1s; + background: #f3edf7; &:hover { transform: scale(1.01); @@ -23,8 +26,8 @@ } .m-icon { - min-width: 48px; - min-height: 48px; + min-width: 64px; + min-height: 64px; border-radius: 12px; display: grid; place-items: center; @@ -41,12 +44,17 @@ gap: 4px; } .m-title { - font-weight: 600; - color: #111827; + letter-spacing: 0; + font-size: 22px; + font-weight: 400; + line-height: 28px; + color: #1d1b20; } .m-desc { - color: #6b7280; + letter-spacing: 0.25px; font-size: 14px; + font-weight: 400; + line-height: 20px; } .bg-0 { diff --git a/src/app/_samples/mediaco/components/list-view/list-view.component.ts b/src/app/_samples/mediaco/components/list-view/list-view.component.ts index 346c95ef..85740a51 100644 --- a/src/app/_samples/mediaco/components/list-view/list-view.component.ts +++ b/src/app/_samples/mediaco/components/list-view/list-view.component.ts @@ -197,10 +197,10 @@ export class ListViewComponent implements OnInit { openShowAll() { this.dialog.open(GalleryGridComponent, { - width: '60vw', - height: '70vh', - maxWidth: '95vw', - maxHeight: '95vh', + width: '100%', + height: '100%', + maxWidth: '1400px', + maxHeight: '90vh', data: { dataPage: this.referenceDataPage,