[4.0] Atum and Cassiopea Change alerts styling - space saving + by infograf768 · Pull Request #30294 · joomla/joomla-cms

infograf768 · 2020-08-05T16:46:35Z

Replaces #28974
Thanks @coolcat-creations for the original PR, here improved
Thanks @Fedik for the suggestions

Summary of Changes

Changed the Header of the message to be next to the message to save space
Decreased paddings
Changed colors

Normalise system.message layout and message.es6 by using div instead of span and p tags

Testing Instructions

Edit or create an article. Let title empty and save.

Install a clean Joomla after patching to test installation errors, see #30294 (comment)

Patch. Run npm.

Test various messages including in the login page.

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Quy · 2020-08-05T17:00:36Z

infograf768 · 2020-08-06T06:31:05Z

@Quy
We have to look at that one. Will do but may need some help.

Edit: this message depends on a different layout: /plugins/system/stats/layouts/message.php

infograf768 · 2020-08-06T06:50:04Z

@Quy
Done. We now get:

SharkyKZ · 2020-08-06T07:57:38Z

Quy · 2020-08-06T08:10:35Z

I personally like the current styling even though it takes up a little more spacing.

infograf768 · 2020-08-06T08:12:03Z

@SharkyKZ
I do get here correctly

SharkyKZ · 2020-08-06T08:15:41Z

My bad, I didn't compile JS. Still looks bad on frontend and on mobile.

infograf768 · 2020-08-06T08:44:15Z

My bad, I didn't compile JS. Still looks bad on frontend and on mobile.

Backend:
On mobile I see no specific issue.

Frontend
I had never tested in frontend. ;)
It needs some supplementary work indeed. Looking at it now.

infograf768 · 2020-08-06T09:43:29Z

Adapt alerts in Cassiopea too:

administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss

richard67 · 2020-08-07T06:31:20Z

@infograf768 Drone shows some scss code style errors in its test "scss-cs", see here: https://ci.joomla.org/joomla/joomla-cms/34516/1/24. Could you fix that?

infograf768 · 2020-08-07T07:38:13Z

On it

infograf768 · 2020-08-07T11:03:08Z

@richard67
Completed

infograf768 · 2020-08-07T18:43:59Z

Will complete Pr tomorrow with alerts in Installation

chmst · 2020-08-07T19:45:58Z

@helvecio - maybe relevant in the Frontend Template design

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30294.}

infograf768 · 2020-08-08T05:56:28Z

Modifications done for Installation.
We now get:

Folks, please now test.

infograf768 · 2020-08-08T06:02:11Z

I know... have again to correct order in scss. Will do later.

infograf768 · 2020-08-08T08:18:03Z

This can also be tested when installing a clean J to test install errors.
For example: enter a wrong db credential or trying to install a language which is not available for j4 (Afrikaans will do).
Prebuilt package can help people not using npm ci
https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/30294/downloads/34546/

richard67 · 2020-08-08T12:52:20Z

Either I did something wrong (which I always consider as possible), or the installation is missing some (s)css:

I did an npm run build:css after having applied the PR, and I cleared browser cache, too, and I've verified that the changes in file installation/template/scss/template.scss have been correctly applied by patchtester.

richard67 · 2020-08-08T12:59:57Z

False alarm. It seems that stuff is really sticky in browser cache. After not having only cleared the cache but also having closed the browser window after that, and having run npm ci instead of compiling the scss only, all looks well:

@infograf768 Sorry for false alarm.

richard67 · 2020-08-08T13:06:15Z

I have tested this item ✅ successfully on 6d287fb

Tested alerts on installation, the statistics alert after installation, alerts in backend and frontend.

The latter (alerts in backend and frontend) I've also tested with RTL language (Persian).

All fine.

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30294.}

alikon · 2020-08-10T09:29:24Z

I have tested this item ✅ successfully on 6d287fb

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30294.}

alikon · 2020-08-10T09:29:46Z

RTC

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30294.}

wilsonge · 2020-08-11T10:33:46Z

Personally I kinda like the new look. Thanks @coolcat-creations and @infograf768 !

