VMadmin 4.0.22 issues..., and on to 4.1 ;)

[iWim]

Hey, hey,

I'm on VM 4.0.22 and noticed some additional design issues with the VMadmin template.
1. The page title text colour is the same as the header background colour

2. The text colour of the Go to website button/link has the same colour as the button background when you hover over it.

3. Can't scroll when VM menu is toggled on.

4. Major white space at the bottom of the screen.

5. In the product list the filter dropdown "All" is too small for it's content.


VM 4.1
Now that J3 reaches its EOL, I believe it's time to concentrate on J4+.
You could do something like Joomla did:
VM(admin)4.0 with only necessary/security fixes for those who want to stay on J3.
VM(admin)4.1 for those who wish to move on with J4+

In VM4.1 you can then easier address the issues I mentioned a couple of months ego about the buttons and form fields:
https://forum.virtuemart.net/index.php?topic=149657.msg534565#msg534565

Also I think VM should take inspiration from collegues like Phocacart.
When going to PC the J side menu is replaced by the PC one.
I think VM can do something similar. Not the mile long menu, but with the collapseble VM menus.
It would save a lot of screen space.

Regards,
Wim

[hazael]

I don't think your comment will change anything - the topic has been reported many times and each time it has been ignored.
I even once published a revised CSS code that eliminates these problems - it was also ignored.
Black text on a black background? - I think Milbo likes this satanic style 

[Milbo]

For the menu, if you use the new admin template, we have imho the "same", our menu scrolls over the joomla one.

The 1./2. the problem is the j3, which has other colors, if you find a good color for both, tell me. 4. I dont understand, is the same as in j3

[iWim]

1. .header . page-title in default-white-blue.css sets the blue color in both J3 and J4.
Remove it and it will use the default template color for page-title.

2. The hover color for the Go-to-website button comes from a:hover in uikit.min.css. It overrides the color for .header a in template.min.css
Also this link/button has no underline in Isis/Atum.

4. I don't see it anymore (in 4.2.0)...

3 & 5 still open

[hazael]

This style is not needed at all in the Virtuermart template
/administrator/templates/vmadmin/html/com_virtuemart/assets/css/default-white-blue.css

Just remove it:
--------------------------------

.header .page-title {
    color: #1a3867;
}

.header .page-title  a {
    color: #1a3867;
}

-------------------------------
Joomla 3 and 4 will insert the correct default font color by default


Generally, these styles are not optimally written - too much code. It was enough to save it shorter and the effect will be the same:

.page-title, .page-title  a { color:#1a3867}

or can be shorter

.container-title * { color:#1a3867}

[Milbo]

3. Can't scroll when VM menu is toggled on.

Hmm, no clue how to change that. I also noticed that yesterday. it would be the perfecdt standard menu,...has someone a hint? I did not write it.

[hazael]

3. Can't scroll when VM menu is toggled on.

/administrator/templates/vmadmin/html/com_virtuemart/sublayouts/startadmin.php

uk-offcanvas="overlay: true"

change to

uk-offcanvas="overlay: false"

/administrator/templates/vmadmin/html/com_virtuemart/assets/uikit/css/uikit.min.css

.uk-offcanvas{display:none;position:fixed;top:0;bottom:0;left:0;z-index:1000}

change to

.uk-offcanvas{display:none;position:fixed;top:0;bottom:0;left:0;z-index:9999}

This Uikit is very nice and easy to use - better than Bootsrap in my opinion.
Unfortunately the Uikit library in this template is quite old 3.6.13 (January 20, 2021). Worth upgrading to 3.16.24 (August 1, 2023)

-------------------------------------------------------------------------------------------------
This menu button is barely visible, the user gets lost in this panel. The menu button should be eye-catching.
Personally, I don't understand this philosophy of 2 buttons next to each other for the same menu. I would remove the first one in
/administrator/templates/vmadmin/html/com_virtuemart/sublayouts/startadmin.php

Code Select Expand

<div class="uk-flex uk-flex-column">
<a href="#"
class="uk-icon-button uk-margin-small-bottom vmuikit-js-menu-offcanvas-toggle uk-visible@m"
uk-tooltip="<?php echo vmText::_('COM_VM_SHOW_MENU') ?>">
<span class="uk-icon-button" uk-icon="arrow-right"></span>
</a>
<button class="uk-button uk-button-small uk-button-default uk-padding-remove "
uk-toggle="target: #vmuikit-menu-offcanvas-toggle"
uk-tooltip="<?php echo vmText::_('COM_VM_TOGGLE_MENU') ?>"
>
<span uk-icon="menu"></span><span
class="uk-margin-small-left uk-hidden@m"><?php echo vmText::_('COM_VM_VIEW_VM_MENU') ?></span>

</button>

</div>
change to

Code Select Expand

<button class="uk-border-rounded uk-button uk-button-small uk-padding-xsmall uk-button-danger uk-width-expand" uk-toggle="target: #vmuikit-menu-offcanvas-toggle" uk-tooltip="<?php echo vmText::_('COM_VM_TOGGLE_MENU') ?>">
<span class="uk-visible@m" uk-icon="arrow-right"></span>
<span class="uk-hidden@m" uk-icon="menu"></span>
<span class="uk-hidden@m"><?php echo vmText::_('COM_VM_VIEW_VM_MENU') ?></span>
</button>

[Milbo]

Great work Hazael, I am going to test this tomorrow. Looks good. Yes I understand your comments. We wanted to work it out, get a feeling for it, before we decide. So the overlay canvas did the race.

Code Select Expand


uk-offcanvas="overlay: false"

and will still do an overlay? I just wonder, I am css noob, you must know. My area is the machine itself, php, sql, js and so on.

[hazael]

Code Select Expand


uk-offcanvas="overlay: false"

and will still do an overlay? I just wonder, I am css noob, you must know. My area is the machine itself, php, sql, js and so on.

Yes, and here you also need to change the z-index (layer) value to maximum high so that the menu is on the top layer:
/administrator/templates/vmadmin/html/com_virtuemart/assets/uikit/css/uikit.min.css
.uk-offcanvas{display:none;position:fixed;top:0;bottom:0;left:0;z-index:9999}

---------------------------
There is no shame in not knowing CSS - Certainly no one can beat you in knowing PHP 
In fact, I started to understand PHP thanks to your Virtuemart - I learn from bugs [LOL]. But there's no shame in making mistakes either. Only those who do nothing don't make mistakes 
For me, VirtueMart will always be number 1 - even if it frustrates me a bit.