mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #9344 from nextcloud/stable13-9248 

[stable13] Fix ellipsis in filename column
This commit is contained in:
Roeland Jago Douma 2018-05-01 19:58:38 +02:00 committed by GitHub
parent 0d91288f49 5c6084a545
commit 6976241e4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
apps/files/css/files.scss
View File

@ -282,17 +282,19 @@ table td.fileaction {
text-align: center; text-align: center;
} }
table td.filename a.name { table td.filename a.name {
display: flex;
position:relative; /* Firefox needs to explicitly have this default set … */ position:relative; /* Firefox needs to explicitly have this default set … */
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
display: block;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
padding: 0; padding: 0;
} }
table td.filename .thumbnail-wrapper { table td.filename .thumbnail-wrapper {
position: absolute; /* we need this to make sure flex is working inside a table cell */
width: 50px; width: 0;
min-width: 50px;
max-width: 50px;
height: 50px; height: 50px;
} }
table td.filename .thumbnail-wrapper.icon-loading-small { table td.filename .thumbnail-wrapper.icon-loading-small {
@ -332,24 +334,27 @@ table td.filename .nametext, .modified, .column-last>span:first-child { float:le
} }
/* TODO fix usability bug (accidental file/folder selection) */ /* TODO fix usability bug (accidental file/folder selection) */
table td.filename .nametext { table {
position: absolute; td.filename {
padding: 0; max-width: 0;
padding-left: 55px; .nametext {
overflow: hidden; width: 0;
text-overflow: ellipsis; flex-grow: 1;
width: 70%; display: flex;
max-width: 800px; padding: 0;
height: 100%; overflow: hidden;
z-index: 10; white-space: nowrap;
} text-overflow: ellipsis;
table td.filename .uploadtext { height: 100%;
position: absolute; z-index: 10;
left: 55px; padding-right: 20px;
} }
/* ellipsis on file names */ }
table td.filename .nametext .innernametext {
max-width: calc(100% - 100px) !important; .uploadtext {
position: absolute;
left: 55px;
}
} }
.hide-hidden-files #fileList tr.hidden-file, .hide-hidden-files #fileList tr.hidden-file,
@ -371,59 +376,9 @@ table td.filename .nametext .innernametext {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: inline-block;
vertical-align: top; vertical-align: top;
} }
@media only screen and (min-width: 1500px) {
table td.filename .nametext .innernametext {
max-width: 790px;
}
.with-app-sidebar table td.filename .nametext .innernametext {
max-width: 390px;
}
}
@media only screen and (min-width: 1366px) and (max-width: 1500px) {
table td.filename .nametext .innernametext {
max-width: 660px;
}
.with-app-sidebar table td.filename .nametext .innernametext {
max-width: 290px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1366px) {
table td.filename .nametext .innernametext {
max-width: 500px;
}
.with-app-sidebar table td.filename .nametext .innernametext {
max-width: 230px;
}
}
@media only screen and (min-width: 1100px) and (max-width: 1200px) {
table td.filename .nametext .innernametext {
max-width: 400px;
}
.with-app-sidebar table td.filename .nametext .innernametext {
max-width: 230px;
}
}
@media only screen and (min-width: 1000px) and (max-width: 1100px) {
table td.filename .nametext .innernametext {
max-width: 310px;
}
.with-app-sidebar table td.filename .nametext .innernametext {
max-width: 230px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1000px) {
table td.filename .nametext .innernametext {
max-width: 240px;
}
.with-app-sidebar table td.filename .nametext .innernametext {
max-width: 230px;
}
}
/* for smaller resolutions - see mobile.css */ /* for smaller resolutions - see mobile.css */
table td.filename .uploadtext { table td.filename .uploadtext {
@ -490,8 +445,6 @@ table td.selection {
/* File actions */ /* File actions */
.fileactions { .fileactions {
position: absolute;
right: 0;
z-index: 50; z-index: 50;
} }

12
apps/files/css/mobile.scss
View File

@ -28,12 +28,7 @@ table td {
table.multiselect thead { table.multiselect thead {
padding-left: 0; padding-left: 0;
} }
/* restrict length of displayed filename to prevent overflow */
table td.filename .nametext {
width: 100%;
}
#fileList a.action.action-menu img { #fileList a.action.action-menu img {
padding-left: 0; padding-left: 0;
} }
@ -46,11 +41,6 @@ table td.filename .nametext {
display: none !important; display: none !important;
} }
/* ellipsis on file names */
table td.filename .nametext .innernametext {
max-width: calc(100% - 175px) !important;
}
/* show the delete icon in name column in lower resolutions */ /* show the delete icon in name column in lower resolutions */
table th#headerName .selectedActions .delete-selected { table th#headerName .selectedActions .delete-selected {
display: inline; display: inline;