tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

Fixed GridField button alignment (regression from a9cbea34)

Browse Source 
The text-indent: 9999px was relying on text-align: right to function. Because it was left-aligned, text showed below the icon graphic.
The width of the button column was constrainted to 40px,
which first of all didn't fit the two icons properly,
but also made the big assumption that we never have more than two.
The new width: auto setting means that the column might be a bit
longer than desired, but at least it doesn't cut off icons
or wrap them into multiple lines unnecessarily.

Thanks to ARNHOE for starting this patch.
This commit is contained in:
Ingo Schommer 2012-12-06 14:50:27 +01:00
parent ab260d4913
commit 9152387c92
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/GridField.css
View File

@ -35,10 +35,10 @@
.cms table.ss-gridfield-table tbody { background: #FFF; }
.cms table.ss-gridfield-table tbody tr { cursor: pointer; }
.cms table.ss-gridfield-table tbody td { width: auto; max-width: 500px; word-wrap: break-word; }
.cms table.ss-gridfield-table tbody td.col-buttons { width: 40px; padding: 0 8px; text-align: left; }
.cms table.ss-gridfield-table tbody td.col-buttons { width: auto; padding: 0 8px; text-align: right; white-space: nowrap; }
.cms table.ss-gridfield-table tbody td.col-listChildrenLink { width: 16px; border-right: none; text-indent: -9999em; padding: 0; }
.cms table.ss-gridfield-table tbody td.col-listChildrenLink .list-children-link { background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 3px -4px; display: block; }
.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.item { color: #0073c1; }
.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.item { color: #1556b2; }
.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge { clear: both; text-transform: uppercase; display: inline-block; padding: 0px 3px; font-size: 0.75em; line-height: 1em; margin-left: 10px; margin-right: 6px; margin-top: -1px; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; border-radius: 2px / 2px; }
.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.modified { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; }
.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.addedtodraft { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; }
@ -50,7 +50,7 @@
.cms table.ss-gridfield-table tbody td button.ui-state-active { border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.cms table.ss-gridfield-table tbody td button.gridfield-button-delete { width: 20px; margin: 0; }
.cms table.ss-gridfield-table tbody td button.gridfield-button-delete span.btn-icon-decline { left: 2px; }
.cms table.ss-gridfield-table tbody td a.view-link, .cms table.ss-gridfield-table tbody td a.edit-link { display: inline-block; width: 20px; height: 20px; text-indent: 9999em; overflow: hidden; vertical-align: middle; }
.cms table.ss-gridfield-table tbody td a.view-link, .cms table.ss-gridfield-table tbody td a.edit-link { display: inline-block; width: 20px; height: 20px; text-align: left; text-indent: -9999em; overflow: hidden; vertical-align: middle; }
.cms table.ss-gridfield-table tbody td a.view-link { background: url(../admin/images/btn-icon/magnifier.png) no-repeat 0 1px; }
.cms table.ss-gridfield-table tbody td a.edit-link { background: url(../admin/images/btn-icon/document--pencil.png) no-repeat 2px 0px; }
.cms table.ss-gridfield-table tfoot { color: #323e46; }

8
scss/GridField.scss
View File

@ -164,9 +164,10 @@ $gf_grid_x: 16px;
// The last column (buttons) should always shrink to fit.
// Overwritten for IE7, which doesn't support this.
&.col-buttons {
width: 40px;
width: auto;
padding:0 $gf_grid_x/2;
text-align: left;
text-align: right;
white-space: nowrap;
}
&.col-listChildrenLink {
width:$gf_grid_x;
@ -254,7 +255,8 @@ $gf_grid_x: 16px;
display:inline-block;
width:20px;
height:20px; //min height to fit the edit icon
text-indent:9999em;
text-align: left;
text-indent:-9999em;
overflow: hidden;
vertical-align: middle;
}