improve ellipsis of filename for different screen sizes

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 02b2c26ecf33322e733d82d4b84ebd5ec394a00e..330c5c1bc4645bd4a035295edebfa316f9515bd1 100644 (file)
--- 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;
        }
-}
 
-@media only screen and (min-width: 1000px) and (max-width: 1200px) {
-       table td.filename .nametext .innernametext {
-               max-width: 270px;
+       table tr:hover td.filename .nametext .innernametext {
+               max-width: 320px;
        }
 }
 
-@media only screen and (min-width: 900px) and (max-width: 1000px) {
+@media only screen and (min-width: 1000px) and (max-width: 1200px) {
        table td.filename .nametext .innernametext {
-               max-width: 210px;
+               max-width: 400px;
        }
-}
 
-@media only screen and (min-width: 768px) and (max-width: 900px) {
-       table td.filename .nametext span:not(.extension) {
-               max-width: 200px;
+       table tr:hover td.filename .nametext .innernametext {
+               max-width: 120px;
        }
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (min-width: 768px) and (max-width: 1000px) {
        table td.filename .nametext .innernametext {
-               max-width: 400px;
+               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 3ad7d63483869f99358a24f0c84afd611bb54354..5e7d38755369f33ca857fdebee738b98cbabae1e 100644 (file)
--- 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 */