Nicely formatted tables in info-fields (maybe feature request?)

[stairjoke]

Hi,
I need to display a lot of pixel values in a custom block that allows users to upload different images for different viewport sizes and layout contexts. To display them more orderly, I decided to use tables inside an info-field:

I was really happy to see that I can add a Markdown formatted table to the info-field in a blueprint! And I’d love to see these tables formatted more nicely in the Panel. Here is the YAML for the table above:

infoDesktop:
  type: info
  label:
    de: Größentabelle
    en: Size guide
  text:
    de: |
      | Anzeigegröße | `@2x` | `@1x` |
      | ---: | :--- | :--- |
      | Volle Breite: | `3264px` | `1632px` |
      | Übergroß: | `2176px` | `1088px` |
      | Hauptteil: | `1632px` | `816px` |
      | Zwei Drittel: | `1088px` | `544px` |
      | Herausragendes Drittel: | `816px` | `408px` |
      | Spalte: | `816px` | `408px` |
      | Ein Drittel: | `544px` | `272px` |
    en: |
      | Layout Size | `@2x` | `@1x` |
      | ---: | :--- | :--- |
      | Full width: | `3264px` | `1632px` |
      | Oversized: | `2176px` | `1088px` |
      | Main content: | `1632px` | `816px` |
      | Two Thirds: | `1088px` | `544px` |
      | Oversized third: | `816px` | `408px` |
      | Column: | `816px` | `408px` |
      | One third: | `544px` | `272px` |

I’m not sure if there is anything I can do about this, short of writing a plugin to inject some custom CSS into the Panel or kind of hacking my CSS into the markdown in the info field. Is there a way to make this table look better, or is this feature request to support tabled in info-fields?

[texnixe]

You can use custom panel css: panel | Kirby CMS

Then use .k-info-field table etc. as selector to address tables inside an info field.

[GB_DESIGN]

… or you create a structure field, fill it with content and then disable it to protect it from changes.

In your blueprint:
(I have not taken the translation of the fields into account in my example.)

size_guide:
    type: structure
    label: Size Guide
    columns:
        description:
            width: 2/4
        size2x:
            width: 1/4
            after: "px"
        size1x:
            width: 1/4
            after: "px"
    fields:
        description:
            label: Layout size
            type: text
        size2x:
            label: @2x
            type: text
            width: 1/2
        size1x:
            label: @1x
            type: text
            width: 1/2
    disabled: true

In your .txt file:

Size-guide:

- 
  description: Full width
  size2x: "3264"
  size1x: "1632"
- 
  description: Oversized
  size2x: "2176"
  size1x: "1088"
- 
  description: Main content
  size2x: "1632"
  size1x: "816"
- 
  description: Two Thirds
  size2x: "1088"
  size1x: "544"
- 
  description: Oversized third
  size2x: "816"
  size1x: "408"
- 
  description: Column
  size2x: "816"
  size1x: "408"
- 
  description: One third
  size2x: "544"
  size1x: "272"

[texnixe]

@GB_DESIGN How would this work within a custom block?

[GB_DESIGN]

@texnixe

How would this work within a custom block?

It is also possible to integrate a structure field into a custom block.
Or have I not understood the requirement correctly?
I have just integrated it into my table block:

Or do you mean the problem that the values are not stored centrally, like in an info field that is swapped out as a snippet?

Then of course it makes sense to make the info field prettier with CSS

[texnixe]

@GB_DESIGN

Or do you mean the problem that the values are not stored centrally,

Exactly, the content of that field needs to be stored somewhere to work as info for every block of that type. So I think the info field is the better (and probably only feasible) option, and it stands out as information, rather than content that is disabled.

[GB_DESIGN]

Of course I agree with you in this context.

[stairjoke]

Thanks all adding custom CSS like explained by @texnixe worked well. Its not a work of art, but more easily legible