Joomla-cms: Atum admin template element sizes

Created on 2 Jun 2020  路  14Comments  路  Source: joomla/joomla-cms

I just checked j!4 Beta now.
The Atum admin template apparently seems created for people with 65" screens.
On an average office monitor 22" 1920x1080 it becomes terrible. Everything and for sure a lot of form elements drop off the bottom of the screen.

I need it to scale down to 67% to create some acceptable admin back end.
Can it be made more fit to the average screen?

J4 Backend Template No Code Attached Yet

Most helpful comment

When I work in Joomla 4 control panel - I feel like this
1455533848_tony-fishers-largest-rubiks-cube-in-the-world-01

All 14 comments

Please can you post some screenshots. I am working on exactly the same resolution screen and dont see what you are saying

yes of course.
This is articles:new
image
this is menu edit
image

Every element size is bigger than any website average. But investigating I see it is coming from the "rem" unit.
Which makes it relative to a "browser base font size" unless a size is set for HTML.

Now when I check computed styling on form labels it says font-size is 16px.
In 3.9 admin template isis this is 13px.
13px is mostly the base font-size
Adding that to HTML element in Atum already makes it more relaxing to the eye and also reduces scrolling mileage.
But the input elements around it could be a little smaller too.

Current Atum is realy "screaming" into the eye. At least my eyes.
As there may be people that like it at "yelling" size, it may become a configurable setting?

Also the way the configuration pages are layed out, is causing a lot of mileage on scrolling.
ie. Article options has a wide variety of settings in 5 blocks. Each block 3 columns.
This is causing a lot of scrolling up and down. Everything becomes too big.
image

Also in 3.9 you need to scroll down, but at least it is in one column. Creating better overview also.
image

not to mention the "new module" tiles
image
There is no search and it becomes harder and harder in due time (more installed modules) to have a proper overview on what is available.

I can see the advantage when working on a tablet (touch) but working on desktop/laptop it is not convenient to the eyes and scrolling finger..

Also choice between list and grid could be an option?

When I work in Joomla 4 control panel - I feel like this
1455533848_tony-fishers-largest-rubiks-cube-in-the-world-01

@pieter-groeneweg I have opened issue #29411 with a proposed solution for the rem issue. I'd appreciate your feedback there since the solution seems to be a bit more nuanced than just setting a base font size 馃槥

Regarding the modules page... yeah. My eyes glazed over first time I saw it so I hit the forward slash to initiate the browser's in-page search and typed the partial name of the module I was looking for. This got me thinking. It'd be possible to do a JavaScript powered search which limits the number of items displayed on that page. For example if I type "custom" it will filter out only the cards which contain the word "custom" in the title or description. This is do-able (I have seen my wife implement it) but we'd have to file a new issue about it. If you're interested let me know and I will at least file the issue with the proposed solution.

The design of that page was inspired by the work in the alternative proposal. They had a search box. It needs a search box. I had hoped that other people would look at the work in that alternative proposal and look to adapt the good stuff. My mistake at thinking others would do that.

@brianteeman Yeah, I have come to the conclusion that the answer to the question "If not me, then who?" is typically "Nobody". So, which one of us should open an issue about it? 馃槃

@nikosdion I am burnt out. Spending 4-5 hours almost evryday working with the bereaved during covid19 takes it out of you.

Oh! I'm so sorry! Please do take a break. I will make a comment on the other issue but you don't need to respond to it. I will file a new issue about the search in the modules page.

Thanks @nikosdion, I will check your new created issue and see where I can add my two, three, four cents to it.

@nikosdion

Regarding the modules page... yeah. My eyes glazed over first time I saw it so I hit the forward slash to initiate the browser's in-page search and typed the partial name of the module I was looking for. This got me thinking. It'd be possible to do a JavaScript powered search which limits the number of items displayed on that page. For example if I type "custom" it will filter out only the cards which contain the word "custom" in the title or description. This is do-able (I have seen my wife implement it) but we'd have to file a new issue about it. If you're interested let me know and I will at least file the issue with the proposed solution.

Please do. I have opposed to this new display but was not listened to because it is "nice looking"...

Feature proposal for the Modules page: #29415

Fix-it proposal for the font size issue: #29411

Thank you in advance for your comments.

@nikosdion
As my feedback is more than just the modules I will put it here.

Basic neurobiology for interface design

That is exactly what it is. Though I would refer to it as common human behaviour and intuition.

The modules page sort of looks like a shopping page.
But I am not shopping. I am selecting an already available module.

Let's me explain what we as humans are used to.

When we look for a book we don't have yet, we go to a book store.
The book store presents all nice and currently new and popular books with the front cover exposed. Nice looking images, book titles in big fonts and luring images to attract our attention.
(this is what we find in 3.9 web app install feature, and that is ok as we expect a "shop")

When we look for a book we already own, we go to our book shelves.
Our book shelves show all our owned books with the spines of the books facing us.
In a way this is just a 90 degrees twisted list of the books we have.
And we may have sorted them by alphabet, writer, topic, maybe size and on.
(this is what a new modules should look like in 4 and already sort of does in 3.9. Only thing to add is the filter)

This is how our ancient brains are working at its best.
"neurobiology" it is called in science. I tend to look at human behaviour and what works best.

People read stories from left to right (or rtl in some) and scavange lists from top to bottom.
What we see also needs to fit the angle of view..
Meaning that when a font has a certain size, the length of the line should not exceed a certain width. Ideal is somewhere between 45 and 75 characters (including spaces) per line.
Device we work with also determine how we "see and search".
Working with a mouse, we tend to search from top to bottom and up again. The move of pointer and click is the triggered action.
Working with touch devices humans are not only swiping top to bottom but also left to right. The usual "click" is coming from a thick finger instead of a precise mouse pointer/click.

In the current Atum sizes are too big, elements spread as wide as possible, items shown in grid instead of list views.. It is very hard for an average human to work concentrated for more than 10 minutes.
It can do ok on tablets and such, but becomes terrible on desktop... I know the adagium in web design is mobile first. But here the desktop is forgotten.

Another modules related comment. I cannot see why modules are now positioned under "content".
I always liked the philosophy of having a site completely configured and setup. Including design and style (modules in positions included).
Authors just working content and not having to worry about style and design. (also not able to break the sites appearance).
If modules are considered content, then what are the other components?

Another modules related comment. I cannot see why modules are now positioned under "content".

Not saying I agree or disagree but this acknowledging the reality that very many people are building the sites with more modules than before and that they are no longer just "static" resources that you set up and forget.

@brianteeman true, when toggling ACL settings it looks like it is only a cosmetic change of location in the navigation. Then it is just a matter of preference and my odd minds logic.

But since modules also have menu assignments I can foresee issues when modules really become a content item.

Was this page helpful?
0 / 5 - 0 ratings