From f4025c83bc181550c05a84125231deebec0624e3 Mon Sep 17 00:00:00 2001 From: Pratham <162104630+Pratz2005@users.noreply.github.com> Date: Fri, 13 Dec 2024 15:41:02 +0800 Subject: [PATCH] Fixed collection-info table --- .../collections-info-overlay.component.html | 11 +++-- .../collections-info-overlay.component.scss | 41 +++++++++++++++++++ 2 files changed, 48 insertions(+), 4 deletions(-) diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.html b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.html index 6d35341bf..21562fa52 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.html +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.html @@ -84,8 +84,8 @@ 'd-none': object.isCut && hideInvisible, }" > - #{{ i }} - + #{{ i }} +
- +
- + {{ object[column] }} diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.scss b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.scss index cc9fab8d2..d959f7d84 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.scss +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.scss @@ -1,3 +1,42 @@ +@media screen and (max-width: 400px) { + .collectionsInfo table, + .collectionsInfo thead, + .collectionsInfo tbody, + .collectionsInfo th, + .collectionsInfo td, + .collectionsInfo tr { + display: block; + } + + .collectionsInfo thead tr { + position: absolute; + top: -9999px; + left: -9999px; + } + + .collectionsInfo tr { + margin: 0 0 1rem 0; + } + + .collectionsInfo td { + border: none; + position: relative; + padding-left: 50%; + text-align: left; + } + + .collectionsInfo td::before { + position: absolute; + top: 0; + left: 0; + width: 45%; + padding-right: 10px; + white-space: nowrap; + content: attr(data-label); + font-weight: bold; + } +} + .collectionsInfo { height: 95%; @@ -105,6 +144,8 @@ } td { + min-height: 20px; + .object-select { position: relative; width: 1.6rem;