wintercms / wn-tailwindui-plugin Goto Github PK

The settings cog is gone and you can no longer edit its properties

When opening the CMS menu with the arrow, if a sub-menu items is clicked (e.g. Content), the Pages sub-menu is opened instead.

Subsequent clicks on sub-menu items work as expected.

The #20 PR introduces a display bug for me.
The sidenav layout overflow the content layout :

@joseph-sm can you test it with the default WinterCMS logo?

1 - Why switch to a white background?

I find the bar not contrasting enough in the overall interface.

I would prefer even a light color:

2 - For me, the shadow is not visible.

For it to be visible, a relative position and z-index must be added to the .layout-topmenu element.
Also I would have chosen a wider shadow (shadow-md).

Actual - invisible shadow:

With shadow visible :

With shadow-md visible :

I would be pleased to hear your thoughts on this.

A backend button with class icon-pencil doesn't render the icon, it renders a square with a cross in it

<button
    class="btn btn-primary icon-pencil"
    data-request="<?= $this->getEventHandler('onEdit'); ?>"
    data-request-data="id: <?= $id; ?>"
    title="Edit">
</button>

I don't think the colors generated are the best.

With amout set in percentage as actual :

With amout set as integer :

According to comments in phpColors.php, amout must be an integer.
https://github.com/mexitek/phpColors/blob/e10e44f67632096072237ff0822674a442d4bb50/src/Mexitek/PHPColors/Color.php#L401-L408

But if the base color is already dark (or light), it results in the generation of black (or white) past a certain percentage when using integer.

$color = new Color($colorString);
return [
    'dark' => $color->darken(20),
    'darker' => $color->darken(30),
    'darkest' => $color->darken(40),
    'light' => $color->lighten(25),
    'lighter' => $color->lighten(30),
    'lightest' => $color->lighten(35),
];

This is because the phpColors library calculates the percentage to be added based on 100% of the channel but not on the remaining percentage to reach the 0% (darker) or 100% (lighter).

$hsl['L'] = ($hsl['L'] * 100) - $amount;

The trick

So I've slightly modified the shade generation to caclulate a percentage of luminance :

$color = new Color($colorString);
$luminance = $color->getHsl()['L'] * 100;
return [
    'dark' => $color->darken($luminance * 0.20),
    'darker' => $color->darken($luminance * 0.30),
    'darkest' => $color->darken($luminance * 0.40),
    'light' => $color->lighten($luminance * 0.25),
    'lighter' => $color->lighten($luminance * 0.30),
    'lightest' => $color->lighten($luminance * 0.35),
];

And I think it give better results :

Maybe the amounts should be finely tuned.

Or equally spaced in the channel:

$color = new Color($colorString);
$luminance = $color->getHsl()['L'] * 100;
return [
    'dark' => $color->darken(($luminance / 4) * 1),
    'darker' => $color->darken(($luminance / 4) * 2),
    'darkest' => $color->darken(($luminance / 4) * 3),
    'light' => $color->lighten((100 - $luminance) / 4 * 1),
    'lighter' => $color->lighten((100 - $luminance) / 4 * 2),
    'lightest' => $color->lighten((100 - $luminance) / 4 * 3),
];

When using TailwindUI the snippets column doesn't display any of the snippets with codes assigned in the CMS partials. When disabling this plugin and using the default backend, these snippets appear again.

Excuse me, the builder plugin cannot be used for this skin

Winter CMS Build

1.2.1

PHP Version

8.1.13

Database engine

sqlite / any

Plugins installed

wn-tailwindui-plugin

Issue description

Installing this plugin removes

/modules/system/assets/js/build/system.debug.js
/modules/backend/assets/ui/js/build/manifest.js
/modules/backend/assets/ui/js/build/vendor.js

This prevents $.request as CSRF header is not added to AJAX requests.

Steps to replicate

composer create-project wintercms/winter

At this point, the files are intact.

composer require winter/wn-tailwindui-plugin

Now the files are missing.

Login to backend check network requests

Workaround

Download the above files from the main repository or use composer require winter/wn-tailwindui-plugin:dev-main#ed9af5c which was the last commit before the changes.

The color-mod function requires the --primary & --secondary CSS vars to be present during compile time which fails under the current configuration rendering any color-mod defined colours unavailable at the moment.

A couple of different options are available:

• Find a way to inject variables during the compilation process and require each project using this plugin to recompile the styles for themselves
• Perform colour modifications in PHP and inject them as root CSS variables like we're doing now with primary & secondary and then refer to those variables in the tailwind.config.js file. (This is my preferred solution).

@joseph-sm @jaxwilko thoughts?

Using @apply h-screen for the layout container, gives me scrollbars in every backend pages.

Tested on Windows on Firefox, Edge and Chrome.

Replacing it with height : calc(100vh - 4rem) remove the scrollbars.
Need to remove layout-topmenu container's height.

As Tailwind unstyled headings (see: Headings are unstyled ), it make a significant difference between standard and tailwind backend UIs.

Standart Winter backend UI

This plugin

Wouldn't it be possible to add some substance to the titles, or the plugin devs have to add their owns styles ?