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

BUGFIX: #7295 Long Filenames break layout

Browse Source 
Add text overflow and a max width to filenames.
This commit is contained in:
Naomi Guyer 2012-05-10 14:09:17 +12:00 committed by Ingo Schommer
parent 68f9cde226
commit 106bd47e88
4 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/css/ie7.css
View File

@ -39,6 +39,8 @@ html { overflow: hidden; }
.field input.text, .field textarea, .field .TreeDropdownField { padding-left: 0; padding-right: 0; }
.ss-uploadfield-item-name { display: block; }
.ss-uploadfield-edit-iframe .field.treedropdown { height: 150px !important; }
.ss-uploadfield-edit-iframe .field .TreeDropdownField ul { min-height: 100px; height: auto; max-height: 150px; }

3
admin/scss/ie7.scss
View File

@ -15,6 +15,9 @@ html {
}
}
.ss-uploadfield-item-name {
display:block;
}
.ss-uploadfield-edit-iframe{
.field {

4
css/AssetUploadField.css
View File

@ -45,8 +45,8 @@ body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #ff9300; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eba547), color-stop(8%, #e89a30), color-stop(50%, #e68f19), color-stop(54%, #e68e19), color-stop(96%, #e17519), color-stop(100%, #dc6718)); background-image: -webkit-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -moz-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -o-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -ms-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 40%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; display: block; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); display: inline; float: left; max-width: 40%; font-weight: normal; padding: 0 5px 0 0; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 50%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; display: block; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); display: inline; float: left; max-width: 50%; font-weight: normal; padding: 0 5px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); color: #cc0000; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #cc7600; }

12
scss/AssetUploadField.scss
View File

@ -104,7 +104,7 @@ body.cms.ss-uploadfield-edit-iframe {
@include background-image(linear-gradient(top, #c11f1d 0%,#bf1d1b 4%,#b71b1c 8%,#b61e1d 15%,#b11d1d 27%,#ab1d1c 31%,#a51b1b 42%,#9f1b19 46%,#9f1b19 50%,#991c1a 54%,#971a18 58%,#911b1b 62%,#911b1b 65%,#7e1816 88%,#771919 92%,#731817 100%));
.ss-uploadfield-item-name{
cursor:default;
background:darken($color-button-disabled,20%); //for browsers that don't support rgba
background: darken($color-button-disabled,20%); //for browsers that don't support rgba
background: rgba(darken($color-button-disabled, 15%),0.9);
.name {
text-shadow: 0px 1px 0px rgba(#fff, 0.7);
@ -129,7 +129,7 @@ body.cms.ss-uploadfield-edit-iframe {
position: relative;
z-index: 1;
margin: 3px 0 3px 50px;
width: 40%;
width: 50%;
color:lighten($color-text, 10%);
background:$color-button-disabled; //for browsers that don't support rgba
background: rgba(#fff, 0.8);
@ -139,14 +139,18 @@ body.cms.ss-uploadfield-edit-iframe {
height: 22px;
padding: 0 5px;
text-align: left;
cursor:pointer;
cursor:pointer;
//display:table, and table-layout:fixed allows us to use percentages with text-overflow
display:table;
table-layout:fixed;
.name {
text-shadow: 0px 1px 0px rgba(#fff, 0.5);
display:inline;
float:left;
max-width:40%;
max-width:50%;
font-weight: normal;
padding: 0 5px 0 0;
@include hide-text-overflow;
}
.ss-uploadfield-item-status {
float: right;