A few quick observations on Atum

brianteeman commented 7 years ago

Apologies if these are covered elsewhere - I didn't mention things that I know are still wip like media manager

[x] Going home No clear and quick way to return to the control panel. I thought the Joomla logo top left would do that but its just for display
[x] Hamburger icon is this the best icon to use for switching between narrow and wide menus
[ ] Disabled Hamburger in an edit view - eg module edit it goes full screen - which is great but the hamburger is still present. Its disabled but there is no visual indicator that it is disabled and the cursor still changes to a pointer it just doesn't work. Should it even be displayed at all
[ ] Full screen or max-width? The bigger the screen you have the more issues you see with a full screen layout. Lines are too long for usability and some fields are crazy long and if they have buttons eg select an article they are divorced from the label.
[ ] main menu collapse. Doesn't seem right to me that when you open a submenu it stays open when you open a different submenu. Having to click to close it is an unneeded extra step. When you open one menu it should close the previous one
[ ] toggle switch not to my taste. maybe its a personal thing. maybe its just because they are very narrow and very high.
[ ] section header this is in the top right. I never look in the top right. Perhaps it could e swapped with the sitename/link that is in the centre
[x] background colour. On list pages it is #eaebec on item pages it is #fff
[x] background colour accessibility. Dyslexia (word blindness) is much greater when you have a pure white background. There should be a tint/hue
[ ] bottom menu bar. This does not go full width when you are on an edit screen. there is still a gap on the left where the side menu would have been

C-Lodder commented 7 years ago

Going home - Good point. I'll be sure to link the logo to add that in.
Hamburger icon - The designs used pretty much a similar icon, but with an arrow inside. I couldn't find anything on Fontawesome for this. 3 bars is pretty much the norm for a offcanvas/sidebar toggle. If I change it to something that's not supported by FontAwesome, I'll need to do an SVG.
Disabled Hamburger - This is something I'm not a fan of. I don't think the sidebar should be comlpetely removed, but instead collapsed.
Full screen or max-width? - You're going to have to provide some screenshots for this.
main menu collapse - I think this is due to the BS collapse integration with mod_menu. The way mod_menu is structured made it very hard for me to implement. I'm not sure if this is possible, so will have to come back to that.
toggle switch - They're a replica of the IOS ones.
section header - Sure, could change this. I may move the user dropdown (last sidebar menu item) to the top right. That will come in phase 2 of the Atum design when I get round to doing it.
background colour. - This is due to the bordered table that @ciar4n added. It's there to soften the 1px border
background colour accessibility. - @ciar4n - will let you deal with that as it's related to your bordered table PR
bottom menu bar. - This will be sorted once the sidebar fixes have been done.

Sidebar state:

Just so other are aware. I removed the small sidebar that was added in Joomnla 3.x to allow switching of the views. For example, if you go to com_content, you could quickly navigate to the Article Categories view. Since this was removed, in the new sidebar, I initially ensured that whichever dropdown item was clicked on, the dropdown would stay open once the page has loaded.

In a recent PR, this was annoyingly removed as the sidebar now auto closed on list views.

The sidebar does need fixing up a little....it's on the to-do list.

C-Lodder commented 7 years ago

