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

MINOR More generic CSS styles for .cms-file-info: Apply to form.small parent, fixed related UploadField spacing issues

Browse Source
This commit is contained in:
Ingo Schommer 2012-03-01 11:57:35 +01:00
parent e086875565
commit f8201c48a3
7 changed files with 45 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
admin/css/screen.css
View File

@ -451,9 +451,6 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai
.htmleditorfield-mediaform .ss-htmleditorfield-file .overview .title { display: inline-block; vertical-align: middle; background: #fff; border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; margin-left: 16px; padding: 4px; }
.htmleditorfield-mediaform .ss-htmleditorfield-file .overview .action-delete { display: inline-block; }
.htmleditorfield-mediaform .ss-htmleditorfield-file .details { padding: 16px; }
.htmleditorfield-mediaform .cms-file-info-data { max-width: 350px; }
.htmleditorfield-mediaform .cms-file-info-data .field label { width: 104px; }
.htmleditorfield-mediaform .cms-file-info-data .field .middleColumn { margin-left: 112px; }
/** -------------------------------------------- Step labels -------------------------------------------- */
.step-label > * { display: inline-block; vertical-align: top; }
@ -469,6 +466,13 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai
.cms-file-info .cms-file-info-data .field { margin-bottom: 0; padding-bottom: 8px; border: none; box-shadow: none; }
.cms-file-info .cms-file-info-data .field label, .cms-file-info .cms-file-info-data .field span { padding: 0; }
form.small .cms-file-info-preview { width: 112px; }
form.small .cms-file-info-preview img { max-width: 112px; }
form.small .cms-file-info-data { max-width: 350px; }
form.small .cms-file-info-data .field { padding-bottom: 0; }
form.small .cms-file-info-data .field label { width: 112px; }
form.small .cms-file-info-data .field .middleColumn { margin-left: 120px; }
/** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file). The styles are usually added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree. */
.cms .jstree ul, .TreeDropdownField .treedropdownfield-panel .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; }
.cms .jstree li, .TreeDropdownField .treedropdownfield-panel .jstree li { display: block; margin: 0; padding: 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; }

42
admin/scss/_style.scss
View File

@ -1192,21 +1192,6 @@ body.cms-dialog {
padding: $grid-x*2;
}
}
.cms-file-info-data {
// Ensure it fits beside the image preview
max-width: 350px;
// Reduced label widths to fit everything in smaller space
.field {
label {
width: $grid-x*13;
}
.middleColumn {
margin-left: $grid-x*14;
}
}
}
}
@ -1283,4 +1268,31 @@ body.cms-dialog {
}
}
}
}
form.small {
.cms-file-info-preview {
width: $grid-x*14;
img {
max-width: $grid-x*14;
}
}
.cms-file-info-data {
// Ensure it fits beside the image preview
max-width: 350px;
// Reduced label widths to fit everything in smaller space
.field {
padding-bottom: 0;
label {
width: $grid-x*14;
}
.middleColumn {
margin-left: $grid-x*15;
}
}
}
}

2
css/AssetUploadField.css
View File

@ -30,7 +30,7 @@
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel { position: absolute; top: 7px; right: 7px; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { margin: 16px; width: 100%; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 19px 0 0; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; display: none; }

6
css/UploadField.css
View File

@ -28,11 +28,9 @@
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { position: absolute; top: 10px; right: 0; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { right: 20px; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; margin-top: 8px; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(201, 205, 206, 0.8); width: 100%; }
.ss-uploadfield .ss-uploadfield-addfile.borderTop { border-top: 1px solid #b3b3b3; }
body.ss-uploadfield-edit-iframe { padding: 16px 16px; }
.ss-upload .clear { clear: both; }
.ss-upload .ss-uploadfield-fromcomputer input { /* since we can't really style the file input, we use this hack to make it as big as the button and hide it */ position: absolute; top: 0; right: 0; margin: 0; border: solid #000; border-width: 0 0 100px 200px; opacity: 0; filter: alpha(opacity=0); -o-transform: translate(250px, -50px) scale(1); -moz-transform: translate(-300px, 0) scale(4); direction: ltr; cursor: pointer; }

1
forms/UploadField.php
View File

@ -755,6 +755,7 @@ class UploadField_ItemHandler extends RequestHandler {
$validator
);
$form->loadDataFrom($file);
$form->addExtraClass('small');
return $form;
}

3
scss/AssetUploadField.scss
View File

@ -160,11 +160,14 @@
height: 0;
overflow: hidden;
clear: both;
iframe {
margin: $grid-x*2;
width: 100%;
}
}
}
.ss-uploadfield-addfile {
.ss-uploadfield-item-info {

9
scss/UploadField.scss
View File

@ -156,8 +156,11 @@
height: 0;
overflow: hidden;
clear: both;
margin-top: $grid-y;
iframe {
margin-top: $grid-y;
padding-top: $grid-y;
border-top: 1px solid $color-light-separator;
width: 100%;
}
}
@ -169,10 +172,6 @@
}
}
body.ss-uploadfield-edit-iframe {
padding: $grid-y*2 $grid-x*2;
}
.ss-upload {
.clear {
clear: both;