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

Use flex based layout inside the filename table cell 

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2018-04-19 16:58:43 +02:00
parent d216d7aff5
commit 7e39215142
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
2 changed files with 24 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
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,24 @@ 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 .nametext {
padding: 0; width: 0;
padding-left: 55px; flex-grow: 1;
overflow: hidden; display: flex;
text-overflow: ellipsis; padding: 0;
width: 70%; overflow: hidden;
max-width: 800px; white-space: nowrap;
height: 100%; text-overflow: ellipsis;
z-index: 10; height: 100%;
} z-index: 10;
table td.filename .uploadtext { padding-right: 20px;
position: absolute; }
left: 55px;
} .uploadtext {
/* ellipsis on file names */ position: absolute;
table td.filename .nametext .innernametext { left: 55px;
max-width: calc(100% - 100px) !important; }
} }
.hide-hidden-files #fileList tr.hidden-file, .hide-hidden-files #fileList tr.hidden-file,
@ -371,59 +373,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 +442,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;