PR for point 1 (https://github.com/joomla/40-backend-template/pull/167)

brianteeman commented 7 years ago

Hamburger icon. That's my point it's not really an off canvas menu. How about something that indicated expand/contract like  fa-arrows-h []

ciar4n commented 7 years ago

Full screen or max-width?

I would certainly be with you on this point. I might have some ideas on this which I will share in a PR once I have some time to kill.

C-Lodder commented 7 years ago

Ah the fields were an issue before but thought I fixed this by setting a label max-width rather than using the BS grid to determine the size

ciar4n commented 7 years ago

I think in general the entire editor area needs a max-width and probably centered. A fluid width is very wide for larger screens. At 1920x1080 the editor is 250 characters wide. For readability it is recommended not to exceed 70.

brianteeman commented 7 years ago

Its more than the editor - look at these fields that have an action on the right hand side Screenshot at 1920x1200

C-Lodder commented 7 years ago

Ah the actual inputs. Will test setting a max-width later on for these

andrepereiradasilva commented 7 years ago

sorry for the side note, but looking at that image the "select article" buttons are not corrected

When you have no selected article: You have Select/Create Buttons When you have a selected article: You have Edit/Clear Buttons

Not all buttons at the same time :wink: see joomla 3.7. behaviour

C-Lodder commented 7 years ago

@andrepereiradasilva - most likely cause I haven't merged from the 3.7 in a long time :)

andrepereiradasilva commented 7 years ago

ehhehe ok

ciar4n commented 7 years ago

Disabled Hamburger - in an edit view - eg module edit it goes full screen - which is great but the hamburger is still present. Its disabled but there is no visual indicator that it is disabled and the cursor still changes to a pointer it just doesn't work. Should it even be displayed at all

Maybe hide the header along with the sidebar...

edit2

brianteeman commented 7 years ago

Thats better than leaving it present and disabled

On 15 November 2016 at 14:30, Ciaran Walsh notifications@github.com wrote:

Disabled Hamburger

Maybe hide the header along with the sidebar...

[image: edit2] https://cloud.githubusercontent.com/assets/2803503/20309467/f79d1154-ab3f-11e6-8299-a16523df7406.gif

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/joomla/40-backend-template/issues/165#issuecomment-260655654, or mute the thread https://github.com/notifications/unsubscribe-auth/ABPH8R_igLoQ3aWt3dKvKnxnQ_-UgYEZks5q-cH-gaJpZM4KycEH .

Brian Teeman Co-founder Joomla! and OpenSourceMatters Inc. https://brian.teeman.net/ http://brian.teeman.net/

dgrammatiko commented 7 years ago

@brianteeman @ciar4n if you remove the header then the site name and the vie name are not present anymore. This would be really annoying for us that we control a few sites at the same time, just my 2p

brianteeman commented 7 years ago

oops i was concentrating so much on the hamburger (i am hungry) that i didnt spot that

On 15 November 2016 at 15:31, Dimitri Grammatikogianni < notifications@github.com> wrote:

@brianteeman https://github.com/brianteeman @ciar4n https://github.com/ciar4n if you remove the header then the site name and the vie name are not present anymore. This would be really annoying for us that we control a few sites at the same time, just my 2p

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/joomla/40-backend-template/issues/165#issuecomment-260672876, or mute the thread https://github.com/notifications/unsubscribe-auth/ABPH8a_kBjh5U3_QefozNMq2JB78VVIKks5q-dBAgaJpZM4KycEH .

Brian Teeman Co-founder Joomla! and OpenSourceMatters Inc. https://brian.teeman.net/ http://brian.teeman.net/

C-Lodder commented 7 years ago

A simple CSS display: none; on the toggle would suffice.

brianteeman commented 7 years ago

I did a quick video using the fa-arrows-h icon for comparison

C-Lodder commented 7 years ago

IMO using arrows doesn't have any meaning. A hamburger icon has a meaning. This was the icon used in the design:

1477911949

brianteeman commented 7 years ago

the problem with that icon as we found in the sidebar icon in J3 is that it doesnt work in RTL

On 16 November 2016 at 00:00, Lodder notifications@github.com wrote:

IMO using arrows doesn't have any meaning. A hamburger icon has a meaning. This was the icon used in the design:

[image: 1477911949] https://cloud.githubusercontent.com/assets/2019801/20329349/a7641106-ab8f-11e6-9680-87e9c63b4f4d.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/joomla/40-backend-template/issues/165#issuecomment-260810112, or mute the thread https://github.com/notifications/unsubscribe-auth/ABPH8eJ60-qg2K-tjZOD-89LMo8208iDks5q-keRgaJpZM4KycEH .

Brian Teeman Co-founder Joomla! and OpenSourceMatters Inc. https://brian.teeman.net/ http://brian.teeman.net/

C-Lodder commented 7 years ago

If you simply want to revert the arrow so it appears on the right hand side of the icon for RTL mode, then an SVG can made made instead.

ciar4n commented 7 years ago

Personally I would prefer the hamburger. The arrows suggests an extended side panel is available however the hamburger icon will also suggest the contents of that panel.

ciar4n commented 7 years ago

@brianteeman Regarding background colour accessibility is there a max whiteness tint you can suggest for this?

brianteeman commented 7 years ago

background colour accessibility

I will check this out today. IIRC it is anything other than pure white but I will look for confirmation and recommendations

On 16 November 2016 at 08:38, Ciaran Walsh notifications@github.com wrote:

@brianteeman https://github.com/brianteeman Regarding background colour accessibility is there a max whiteness tint you can suggest for this?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/joomla/40-backend-template/issues/165#issuecomment-260885999, or mute the thread https://github.com/notifications/unsubscribe-auth/ABPH8VCgUEzhg6cBzz_1OtBZ1pR_K4hVks5q-sEIgaJpZM4KycEH .

Brian Teeman Co-founder Joomla! and OpenSourceMatters Inc. https://brian.teeman.net/ http://brian.teeman.net/

tonypartridge commented 7 years ago

Why are we hiding the sidebar when editing an item? this is rather unusual and makes the page look incomplete.

We could of course change it to a pop-up when editing/adding? But as EasyBlog found this isn't always what people want and you would need a config option for pop-up on or off for editing.

brianteeman commented 7 years ago

@tonypartridge dont forget that this sidebar is completely disabled when editing an item

dgrammatiko commented 7 years ago

But as EasyBlog found this isn't always what people want and you would need a config option for pop-up on or off for editing

Joomla has a checkin column/value for each item. Leaving a form without save or close, means that then the item needs to checked out. So enabling the menu is not realistic and then what's the point of having something in the page that's inaccessible. It's a form, complete it and save it or cancel to get out of this view. For me this is the natural path...

tonypartridge commented 7 years ago

I agree with your logic @dgt41 it just seems weird to ditch it and show a white page... Maybe it's just me?

Also it seems the 'Sidebar' for components is gone, which lots of people rely on for quick nav.

dgrammatiko commented 7 years ago

Also it seems the 'Sidebar' for components is gone, which lots of people rely on for quick nav.

That has be addressed or we gonna break a lot of sites/extensions

brianteeman commented 7 years ago

Having looked at lots of examples I see now that the hamburger icon is the standard being used everywhere for this type of menu

brianteeman commented 7 years ago

main menu collapse. This is what I meant with one open menu collapsing when another is opened http://www.jqueryscript.net/demo/Stylish-Multi-level-Sidebar-Menu-Plugin-With-jQuery-sidebar-menu-js/# (this is only for explanation purposes not for suggesting the code)

dgrammatiko commented 7 years ago

👍 Also the code looks nice

$.sidebarMenu = function(menu) {
  var animationSpeed = 300;

  $(menu).on('click', 'li a', function(e) {
    var $this = $(this);
    var checkElement = $this.next();

    if (checkElement.is('.treeview-menu') && checkElement.is(':visible')) {
      checkElement.slideUp(animationSpeed, function() {
        checkElement.removeClass('menu-open');
      });
      checkElement.parent("li").removeClass("active");
    }

    //If the menu is not visible
    else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
      //Get the parent menu
      var parent = $this.parents('ul').first();
      //Close all open menus within the parent
      var ul = parent.find('ul:visible').slideUp(animationSpeed);
      //Remove the menu-open class from the parent
      ul.removeClass('menu-open');
      //Get the parent li
      var parent_li = $this.parent("li");

      //Open the target menu and add the menu-open class
      checkElement.slideDown(animationSpeed, function() {
        //Add the class active to the parent li
        checkElement.addClass('menu-open');
        parent.find('li.active').removeClass('active');
        parent_li.addClass('active');
      });
    }
    //if this isn't a link, prevent the page from being redirected
    if (checkElement.is('.treeview-menu')) {
      e.preventDefault();
    }
  });
}