…om_templates * '4.0-dev' of github.com:joomla/joomla-cms: Add closing quote (joomla#30353) [4.0] Make sure the renderer does not manipulate the inline CSS and JS (joomla#28719) [4.0] Atum and Cassiopea Change alerts styling - space saving + (joomla#30294) Update editor versions (joomla#30340) [4.0][mod_menu] Add space for 'menu class' (joomla#30341) Optimize code for aria-current (joomla#30328) [4.0] Composer and npm updates 10 Aug (joomla#30334) [4.0] fix js code style (joomla#30335)

…la#30294)

This is a replacement to part of the merged PR joomla#30294 It does exactly the same thing but by using css logical properties we avoid the need to maintain both an LTR and an RTL version There is no visual change.

This is a replacement to part of the merged PR #30294 It does exactly the same thing but by using css logical properties we avoid the need to maintain both an LTR and an RTL version There is no visual change.

[4.0] Atum Change alerts styling - space saving

209c241

joomla-cms-bot added NPM Resource Changed This Pull Request can't be tested by Patchtester PR-4.0-dev labels Aug 5, 2020

infograf768 mentioned this pull request Aug 5, 2020

[4.0] Template Atum - Change Alerts styling - Space saving #28974

Closed

correcting stats alert layout

9376971

Quy mentioned this pull request Aug 6, 2020

[4.0] Select button for category image not visible under Apple Safari browser #30298

Closed

Correcting alerts in front-end

33b6f1d

infograf768 changed the title ~~[4.0] Atum Change alerts styling - space saving +~~ [4.0] Atum and Cassiopea Change alerts styling - space saving + Aug 6, 2020

brianteeman reviewed Aug 6, 2020

View reviewed changes

administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss Outdated Show resolved Hide resolved

correcting scss order

a321919

infograf768 force-pushed the 4_0_atum_alerts branch from 39d145b to a321919 Compare August 7, 2020 07:49

infograf768 added 3 commits August 7, 2020 09:50

width space

758d885

more scss order

20be08c

grrr

0d6cc9a

Same changes for installation alerts. Correct padding for Close button

99fbb6e

infograf768 added 3 commits August 8, 2020 08:55

correct scss

aac0228

morre scss ordering

1c25697

grrr

6d287fb

joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Aug 10, 2020

wilsonge merged commit 7897918 into joomla:4.0-dev Aug 11, 2020

joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Aug 11, 2020

wilsonge added this to the Joomla 4.0 milestone Aug 11, 2020

infograf768 deleted the 4_0_atum_alerts branch August 11, 2020 10:35

infograf768 mentioned this pull request Aug 15, 2020

[4.0] Alert Warning: insufficient colour contrast ratio #30375

Closed

C-Lodder mentioned this pull request Sep 5, 2020

Alert danger styling C-Lodder/joomla4-backend-template#87

Closed

sakiss pushed a commit to sakiss/joomla-cms that referenced this pull request Oct 16, 2020

[4.0] Atum and Cassiopea Change alerts styling - space saving + (joom…

578c809

…la#30294)

brianteeman mentioned this pull request Nov 14, 2021

[4.0] Atum alert styling #36031

Merged

Uh oh!

Comments

Conversation

infograf768 commented Aug 5, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of Changes

Testing Instructions

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Uh oh!

Quy commented Aug 5, 2020

Uh oh!

infograf768 commented Aug 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

infograf768 commented Aug 6, 2020

Uh oh!

SharkyKZ commented Aug 6, 2020

Uh oh!

Quy commented Aug 6, 2020

Uh oh!

infograf768 commented Aug 6, 2020

Uh oh!

SharkyKZ commented Aug 6, 2020

Uh oh!

infograf768 commented Aug 6, 2020

Uh oh!

infograf768 commented Aug 6, 2020

Uh oh!

Uh oh!

richard67 commented Aug 7, 2020

Uh oh!

infograf768 commented Aug 7, 2020

Uh oh!

infograf768 commented Aug 7, 2020

Uh oh!

infograf768 commented Aug 7, 2020

Uh oh!

chmst commented Aug 7, 2020

Uh oh!

infograf768 commented Aug 8, 2020

Uh oh!

infograf768 commented Aug 8, 2020

Uh oh!

infograf768 commented Aug 8, 2020

Uh oh!

richard67 commented Aug 8, 2020

Uh oh!

richard67 commented Aug 8, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

richard67 commented Aug 8, 2020

Uh oh!

alikon commented Aug 10, 2020

Uh oh!

alikon commented Aug 10, 2020

Uh oh!

wilsonge commented Aug 11, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

infograf768 commented Aug 5, 2020 •

edited

Loading

infograf768 commented Aug 6, 2020 •

edited

Loading

richard67 commented Aug 8, 2020 •

edited

Loading