SortableGridField icon indicating copy to clipboard operation
SortableGridField copied to clipboard

spacing and presentation enhancements of gridfield

Open sunnysideup opened this issue 6 years ago • 2 comments

Affected Version

SS4

Description

image

There seems to be too much spacing here in places where things should be tight (e.g. too much spacing between headers and rows) and perhaps also vice versa.

This is of course part of the core GridField, but it may be an idea to at least let the sortable gridfield do it a little better?

sunnysideup avatar Jul 23 '18 00:07 sunnysideup

here is what can be achieved in a few minutes with CSS (and my limited abilities):

image

sunnysideup avatar Jul 23 '18 00:07 sunnysideup

This is the CSS I added:


table.grid-field__table  .sortablerowsheading {
  padding-top: 0!important; padding-bottom: 0!important; background-color: #ddd;
  border-bottom: 1px solid #aaa;
}

table.grid-field__table th.main {
  border-bottom: 1px solid #aaa;
  background-color: #ccc;
}

OR

table.grid-field__table  .sortablerowsheading {
  padding-top: 0!important; padding-bottom: 0!important; 
  background-color: #dbe0e9;
  border-bottom: 1px solid #aaa;
}

table.grid-field__table th.main {
  border-bottom: 1px solid #bbb;
  background-color: #ced5e1;
}

sunnysideup avatar Jul 23 '18 00:07 sunnysideup