Skip to content

Commit e6e0725

Browse files
habdelrahabdelra
committed
Merge remote-tracking branch 'origin/main' into cs-7011-chriss-matrix-bug-old-matrix-event-data-is-not-serialized-as
2 parents 97b1006 + 77a90cf commit e6e0725

File tree

8 files changed

+455
-245
lines changed

8 files changed

+455
-245
lines changed

‎packages/base/card-api.gts

+216-56
Original file line numberDiff line numberDiff line change
@@ -1818,17 +1818,17 @@ class DefaultEmbeddedTemplate extends GlimmerComponent<{
18181818
{{/unless}}
18191819
</div>
18201820
</div>
1821-
<div class='thumbnail-subsection'>
1822-
<div class='thumbnail-subsection'>
1823-
<h3 class='card-title' data-test-card-title>{{@model.title}}</h3>
1824-
</div>
1825-
<div class='thumbnail-subsection'>
1826-
<h4
1827-
class='card-display-name'
1828-
data-test-card-display-name
1829-
>{{cardTypeDisplayName @model}}</h4>
1830-
</div>
1821+
<div class='info-section'>
1822+
<h3 class='card-title' data-test-card-title>{{@model.title}}</h3>
1823+
<h4
1824+
class='card-display-name'
1825+
data-test-card-display-name
1826+
>{{cardTypeDisplayName @model}}</h4>
18311827
</div>
1828+
<div
1829+
class='card-description'
1830+
data-test-card-description
1831+
>{{@model.description}}</div>
18321832
{{else}}
18331833
{{! empty links-to field }}
18341834
<div data-test-empty-field class='empty-field'></div>
@@ -1839,82 +1839,234 @@ class DefaultEmbeddedTemplate extends GlimmerComponent<{
18391839
width: 100%;
18401840
height: 100%;
18411841
display: flex;
1842-
flex-wrap: wrap;
18431842
}
1844-
/*
1845-
sadly you can't use css vars in container queries. also be careful of fractional pixel
1846-
dimensions in the breakpoints. due to this we use the "breakpoint - 1 pixel" in the
1847-
container query conditions
1848-
*/
18491843
1850-
/* strip style embedded card */
1851-
@container embedded-card (height <= 223px) {
1844+
/* Aspect Ratio <= 1.0 */
1845+
1846+
@container embedded-card (aspect-ratio <= 1.0) {
18521847
.embedded-template {
1853-
column-gap: 10px;
1854-
padding: 5px;
1848+
align-content: flex-start;
1849+
justify-content: center;
1850+
padding: 10px;
1851+
flex-wrap: wrap;
1852+
}
1853+
.card-title {
1854+
display: -webkit-box;
1855+
-webkit-line-clamp: 2;
1856+
-webkit-box-orient: vertical;
1857+
overflow: hidden;
1858+
text-align: center;
1859+
margin: 10px 0 0 0;
1860+
}
1861+
.card-display-name {
1862+
text-align: center;
1863+
margin: var(--boxel-sp-xxs) 0 0 0;
1864+
}
1865+
.card-description {
1866+
display: none;
1867+
}
1868+
.thumbnail-section {
1869+
width: 100%;
1870+
}
1871+
.info-section {
1872+
width: 100%;
1873+
}
1874+
}
1875+
@container embedded-card (0.75 < aspect-ratio <= 1.0) {
1876+
.thumbnail-section {
1877+
/*
1878+
64.35px is the computed height for the info section--at this particular
1879+
aspect ratio break-point the height is the dominant axis for which to
1880+
base the dimensions of the thumbnail
1881+
*/
1882+
height: calc(100% - 64.35px);
18551883
}
18561884
.card-thumbnail {
1857-
width: var(--strip-embedded-thumbnail-width);
1858-
height: var(--strip-embedded-thumbnail-height);
1859-
border-radius: 6px;
1885+
height: 100%;
18601886
}
1861-
.card-thumbnail-text {
1862-
visibility: hidden;
1887+
}
1888+
@container embedded-card (aspect-ratio <= 0.75) {
1889+
.card-thumbnail {
1890+
width: 100%;
1891+
}
1892+
}
1893+
@container embedded-card (aspect-ratio <= 1.0) and ((width < 150px) or (height < 150px)) {
1894+
.card-title {
1895+
font: 500 var(--boxel-font-xs);
1896+
line-height: 1.27;
1897+
letter-spacing: 0.11px;
18631898
}
18641899
}
1865-
/* small and medium thumbnail styles embedded card */
1866-
@container embedded-card (223px < height <= 249px) {
1900+
@container embedded-card (aspect-ratio <= 1.0) and (150px <= width) and (150px <= height) {
1901+
.card-title {
1902+
font: 500 var(--boxel-font-sm);
1903+
line-height: 1.23;
1904+
letter-spacing: 0.13px;
1905+
}
1906+
}
1907+
@container embedded-card (aspect-ratio <= 1.0) and (118px < height) {
1908+
.thumbnail-section {
1909+
display: flex;
1910+
}
1911+
}
1912+
@container embedded-card (aspect-ratio <= 1.0) and (height <= 118px) {
1913+
.thumbnail-section {
1914+
display: none;
1915+
}
1916+
}
1917+
1918+
/* 1.0 < Aspect Ratio */
1919+
1920+
@container embedded-card (1.0 < aspect-ratio) and (77px < height) {
1921+
.card-title {
1922+
-webkit-line-clamp: 2;
1923+
}
1924+
}
1925+
@container embedded-card (1.0 < aspect-ratio) and (height <= 77px) {
1926+
.card-title {
1927+
-webkit-line-clamp: 1;
1928+
}
1929+
}
1930+
@container embedded-card (1.0 < aspect-ratio) and (width < 200px) {
1931+
.thumbnail-section {
1932+
display: none;
1933+
}
1934+
.card-title {
1935+
margin: 0;
1936+
}
1937+
}
1938+
@container embedded-card (1.0 < aspect-ratio) and (200px <= width) {
1939+
.card-title {
1940+
margin: 10px 0 0 0;
1941+
}
1942+
}
1943+
1944+
/* 1.0 < Aspect Ratio <= 2.0 */
1945+
1946+
@container embedded-card (1.0 < aspect-ratio <= 2.0) {
18671947
.embedded-template {
1948+
align-content: flex-start;
18681949
justify-content: center;
18691950
padding: 10px;
1951+
column-gap: 10px;
18701952
}
18711953
.card-title {
1872-
height: 35px;
1873-
text-align: center;
1954+
display: -webkit-box;
1955+
-webkit-box-orient: vertical;
1956+
overflow: hidden;
1957+
line-height: 1.25;
1958+
letter-spacing: 0.16px;
18741959
}
18751960
.card-display-name {
1876-
text-align: center;
1961+
margin: var(--boxel-sp-xxs) 0 0 0;
18771962
}
1878-
.card-thumbnail {
1879-
width: var(--small-embedded-thumbnail-width);
1880-
height: var(--small-embedded-thumbnail-height);
1881-
border-radius: var(--boxel-border-radius);
1882-
margin-bottom: 11px;
1883-
padding: var(--boxel-sp-lg) var(--boxel-sp-xs);
1963+
}
1964+
@container embedded-card (1.0 < aspect-ratio <= 2.0) and (width < 200px) {
1965+
.thumbnail-section {
1966+
display: none;
1967+
}
1968+
.card-title {
1969+
margin: 0;
1970+
font: 500 var(--boxel-font-size-sm);
1971+
}
1972+
}
1973+
@container embedded-card (1.0 < aspect-ratio <= 2.0) and (200px <= width) {
1974+
.card-title {
1975+
margin: 10px 0 0 0;
1976+
font: 500 var(--boxel-font-size-med);
1977+
}
1978+
}
1979+
@container embedded-card (1.67 < aspect-ratio <= 2.0) {
1980+
.embedded-template {
1981+
flex-wrap: nowrap;
18841982
}
18851983
.thumbnail-section {
18861984
width: 100%;
1985+
height: 100%;
18871986
}
1888-
.thumbnail-subsection {
1987+
.info-section {
18891988
width: 100%;
18901989
}
1990+
.card-description {
1991+
display: none;
1992+
}
1993+
.card-thumbnail {
1994+
/* at this breakpoint, the dominant axis is the height for
1995+
thumbnail 1:1 aspect ratio calculations
1996+
*/
1997+
height: 100%;
1998+
}
18911999
}
2000+
@container embedded-card (1.0 < aspect-ratio <= 1.67) {
2001+
.embedded-template {
2002+
flex-wrap: wrap;
2003+
}
2004+
.thumbnail-section {
2005+
flex: 1 auto;
2006+
max-width: 50%;
2007+
/* 24px is the computed height for the card description */
2008+
height: calc(100% - 24px);
2009+
}
2010+
.info-section {
2011+
flex: 1 auto;
2012+
max-width: 50%;
2013+
}
2014+
.card-description {
2015+
display: -webkit-box;
2016+
flex: 1 100%;
2017+
}
2018+
.card-thumbnail {
2019+
/* at this breakpoint, the dominant axis is the width for
2020+
thumbnail 1:1 aspect ratio calculations
2021+
*/
2022+
width: 100%;
2023+
}
2024+
}
2025+
2026+
/* Aspect Ratio < 2.0 */
18922027
1893-
/* large thumbnail style embedded card */
1894-
@container embedded-card (249px < height) and (339px < width) {
2028+
@container embedded-card (2.0 < aspect-ratio) {
18952029
.embedded-template {
18962030
justify-content: center;
18972031
padding: 10px;
2032+
column-gap: 10px;
2033+
flex-wrap: nowrap;
18982034
}
18992035
.card-title {
1900-
height: 35px;
1901-
text-align: center;
2036+
display: -webkit-box;
2037+
-webkit-box-orient: vertical;
2038+
-webkit-line-clamp: 1;
2039+
overflow: hidden;
2040+
line-height: 1.25;
2041+
letter-spacing: 0.16px;
2042+
font: 500 var(--boxel-font-size-med);
2043+
margin: 0;
19022044
}
19032045
.card-display-name {
1904-
text-align: center;
2046+
margin: var(--boxel-sp-4xs) 0 0 0;
19052047
}
1906-
.card-thumbnail {
1907-
width: var(--large-embedded-thumbnail-width);
1908-
height: var(--large-embedded-thumbnail-height);
1909-
border-radius: var(--boxel-border-radius);
1910-
margin-bottom: 11px;
1911-
padding: var(--boxel-sp-lg) var(--boxel-sp-xs);
2048+
.thumbnail-section {
2049+
flex: 1;
2050+
}
2051+
.info-section {
2052+
flex: 4;
2053+
}
2054+
.card-description {
2055+
display: none;
2056+
}
2057+
}
2058+
@container embedded-card (2.0 < aspect-ratio) and (height <= 57px) {
2059+
.embedded-template {
2060+
padding: 6px;
19122061
}
19132062
.thumbnail-section {
1914-
width: 100%;
2063+
display: none;
19152064
}
1916-
.thumbnail-subsection {
1917-
width: 100%;
2065+
.card-title {
2066+
margin: 0;
2067+
}
2068+
.card-display-name {
2069+
display: none;
19182070
}
19192071
}
19202072
@@ -1927,6 +2079,7 @@ class DefaultEmbeddedTemplate extends GlimmerComponent<{
19272079
}
19282080
.card-thumbnail {
19292081
display: flex;
2082+
aspect-ratio: 1 / 1;
19302083
align-items: center;
19312084
justify-content: center;
19322085
background-color: var(--boxel-teal);
@@ -1936,22 +2089,29 @@ class DefaultEmbeddedTemplate extends GlimmerComponent<{
19362089
color: var(--boxel-light);
19372090
font: 700 var(--boxel-font);
19382091
letter-spacing: var(--boxel-lsp);
2092+
border-radius: 6px;
19392093
}
19402094
.card-title {
1941-
margin: 0;
1942-
font: 500 var(--boxel-font-sm);
1943-
line-height: 1.23;
19442095
text-overflow: ellipsis;
19452096
}
19462097
.card-display-name {
1947-
margin: 0;
19482098
font: 500 var(--boxel-font-xs);
19492099
color: var(--boxel-450);
19502100
line-height: 1.27;
2101+
letter-spacing: 0.11px;
19512102
text-overflow: ellipsis;
19522103
}
2104+
.card-description {
2105+
margin: var(--boxel-sp-xxs) 0 0 0;
2106+
font: 500 var(--boxel-font-xs);
2107+
line-height: 1.27;
2108+
letter-spacing: 0.11px;
2109+
text-overflow: ellipsis;
2110+
-webkit-line-clamp: 1;
2111+
-webkit-box-orient: vertical;
2112+
overflow: hidden;
2113+
}
19532114
.thumbnail-section {
1954-
display: flex;
19552115
justify-content: center;
19562116
}
19572117
</style>

‎packages/boxel-ui/addon/src/styles/variables.css

-8
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,6 @@
8383
--boxel-xl-container: 65rem; /* 1040px */
8484
--boxel-xxl-container: 83.76rem; /* 1340px */
8585

86-
/* embedded card */
87-
--strip-embedded-thumbnail-height: 30px;
88-
--strip-embedded-thumbnail-width: 30px;
89-
--small-embedded-thumbnail-height: 142px;
90-
--small-embedded-thumbnail-width: 142px;
91-
--large-embedded-thumbnail-height: 166px;
92-
--large-embedded-thumbnail-width: 328px;
93-
9486

9587
/* COLOR PALETTE */
9688

‎packages/drafts-realm/PuppyCard/4884f71e-4574-432b-a994-d2d2e5dec8b9.json

+3-3
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)