$.sidebarMenu($('.sidebar-menu'))

brianteeman commented 7 years ago

@ciar4n

Regarding background colour accessibility is there a max whiteness tint you can suggest for this?

I couldnt see anything specific recommended - the best I could find was advice to avoid pure white for the background AND pure black for the body and a suggestion of #ebebeb and #4c4c4c;

C-Lodder commented 7 years ago

@brianteeman - would #f2f2f2 work? Not quite white but closer to it.

brianteeman commented 7 years ago

from what i can tell its all ok as long as it is not #fff with #000

brianteeman commented 7 years ago

http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users

ciar4n commented 7 years ago

Thank you. Will look in to this further. #ebebeb is a quite dark but will find something close to it suitable.

dgrammatiko commented 7 years ago

About the menu, I like this: https://colorlib.com/polygon/gentelella/index.html

dgrammatiko commented 7 years ago

About hamburger menu check: http://codepen.io/dgt41/pen/wooXPM for some ideas, I think first line 3rd is the one!

brianteeman commented 7 years ago

Unless it is an RTL site in which case it's 4th

On 17 Nov 2016 10:55 p.m., "Dimitri Grammatikogianni" < notifications@github.com> wrote:

About hamburger menu check: http://codepen.io/dgt41/pen/wooXPM for some ideas, I think first line 3rd is the one!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/joomla/40-backend-template/issues/165#issuecomment-261396236, or mute the thread https://github.com/notifications/unsubscribe-auth/ABPH8Q9DCiM2w4Wp1ogY7tQLRSuNeLTjks5q_NtHgaJpZM4KycEH .

dgrammatiko commented 7 years ago

@brianteeman correct!

dgrammatiko commented 7 years ago

or 3rd row first for both ltr and rtl..

brianteeman commented 7 years ago

To be honest after looking around - as i said before - i have changed my mind as it appears to be common to use the hamburger and if we're going to use it then i would just use the basic and common one

On 17 November 2016 at 23:28, Dimitri Grammatikogianni < notifications@github.com> wrote:

or 3rd row first for both ltr and rtl..

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/joomla/40-backend-template/issues/165#issuecomment-261402990, or mute the thread https://github.com/notifications/unsubscribe-auth/ABPH8QERoixEJ9HJtT9G210HqN-iyM6Tks5q_OMVgaJpZM4KycEH .

Brian Teeman Co-founder Joomla! and OpenSourceMatters Inc. https://brian.teeman.net/ http://brian.teeman.net/

joomla / 40-backend-template

A few quick observations on Atum #165

Sidebar state: