Pagination and menu offcanvas in admin panel [J3][J4][VM4.0.7] FIX

[hazael]

Nobody wants to fix this banality...

In /administrator/components/com_virtuemart/assets/css/admin.styles.css
Just add at the end:

.pagination {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center
}
.pagination .limit {
    margin-bottom: 10px
}
.pagination li {
   color: var(--template-text-dark);
    display: inline-block;
    margin: 0 3px;
   list-style: none
}
.pagination li span {
    padding: 5px;
    --subhead-btn-accent: var(--template-bg-dark);
    background: #dee2e6cc;
    opacity: .5;
    border: 1px solid #ccc;
    display: block;
    border-radius: .25rem
}
.pagination li a {
    padding: 5px;
    --subhead-btn-accent: var(--template-bg-dark);
    background: #fff;
    border: 1px solid #ccc;
    display: block;
    border-radius: .25rem;
   cursor: pointer
}

[hazael]

Menu offcanvas in Admin Fix

In /administrator/components/com_virtuemart/assets/css/admin.styles.css
Just add at the end:

#vmuikit-menu-offcanvas-toggle {background: #333;max-width: 350px;overflow: auto}
#vmuikit-menu-offcanvas-toggle > div {position:relative}

[Darko F.]

Thank you for css.
I believe this fix will be override next update, unless you use user.css in your Joomla template.
Or developers include in vm template.

[Milbo]

Thank you for the css Hazel. Css is not my topic, I have admit. I will check and take it assumingly.

[Milbo]

I wonder if this makes problems with the other template. Currently we use both. So I need to find another file for that

[Milbo]

Please take a look on it on j3 or the old template. It changes the size. I think this is less invasive

Code Select Expand


.pagination {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center
}

.pagination li {
color: var(--template-text-dark);
display: inline-block;
margin: 0 3px;
list-style: none
}

.pagination li a {
padding: 4px 12px;
--subhead-btn-accent: var(--template-bg-dark);
background: #fff;
border: 1px solid #ccc;
display: block;
//border-radius: .25rem;
cursor: pointer
}


Can you help me to make it less invasive? So that it works better in all 4 combinations? yeh j3/old, j3/new, j4/new ...

[hazael]

Now it should work with J3 and J4 with any template.

/* ---------- offcanvas fix --------- */   

#vmuikit-menu-offcanvas-toggle {
    background: #333;
    max-width: 350px;
    overflow: auto
}
#vmuikit-menu-offcanvas-toggle > div {position:relative}

/* -------- pagination j3/j4 fix  -------- */   

.pagination {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between
}
.pagination > * {
   align-items: center;
    margin: 20px 0 0;
   flex-grow: 1
   }
.pagination .limit {
   justify-content: flex-end;
   }
.pagination .limit > * {
   max-width: 100px;
   padding-left: 5px
   }   
.pagination ul {
   flex-grow: 0
   }
.pagination li {
   color: var(--template-text-dark);
    display: inline-block;
   list-style: none
}
.layout-default .pagination li {
   margin: 3px
   }
.layout-default .pagination li span {
    padding: 5px;
    --subhead-btn-accent: var(--template-bg-dark);
    background: #dee2e6cc;
    opacity: .5;
    border: 1px solid #ccc;
    display: block;
    border-radius: .25rem
}
.layout-default .pagination li a {
    padding: 5px;
    --subhead-btn-accent: var(--template-bg-dark);
    background: #fff;
    border: 1px solid #ccc;
    display: block;
    border-radius: .25rem;
   cursor: pointer
}
@media (max-width: 959px) {
tfoot {display:contents}   
.pagination {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center
   }
}

[hazael]

This css style for <header> is not needed at all - it just breaks the template. Joomla default style is enough

in administrator/components/com_virtuemart/assets/css/admin_ui.css

in 6 line just delete this:

#header {  background: #ededed;  border-bottom: 1px solid #D3D3D3;}

In general, I don't understand this philosophy in creating a Virtuemart admin template. There I see several frameworks in one. Bootstrap from Joomla system, crossing with flat style from Uikit
and squeezed additionally three-dimensional "Chosen" plug-in from Jquery, which spoils everything in forms. This is all very suboptimal 

There are Bootstrap compatible solutions
https://haubek.github.io/chosen/

Or, if you chose Uikit, mark all forms that way and "chosen" off
https://getuikit.com/docs/form

[Milbo]

yeh, help me doing it. I got this template, they started before j4 was out.