From 1d1f958beae930d91f4a5ad335dd0971b93a68c1 Mon Sep 17 00:00:00 2001 From: raghunayyar Date: Fri, 6 Jun 2014 17:30:18 +0530 Subject: [PATCH 1/5] Ellipcises too long filenames --- apps/files/css/files.css | 13 +++++++++++++ apps/files/js/filelist.js | 4 +++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 0392733f4ca..7a0b7a89e89 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -140,6 +140,9 @@ span.extension { -moz-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms; + position: relative; + top:-5px; + left:-2px; } tr:hover span.extension { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; @@ -281,6 +284,14 @@ table td.filename .nametext { text-overflow: ellipsis; max-width: 800px; } + +table td.filename .nametext span:not(.extension) { + max-width: 300px; + text-overflow: ellipsis; + overflow: hidden; + position: relative; + display: inline-block; +} table td.filename .uploadtext { font-weight:normal; margin-left:8px; } table td.filename form { font-size:14px; margin-left:48px; margin-right:48px; } @@ -401,6 +412,8 @@ a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; } #fileList a.action[data-action="Rename"] { padding:18px 14px !important; + position: relative; + top: -6px; } #fileList tr:hover a.action, #fileList a.action.permanent { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 4229988b171..7466e4f3769 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -596,7 +596,9 @@ basename = name; extension = false; } - var nameSpan=$('').addClass('nametext').text(basename); + var nameSpan=$('').addClass('nametext'); + var innernameSpan = $('').text(basename); + nameSpan.append(innernameSpan); linkElem.append(nameSpan); if (extension) { nameSpan.append($('').addClass('extension').text(extension)); From d71bb7dbe49d86ed6203d845aa28c530eb165ee9 Mon Sep 17 00:00:00 2001 From: raghunayyar Date: Sat, 7 Jun 2014 14:23:49 +0530 Subject: [PATCH 2/5] Adds multiple media queries for filename. --- apps/files/css/files.css | 38 +++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 7a0b7a89e89..4c57dff77f9 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -286,12 +286,48 @@ table td.filename .nametext { } table td.filename .nametext span:not(.extension) { - max-width: 300px; text-overflow: ellipsis; overflow: hidden; position: relative; display: inline-block; } + +@media only screen and (min-width: 1366px) { + table td.filename .nametext span:not(.extension) { + max-width: 650px; + } +} + +@media only screen and (min-width: 1200px) and (max-width: 1366px) { + table td.filename .nametext span:not(.extension) { + max-width: 450px; + } +} + +@media only screen and (min-width: 1000px) and (max-width: 1200px) { + table td.filename .nametext span:not(.extension) { + max-width: 270px; + } +} + +@media only screen and (min-width: 900px) and (max-width: 1000px) { + table td.filename .nametext span:not(.extension) { + max-width: 210px; + } +} + +@media only screen and (min-width: 768px) and (max-width: 900px) { + table td.filename .nametext span:not(.extension) { + max-width: 200px; + } +} + +@media only screen and (max-width: 768px) { + table td.filename .nametext span:not(.extension) { + max-width: 400px; + } +} + table td.filename .uploadtext { font-weight:normal; margin-left:8px; } table td.filename form { font-size:14px; margin-left:48px; margin-right:48px; } From 09206f8a495eec8d7452be66dee29f05e99ba8db Mon Sep 17 00:00:00 2001 From: raghunayyar Date: Sat, 7 Jun 2014 23:54:21 +0530 Subject: [PATCH 3/5] Adds class name to span element inside filename. --- apps/files/css/files.css | 12 ++++++------ apps/files/js/filelist.js | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 4c57dff77f9..e6b0f0f3835 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -285,7 +285,7 @@ table td.filename .nametext { max-width: 800px; } -table td.filename .nametext span:not(.extension) { +table td.filename .nametext .innernametext { text-overflow: ellipsis; overflow: hidden; position: relative; @@ -293,25 +293,25 @@ table td.filename .nametext span:not(.extension) { } @media only screen and (min-width: 1366px) { - table td.filename .nametext span:not(.extension) { + table td.filename .nametext .innernametext { max-width: 650px; } } @media only screen and (min-width: 1200px) and (max-width: 1366px) { - table td.filename .nametext span:not(.extension) { + table td.filename .nametext .innernametext { max-width: 450px; } } @media only screen and (min-width: 1000px) and (max-width: 1200px) { - table td.filename .nametext span:not(.extension) { + table td.filename .nametext .innernametext { max-width: 270px; } } @media only screen and (min-width: 900px) and (max-width: 1000px) { - table td.filename .nametext span:not(.extension) { + table td.filename .nametext .innernametext { max-width: 210px; } } @@ -323,7 +323,7 @@ table td.filename .nametext span:not(.extension) { } @media only screen and (max-width: 768px) { - table td.filename .nametext span:not(.extension) { + table td.filename .nametext .innernametext { max-width: 400px; } } diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 7466e4f3769..85c5d3f1bb0 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -597,7 +597,7 @@ extension = false; } var nameSpan=$('').addClass('nametext'); - var innernameSpan = $('').text(basename); + var innernameSpan = $('').addClass('innernametext').text(basename); nameSpan.append(innernameSpan); linkElem.append(nameSpan); if (extension) { From f3a605230af67cc8e22ae8e9c88a234193b2dc36 Mon Sep 17 00:00:00 2001 From: raghunayyar Date: Sun, 8 Jun 2014 15:06:01 +0530 Subject: [PATCH 4/5] @jancborchardt's commit for cross browser compatibility of extension. --- apps/files/css/files.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index e6b0f0f3835..02b2c26ecf3 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -140,9 +140,7 @@ span.extension { -moz-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms; - position: relative; - top:-5px; - left:-2px; + vertical-align: top; } tr:hover span.extension { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; From e3429b63a275a170fa2b5269d9ee0d1a298d3a0b Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Sun, 8 Jun 2014 17:48:53 +0200 Subject: [PATCH 5/5] improve ellipsis of filename for different screen sizes --- apps/files/css/files.css | 46 ++++++++++++++++++++++----------------- apps/files/css/mobile.css | 7 ++---- 2 files changed, 28 insertions(+), 25 deletions(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 02b2c26ecf3..330c5c1bc46 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -292,40 +292,46 @@ table td.filename .nametext .innernametext { @media only screen and (min-width: 1366px) { table td.filename .nametext .innernametext { - max-width: 650px; + max-width: 760px; + } + + table tr:hover td.filename .nametext .innernametext { + max-width: 480px; } } @media only screen and (min-width: 1200px) and (max-width: 1366px) { table td.filename .nametext .innernametext { - max-width: 450px; + max-width: 600px; + } + + table tr:hover td.filename .nametext .innernametext { + max-width: 320px; } } @media only screen and (min-width: 1000px) and (max-width: 1200px) { - table td.filename .nametext .innernametext { - max-width: 270px; - } -} - -@media only screen and (min-width: 900px) and (max-width: 1000px) { - table td.filename .nametext .innernametext { - max-width: 210px; - } -} - -@media only screen and (min-width: 768px) and (max-width: 900px) { - table td.filename .nametext span:not(.extension) { - max-width: 200px; - } -} - -@media only screen and (max-width: 768px) { table td.filename .nametext .innernametext { max-width: 400px; } + + table tr:hover td.filename .nametext .innernametext { + max-width: 120px; + } } +@media only screen and (min-width: 768px) and (max-width: 1000px) { + table td.filename .nametext .innernametext { + max-width: 320px; + } + + table tr:hover td.filename .nametext .innernametext { + max-width: 40px; + } +} + +/* for smaller resolutions - see mobile.css */ + table td.filename .uploadtext { font-weight:normal; margin-left:8px; } table td.filename form { font-size:14px; margin-left:48px; margin-right:48px; } diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css index 3ad7d634838..5e7d3875536 100644 --- a/apps/files/css/mobile.css +++ b/apps/files/css/mobile.css @@ -50,11 +50,8 @@ table td.filename .nametext { } /* ellipsis on file names */ -.nametext { - width: 60%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; +table td.filename .nametext .innernametext { + max-width: 75%; } /* proper notification area for multi line messages */