Less Button Clutter en

Installations 10 Likes 3

Goal is to keep as much of the screen space for content, this is done by reducing the size of the buttons and moving search and filter around. This also hide buttons that are disabled.

This is designed to work with "Skylarks Theme" and shares its variables.
:root {
--sky-page-color-2nd: #FFFFFF; /* var(--sky-page-color-2nd) */
}

Latest version 2.0 View content

Released 2 years ago

Tweaked to work with Skylarks Theme

Plugin CSS for 2.0


/* Set vars */
:root {
--sky-page-color-2nd: #FFFFFF; /* var(--sky-page-color-2nd) */
}

@media (max-width:767px) {
/* shrink the form a little */
.datagrid-filters > form .row {
margin-bottom: -30px;
}
}

/******* FILTER *******/
.datagrid-filters {
background-color: var(--sky-page-color-2nd);
}
a.btn-default:not(.dropdown-toggle)>span,
a.btn-primary>span,
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
display: none;
}
/* hide form behind table */
.datagrid-filters > div,
.content-wrapper > .content > .box.no-border:not(.datagrid-filters) {
position: relative;
top: -61px;
}


/******* BUTTONS *******/

/* hide text*/
a.btn-primary,
a.btn-default:not(.dropdown-toggle),
.datagrid-filters>div {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
.datagrid-filters>div>i,
.header-buttons a.btn-primary>i,
a.btn-default:not(.dropdown-toggle)>i {
width: 1000px;
text-align: left;
}

.datagrid-search,
.btn-group,
.btn-group-vertical,
a.btn-default:not(.dropdown-toggle) {
position: relative;
}
.btn-group,
.btn-group-vertical {
display: inline-block;
vertical-align: middle;
}
/* shrink button size */
.datagrid-search {
display: inline-block;
right: -40px;
}

a.btn-default:not(.dropdown-toggle) {
right: 5px;
}
.datagrid-filters>div,
a.btn-default:not(.dropdown-toggle),
.header-buttons a.btn-primary {
width: 40px;
margin-left: 5px;
}
form #datagrid-filters>.box-footer {
height: 90px;
}
.content-wrapper>section.content>div.row.margin-bottom>.col-md-12 {
height: 40px;
}