← GDG /

#277 gdtest_scale_min_scale

#277 gdtest_scale_min_scale OK CONFIG
Minimum-scale keyword and float thresholds for scale-to-fit
Tests scale-to-fit minimum-scale thresholds: viewport keyword breakpoints (mobile ≤576px, tablet ≤768px, desktop ≤992px) and fractional float values. Verifies global keyword, per-page keyword overrides, per-page float override, and inheritance when no page-level override is set.
View Site → Build Log 🧪 Test Coverage

Build Mode

● Has great-docs.yml

This package ships a pre-supplied config. The great-docs init step is skipped and great-docs build uses the spec-defined configuration directly. Tests specific config options and their rendered output.

Dimensions

G7 M4 N1
G7Blended UG homepagelanding
M4Subdirectory UGuser_guide
N1Examples sectionsections

Source Files

📁 gdtest_scale_min_scale/
📄 __init__.py
"""A test package for scale-to-fit min-scale thresholds."""

__version__ = "0.1.0"
__all__ = [
    "make_wide_table",
    "make_narrow_table",
    "make_styled_table",
    "SummaryCard",
]


def make_wide_table():
    """
    Create a wide GT table with 14 columns.

    Returns
    -------
    GT
        A GT table that overflows most containers.

    Examples
    --------
    ```{python}
    from gdtest_scale_min_scale import make_wide_table
    make_wide_table()
    ```
    """
    from great_tables import GT
    import pandas as pd

    df = pd.DataFrame({
        f"V{i:02d}": [f"r{r}c{i}" for r in range(4)]
        for i in range(1, 15)
    })
    return (
        GT(df, id="stf_wide")
        .tab_header(title="Wide Table (14 cols)")
        .cols_width(**{f"V{i:02d}": "100px" for i in range(1, 15)})
        .tab_options(quarto_disable_processing=True)
    )


def make_narrow_table():
    """
    Create a narrow 3-column GT table (always fits).

    Returns
    -------
    GT
        A small table.
    """
    from great_tables import GT
    import pandas as pd

    df = pd.DataFrame({
        "A": ["x", "y"],
        "B": [1, 2],
        "C": ["ok", "ok"],
    })
    return (
        GT(df, id="stf_narrow")
        .tab_header(title="Narrow Table")
        .tab_options(quarto_disable_processing=True)
    )


def make_styled_table():
    """
    Create a styled GT table with 10 columns and color formatting.

    Returns
    -------
    GT
        A moderately wide GT table with styled cells.
    """
    from great_tables import GT, style, loc
    import pandas as pd

    df = pd.DataFrame({
        f"S{i:02d}": [round(i * 3.7 + r * 1.1, 1) for r in range(5)]
        for i in range(1, 11)
    })
    return (
        GT(df, id="stf_styled")
        .tab_header(
            title="Styled Table (10 cols)",
            subtitle="With cell highlighting",
        )
        .cols_width(**{f"S{i:02d}": "110px" for i in range(1, 11)})
        .tab_style(
            style=style.fill(color="#e8f5e9"),
            locations=loc.body(columns="S01"),
        )
        .tab_options(quarto_disable_processing=True)
    )


class SummaryCard:
    """
    A wide HTML summary card with ``_repr_html_``.

    Renders a fixed-width HTML block useful for testing
    scale-to-fit on non-GT ``_repr_html_`` objects.

    Parameters
    ----------
    card_id
        HTML ``id`` attribute.
    width
        CSS width (e.g., ``"1400px"``).
    """

    def __init__(self, card_id: str = "summary_card", width: str = "1400px"):
        self.card_id = card_id
        self.width = width

    def _repr_html_(self) -> str:
        """Render as a wide HTML card."""
        return (
            f'<div id="{self.card_id}" '
            f'style="width:{self.width};background:linear-gradient(135deg,#e3f2fd,#f3e5f5);'
            f'border:2px solid #7e57c2;border-radius:8px;padding:20px;'
            f'font-family:system-ui;">'
            f'<strong>SummaryCard</strong> &mdash; '
            f'id: {self.card_id}, width: {self.width}'
            f'</div>'
        )
📁 user_guide/
📄 01-no-override.qmd
---
title: No Override (Global Desktop)
---

This page inherits the global `scale_to_fit_min_scale: "desktop"`
setting. On viewports ≤ 992 px, the table scrolls.

## Wide GT Table

```{python}
#| echo: false
from gdtest_scale_min_scale import make_wide_table
make_wide_table()
```

## Styled GT Table

```{python}
#| echo: false
from gdtest_scale_min_scale import make_styled_table
make_styled_table()
```

## Narrow GT Table (not targeted)

```{python}
#| echo: false
from gdtest_scale_min_scale import make_narrow_table
make_narrow_table()
```
📄 02-mobile.qmd
---
title: Mobile Keyword
scale-to-fit:
  - "#stf_wide"
  - "#summary_card"
scale-to-fit-min-scale: mobile
---

This page overrides with `scale-to-fit-min-scale: mobile`.
Scrolls only on viewports ≤ 576 px.

## Wide GT Table

```{python}
#| echo: false
from gdtest_scale_min_scale import make_wide_table
make_wide_table()
```

## Summary Card (non-GT)

```{python}
#| echo: false
from gdtest_scale_min_scale import SummaryCard
SummaryCard(card_id='summary_card', width='1400px')
```
📄 03-tablet.qmd
---
title: Tablet Keyword
scale-to-fit:
  - "#stf_wide"
  - "#stf_styled"
scale-to-fit-min-scale: tablet
---

This page overrides with `scale-to-fit-min-scale: tablet`.
Scrolls on viewports ≤ 768 px.

## Wide GT Table

```{python}
#| echo: false
from gdtest_scale_min_scale import make_wide_table
make_wide_table()
```

## Styled GT Table

```{python}
#| echo: false
from gdtest_scale_min_scale import make_styled_table
make_styled_table()
```
📄 04-desktop.qmd
---
title: Desktop Keyword
scale-to-fit:
  - "#stf_wide"
scale-to-fit-min-scale: desktop
---

This page explicitly sets `scale-to-fit-min-scale: desktop`
(same as the global default, but declared per-page).
Scrolls on viewports ≤ 992 px.

## Wide GT Table

```{python}
#| echo: false
from gdtest_scale_min_scale import make_wide_table
make_wide_table()
```
📄 05-float-override.qmd
---
title: Float Override
scale-to-fit:
  - "#stf_wide"
  - "#stf_styled"
  - "#summary_card"
scale-to-fit-min-scale: 0.35
---

This page overrides with a numeric value: `0.35`.
If the computed scale drops below 35%, the table scrolls.

## Wide GT Table

```{python}
#| echo: false
from gdtest_scale_min_scale import make_wide_table
make_wide_table()
```

## Styled GT Table

```{python}
#| echo: false
from gdtest_scale_min_scale import make_styled_table
make_styled_table()
```

## Summary Card (non-GT)

```{python}
#| echo: false
from gdtest_scale_min_scale import SummaryCard
SummaryCard(card_id='summary_card', width='1400px')
```
📄 README.md
# gdtest-scale-min-scale

Test min-scale keyword and float thresholds for scale-to-fit.
📄 great-docs.yml
scale_to_fit:
  - "#stf_wide"
  - "#stf_styled"
  - "#summary_card"
scale_to_fit_min_scale: desktop