twill icon indicating copy to clipboard operation
twill copied to clipboard

[3.x]: Make breakpoints configurable

Open AndreSchwarzer opened this issue 4 years ago • 0 comments

Summary

Make breakpoints in preview configurable.

Screenshot 2022-04-19 at 14 38 25

Describe the solution you'd like

I'd like to have the option to set the breakpoints via a config file.

<?php

// config/twill.php

return [

    // ...

    'block_editor' => [
        'preview' => [
            'breakpoints' => [
                   [
                         'size' => 1280,
                         'name' => 'preview-desktop',
                    ],
                    [
                         'size' => 1024,
                         'name' => 'preview-tablet-h',
                    ],
                    [
                         'size' => 768,
                         'name' => 'preview-tablet-v',
                    ],
                    [
                         'size' => 320,
                         'name' => 'preview-mobile',
                    ]
            ]
        ],
    ],

    // ...

];

Additional context

Current implementation (hard coded): https://github.com/area17/twill/blob/488f12285b7199feed898d822a35edecc50ef34b/frontend/js/components/Previewer.vue#L81-L98

Discord Request/Discusion: https://discord.com/channels/811936425858695198/811986149064441927/965954907498766336

AndreSchwarzer avatar Apr 19 '22 12:04 AndreSchwarzer