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;
}
table td.filename a.name {
display: flex;
position:relative; /* Firefox needs to explicitly have this default set … */
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
height: 50px;
line-height: 50px;
padding: 0;
}
table td.filename .thumbnail-wrapper {
position: absolute;
width: 50px;
/* we need this to make sure flex is working inside a table cell */
width: 0;
min-width: 50px;
max-width: 50px;
height: 50px;
}
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) */
table td.filename .nametext {
position: absolute;
padding: 0;
padding-left: 55px;
overflow: hidden;
text-overflow: ellipsis;
width: 70%;
max-width: 800px;
height: 100%;
z-index: 10;
}
table td.filename .uploadtext {
position: absolute;
left: 55px;
}
/* ellipsis on file names */
table td.filename .nametext .innernametext {
max-width: calc(100% - 100px) !important;
table {
td.filename .nametext {
width: 0;
flex-grow: 1;
display: flex;
padding: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 100%;
z-index: 10;
padding-right: 20px;
}
.uploadtext {
position: absolute;
left: 55px;
}
}
.hide-hidden-files #fileList tr.hidden-file,
@ -371,59 +373,9 @@ table td.filename .nametext .innernametext {
text-overflow: ellipsis;
overflow: hidden;
position: relative;
display: inline-block;
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 */
table td.filename .uploadtext {
@ -490,8 +442,6 @@ table td.selection {
/* File actions */
.fileactions {
position: absolute;
right: 0;
z-index: 50;
}

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

@ -28,12 +28,7 @@ table td {
table.multiselect thead {
padding-left: 0;
}
/* restrict length of displayed filename to prevent overflow */
table td.filename .nametext {
width: 100%;
}
#fileList a.action.action-menu img {
padding-left: 0;
}
@ -46,11 +41,6 @@ table td.filename .nametext {
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 */
table th#headerName .selectedActions .delete-selected {
display: inline;