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

Tighten "Insert Media" dialog layout

Browse Source 
Reduce space usage to fit into typical dialog dimensions without scrolling
This commit is contained in:
Ingo Schommer 2013-06-14 22:05:04 +02:00
parent 1bd31c84f2
commit ea4f8cec07
4 changed files with 35 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
admin/css/screen.css
View File

@ -649,6 +649,7 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai
.htmleditorfield-dialog .cms-content-header { padding: 0; width: 100%; height: 40px; } .htmleditorfield-dialog .cms-content-header { padding: 0; width: 100%; height: 40px; }
.htmleditorfield-dialog .cms-content-header h3 { padding: 0 8px; margin: 10px; } .htmleditorfield-dialog .cms-content-header h3 { padding: 0 8px; margin: 10px; }
.htmleditorfield-dialog .ss-insert-media, .htmleditorfield-dialog .Actions, .htmleditorfield-dialog .ss-insert-link { padding: 8px 16px; } .htmleditorfield-dialog .ss-insert-media, .htmleditorfield-dialog .Actions, .htmleditorfield-dialog .ss-insert-link { padding: 8px 16px; }
.htmleditorfield-dialog .ss-insert-media .ui-tabs-panel, .htmleditorfield-dialog .Actions .ui-tabs-panel, .htmleditorfield-dialog .ss-insert-link .ui-tabs-panel { padding: 0; }
.htmleditorfield-dialog .details .file-url { display: block; width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; } .htmleditorfield-dialog .details .file-url { display: block; width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
.htmleditorfield-dialog .details .cms-file-info .field { border: none; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .htmleditorfield-dialog .details .cms-file-info .field { border: none; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
.htmleditorfield-dialog .details .field { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } .htmleditorfield-dialog .details .field { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
@ -657,14 +658,14 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai
.htmleditorfield-linkform .step2 { margin-bottom: 16px; } .htmleditorfield-linkform .step2 { margin-bottom: 16px; }
.htmleditorfield-mediaform .ss-gridfield tbody td:first-child img { max-height: 30px; }
.htmleditorfield-mediaform .ss-uploadfield.from-web, .htmleditorfield-mediaform .ss-uploadfield.from-CMS { margin-bottom: 48px; }
.htmleditorfield-mediaform .ss-gridfield .gridfield-button-delete { display: none; } .htmleditorfield-mediaform .ss-gridfield .gridfield-button-delete { display: none; }
.htmleditorfield-mediaform .ss-gridfield table.ss-gridfield-table tbody td:first-child { padding: 0; text-align: center; }
.htmleditorfield-mediaform .ss-gridfield table.ss-gridfield-table tbody td:first-child img { max-height: 30px; }
.htmleditorfield-mediaform .ss-gridfield table.ss-gridfield-table tr td { padding: 4px; }
.htmleditorfield-mediaform .ss-uploadfield.from-web .middleColumn, .htmleditorfield-mediaform .ss-uploadfield.from-CMS .middleColumn { width: auto; background: none; border: none; margin-top: 13px; } .htmleditorfield-mediaform .ss-uploadfield.from-web .middleColumn, .htmleditorfield-mediaform .ss-uploadfield.from-CMS .middleColumn { width: auto; background: none; border: none; margin-top: 13px; }
.htmleditorfield-mediaform .ss-uploadfield.from-CMS { margin-top: 33px; } .htmleditorfield-mediaform .ss-uploadfield.from-CMS h4 { float: left; margin-top: 4px; margin-bottom: 0; }
.htmleditorfield-mediaform .ss-uploadfield.from-CMS h4 { margin-top: 3px; } .htmleditorfield-mediaform .ss-uploadfield.from-CMS .middleColumn { margin-top: 16px; margin-left: 184px; }
.htmleditorfield-mediaform .ss-uploadfield.from-CMS .middleColumn { margin-top: 0; } .htmleditorfield-mediaform .ss-uploadfield.from-CMS .field.treedropdown { border-bottom: 0; padding: 0; }
.htmleditorfield-mediaform .ss-uploadfield.from-CMS .middleColumn .TreeDropdownField { margin-top: 23px; }
.htmleditorfield-mediaform .ss-uploadfield-editandorganize { display: none; } .htmleditorfield-mediaform .ss-uploadfield-editandorganize { display: none; }
/** -------------------------------------------- Search forms (used in AssetAdmin, ModelAdmin, etc) -------------------------------------------- */ /** -------------------------------------------- Search forms (used in AssetAdmin, ModelAdmin, etc) -------------------------------------------- */

31
admin/scss/_style.scss
View File

@ -1432,6 +1432,9 @@ body.cms-dialog {
.ss-insert-media, .Actions, .ss-insert-link{ .ss-insert-media, .Actions, .ss-insert-link{
padding:$grid-y $grid-x*2 ; padding:$grid-y $grid-x*2 ;
.ui-tabs-panel {
padding: 0;
}
} }
.details{ .details{
.file-url{ .file-url{
@ -1473,19 +1476,26 @@ body.cms-dialog {
.htmleditorfield-mediaform { .htmleditorfield-mediaform {
.ss-gridfield { .ss-gridfield {
// Set thumbnail size
tbody td:first-child img {
max-height: 30px;
.gridfield-button-delete { .gridfield-button-delete {
// TODO Remove from PHP instead of hiding // TODO Remove from PHP instead of hiding
display: none; // delete action shouldn't be allowed here display: none; // delete action shouldn't be allowed here
} }
table.ss-gridfield-table {
tbody td:first-child {
padding: 0;
text-align: center;
img {
max-height: 30px; // same thumbnail size as uploadfield rows
}
}
tr td {
padding: $grid-x/2; // more compressed space
}
} }
} }
.ss-uploadfield { .ss-uploadfield {
&.from-web, &.from-CMS { &.from-web, &.from-CMS {
margin-bottom:48px;
.middleColumn { .middleColumn {
width:auto; width:auto;
background:none; background:none;
@ -1495,15 +1505,18 @@ body.cms-dialog {
} }
&.from-CMS { &.from-CMS {
margin-top:33px;
h4 { h4 {
margin-top:3px; float: left; // headline and dropdown on same line
margin-top: $grid-y/2; // bring to same baseline as dropdown
margin-bottom: 0;
} }
.middleColumn { .middleColumn {
margin-top:0; margin-top: $grid-y*2; // same as left-floated h4
.TreeDropdownField{ margin-left: $grid-x*23; // make room for headline
margin-top:23px;
} }
.field.treedropdown {
border-bottom: 0; // don't show border, dropdown and gridfield visually belong together
padding: 0;
} }
} }

3
css/UploadField.css
View File

@ -11,9 +11,6 @@
Used in side panels and action tabs Used in side panels and action tabs
*/ */
.ss-uploadfield .clear { clear: both; } .ss-uploadfield .clear { clear: both; }
.ss-insert-media .ss-uploadfield { margin-top: 20px; }
.ss-insert-media .ss-uploadfield h4 { float: left; }
.ss-insert-media .ss-uploadfield.from-CMS .nolabel.treedropdown .middleColumn { margin-left: 184px; }
.ss-uploadfield .middleColumn { width: 510px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); } .ss-uploadfield .middleColumn { width: 510px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
.ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; } .ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; } .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; }

14
scss/UploadField.scss
View File

@ -10,20 +10,6 @@
clear: both; clear: both;
} }
.ss-insert-media &{
margin-top:20px;
h4{
float:left;
}
// Stop nolabel from resetting margin on tree dropdown
&.from-CMS .nolabel.treedropdown .middleColumn{
margin-left:184px;
}
}
.middleColumn { .middleColumn {
// TODO .middleColumn styling should probably be theme specific (eg cms ui will look different than blackcandy) // TODO .middleColumn styling should probably be theme specific (eg cms ui will look different than blackcandy)
// so we should move this style into the cms and black candy files // so we should move this style into the cms and black candy files