Revert plugin details content styling in backend UI

[Satoshi-Sh]

Related Issue

#49 and #34

Updates

The tailwind preflight reset the styling in the plugin-details-content.

To resolve this, I added plugin-details-content.css with revert to keep the original styling.

Screenshot

[damsfx]

The plugin detail page is not the only place where typography need to be revert.

If you add a content page (page with texts) to a controller, you can see that it is not displayed the same between classic and Tailwind backend.

[Satoshi-Sh]

Thanks for the feedback.

I'm trying to test If you add a content page (page with texts) to a controller, you can see that it is not displayed the same between classic and Tailwind backend. To do this, I created a backend controller with a static content page (_index.htm) in my custom plugin. However, when I visit the corresponding backend URL, I get the following error.

[damsfx]

@Satoshi-Sh what you need :

• a méthode in your controller (ex: public function formatedText() ) that will be your controller action
• a partial with the same name in your controller directory ( formatedtext.php) that can contain html and php tags
• access the page with backend/(plugin vendor name)/(plugin name)/(controller name)/(action name) (ex backend/acme/myplugin/testcontroller/formatedtext )

You can go in a short way by just edit the index.php partial of any controller (may not be present if you have generated your controller with WinterCms v1.2.8+).

[Satoshi-Sh]

Thanks for the guidance. I was finally able to create a backend page.

The plugin content page works fine with the revert strategy as it has a specific class name.

The issue with a backend controller pages is that they don't have a specific class name. I could make a class like revert-styling and wrap a content with div with the class.

I could try to add styling to basic elements globally, but I'm not sure how it affects to the existing backend styling.

Let me know what you think.

[damsfx]

I'm not one of the project maintainers ... so my opinion is only advisory.

I don't think that having a dedicated class for retrieving the default values of typography elements is the best solution.
It works, but it also forces us to add a css class to all the controllers for which we want to retrieve the basic styles.
Not dramatic in itself, but it does mean that you have to consider whether or not the Tailwind plugin will be used when creating a plugin.

I think the best way to consider is either :

• extends Tailwind's preflight in a @layer base directive Extending Preflight
• configure tailwind in this plugin to not use preflight Disabling Preflight, but it may result in side effects

@LukeTowers your thoughts?

[Satoshi-Sh]

extends Tailwind's preflight in a @layer base directive Extending Preflight

If this works fine with the other pages, this will be the best. I might explore this option and keep updating.

[Satoshi-Sh]

I just tested preflight off with config and extending preflight.

Preflight-Off

Button background becomes white.

Prefligh Extend

I just added it to base.css

@layer base {
    h1, h2, h3, h4, h5, h6,
    p, ul, ol, li,
    blockquote, code, pre,
    table, th, td {
      all: revert;
    }
  }

As long as I see, it didn't affect the other parts. We could use preflight extending.

I'm kind of curious why Winter log is not showing on the side navbar. Is this a bug?
<img class="h-12 w-auto " src="" alt="Winter CMS"> Src attribute is empty.

[LukeTowers]

@Satoshi-Sh the preflight extending option looks good. Not sure why the logo isn't showing up for you, did you change the logo in the backend settings?

[Satoshi-Sh]

@LukeTowers I haven't touched the backend setting.

I created a new project with composer create-project wintercms/winter winter-tail and clone wn-tailwindui-plugin to the plugins/winter folder, and ran php artisan mix:install.

I also needed to run composer require mexitek/phpcolors because I got this error Class "Mexitek\PHPColors\Color" not found on running the project.

The project is now running, but the logo isn’t showing up.

[damsfx]

@Satoshi-Sh the preflight extending option looks good. Not sure why the logo isn't showing up for you, did you change the logo in the backend settings?

Logo not showing for me too (empty src attribute).
I've got no logo, neither no favicon, set in brand settings.

[LukeTowers]

I also needed to run composer require mexitek/phpcolors because I got this error Class "Mexitek\PHPColors\Color" not found on running the project.

@Satoshi-Sh you had to do that because you didn't pull in the plugin via composer (composer require winter/wn-tailwindui-plugin). Alternatively if you wanted to git clone the repo directly you would need to include the plugin's composer.json in the merge-plugin's config of your main composer.json file: https://github.com/wintercms/winter/blob/develop/composer.json#L73 and then run composer install.

The logo is rendered here: https://github.com/wintercms/wn-tailwindui-plugin/blob/main/skins/tailwindui/layouts/_menu-side.php#L34, @Satoshi-Sh could you do some debugging and see if you can figure out why it's not outputting anything?

[Satoshi-Sh]

I found a typo on the code

src="<?= e($logoImage) ?? Url::asset('modules/backend/assets/images/winter-logo-white.svg') ?>"

[LukeTowers]

@Satoshi-Sh what's the typo? Feel free to submit a PR fixing the issue

[Satoshi-Sh]

e($logoImage)

Sure, I will make another PR.

Oh e is a function, but when I delete the function. The logo came back. I will have a look at this.