tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-09-29 20:59:23 +02:00
Code Issues Projects Releases Wiki Activity

MINOR Shrinking GridField button column to fit, rather than hardcoding a width for it that depends on the amount and styling of buttons in the table

Browse Source
This commit is contained in:
Ingo Schommer 2012-03-27 16:11:05 +02:00
parent efc30fd39e
commit 3ef3a6df99
4 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
admin/css/ie7.css
View File

@ -20,6 +20,7 @@ html { overflow: hidden; }
.jstree li a .ui-icon { text-indent: 0px !important; }
.cms table.ss-gridfield-table tbody td { width: auto; }
.cms table.ss-gridfield-table tr th.extra span input { height: 23px; }
.ss-gridfield-button-filter.ss-ui-button { margin: -1px -5px; background: #e6e6e6 url(../images/filter-icons.png) no-repeat -40px 6px; filter: none; }

14
admin/scss/ie7.scss
View File

@ -68,10 +68,16 @@ html {
text-indent: 0px !important;
}
//fix for filter and reset icons on datagrid
.cms table.ss-gridfield-table tr th.extra span input {
height:23px;
.cms table.ss-gridfield-table {
tbody td {
// Overrule width: 100% setting to trigger "shrink fit"
// of button row, which IE7 doesn't support
width: auto;
}
tr th.extra span input {
//fix for filter and reset icons on datagrid
height:23px;
}
}
.ss-gridfield-button-filter.ss-ui-button {

5
css/GridField.css
View File

@ -12,11 +12,12 @@
.cms table.ss-gridfield-table thead { color: #1d2224; background: transparent; }
.cms table.ss-gridfield-table thead tr.filter-header .fieldgroup { max-width: 512px; }
.cms table.ss-gridfield-table tbody { background: #FFF; }
.cms table.ss-gridfield-table tbody td { width: 100%; }
.cms table.ss-gridfield-table tbody td.col-buttons { width: auto; text-align: right; white-space: nowrap; }
.cms table.ss-gridfield-table tbody td button { border: none; background: none; margin: 0 0 0 2px; padding: 0; width: auto; text-shadow: none; }
.cms table.ss-gridfield-table tbody td button.ui-state-hover { background: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.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 a.edit-link { display: inline-block; width: 16px; height: 20px; text-indent: -9999em; background: url(../images/icons/document--pencil.png) no-repeat 0 1px; }
.cms table.ss-gridfield-table tbody td.col-buttons { white-space: nowrap; }
.cms table.ss-gridfield-table tbody td a.edit-link { display: inline-block; width: 16px; height: 20px; text-indent: 9999em; background: url(../images/icons/document--pencil.png) no-repeat 0 1px; }
.cms table.ss-gridfield-table tfoot { color: #1d2224; }
.cms table.ss-gridfield-table tfoot tr td { background: #95a5ab; padding: .7em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.cms table.ss-gridfield-table tr.title { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; }

16
scss/GridField.scss
View File

@ -98,6 +98,16 @@ $gf_grid_x: 16px;
tbody {
background: #FFF;
td {
// Give browser some hints on which cols take priority:
// The last column (buttons) should always shrink to fit.
// Overwritten for IE7, which doesn't support this.
width: 100%;
&.col-buttons {
width: auto;
text-align: right;
white-space: nowrap;
}
button {
border: none;
background: none;
@ -118,13 +128,9 @@ $gf_grid_x: 16px;
display:inline-block;
width:$gf_grid_x;
height:20px; //min height to fit the edit icon
text-indent:-9999em;
text-indent:9999em;
background: url(../images/icons/document--pencil.png) no-repeat 0 1px;
}
&.col-buttons {
white-space: nowrap;
}
}
}