Upgrade bootswatch to version 4

[bechir]

Hi,

After comparing changes before and after in #1030 I said to myself It's maybe better to create remake the job with new newly updated Symfony 5.2 (and bootswtach v5.4.3).

I know @javiereguiluz wanted to resolve the conflicts himself but you can still see the work I did here

Comparaison home

Before

After

Comparaison blog

Before

After

Comparaison show code

Before

After

Comparaison pagination

Before

After

Comparaison login

Before

After

Comparaison admin

Before

After

Comparaison edit post

Before

After

Comparaison show post

Before

After

Comparaison edit post (tags)

Before

After

Comparaison post with errors

Before

After

CHANGELOG

In packages.json

• Upgraded bootswatch to version 4.5.3
• Upgraded bootstrap to version 4.5.3
• Removed eonasdan-bootstrap-datetimepicker dependency (This is not compatible with bootstrap 4)

In scss files

• Removed the $icon-font-path we no longer need this
• Moved variables import to new _variables.scss file containg our custom variables
• Updated imports
• Replaced hardcoded colors value with custom variables name

In javascript files

• Replaced deprecated method submit() by trigger('submit')
• Updated highlightjs imports

In twig files

• Replaced well class by jumbotron with some changes in the default paddings
• Replaced label label-* by badge badge-*
• Replaced pull-right by float-right I d'ont kown if it's the same but we have the same result
• Updated classes name
• Added the active route class to active

Tests

• Beacause the form layout changed, we need to update assertions in App\Tests\Controller\Admin\BlogControllerTest::testAdminNewPost

I didn't added datetimepicker yet because the tempusdominus/bootstrap-4 project is getting rolled back into the orginal repo, but it's still in progress.

This lib is for bootstrap 4 and it's based on the Eonasdan's Bootstrap 3 date/time picker.
But flatpickr is more powerful with zero dependencies

I didn't added it yet, I'm juste waiting for feedbacks.

Thanks for your time!

[noniagriconomie]

to rollback

[bechir]

Ok i rolled it back and i got this

[bechir]

And the test testAdminNewDuplicatedPost method is failing because we no longer have form-group.has-error

[noniagriconomie]

i was commenting to rollback the extra space on the precise line i commented on

from

{# use font-awesome icon library #}

to
{# use font-awesome icon library # }

sorry if it was unclear :s

[bechir]

Ah sorry.
The reason why I added that extra space is when I don't do so the code after that line will not be commented

[noniagriconomie]

Suggested change

	{% set route = app.request.get('_route') %}
	{% set _route = app.request.get('_route') %}

what about this?

[noniagriconomie]

nice one :)

[bechir]

Hi @noniagriconomie,
Thanks you for your feedbacks

I updated my code but the datetime picker initialization is still missing.
You can check flatpickr the design look good and it's about 13KB

[noniagriconomie]

@bechir i think i am not the person who will decide if or not to replace this lib,
for me it does not matter, as the main point of this projetc is showcasing symfony etc, but lets wait main maintainers 👍

[bechir]

OK thanks you again.

[javiereguiluz]

@bechir thanks a lot for contributing this!

The proposed changes look fantastic to me! About flatpicker, yes let's use it. I'd prefer to use the browser native datetime-local input widget, but that doesn't work in Firefox yet, so let's use flatpicker. Thanks!

[stof]

a button without an explicit type is a very bad idea: this makes it a submit button. and this is even worse here because this is indeed inside a form...

[bechir]

So I replaced the button by a span

[stof]

using a button was the right thing to do from an accessibility point of view. But it needs an explicit type=button so that it is not a submit button.

[bechir]

Ok I understand. Thanks.

[bechir]

Thanks for your feedbacks @javiereguiluz and @stof!
I definitively need help about integrating flatpickr.

The problem is the date is not parsed correctly in admin.js

$('[data-toggle="datetimepicker"]').flatpickr({
        enableTime: true,
        dateFormat: $('#post_publishedAt').data('date-format'),
        allowInput: true,
        parseDate: (datestr, format) => {
            return moment(datestr, format, true).toDate();
        },
        formatDate: (date, format, locale) => {
            return moment(date).format(format);
        }
});

The calendar widget is shown but when I select a date nothing happen.

[atierant]

@see 4a1d48b#diff-38752f070c2739871db0d206c9862337269e4d635f2e63e37e53c5a248c791bd for a resolution without moment.js which is deprecated

[javiereguiluz]

Closing as fixed by #1412. Bechir, I'm really sorry we didn't merge this contribution ... but I'm happy that most of your work was reused as the base of #1412. Thanks!