From e3429b63a275a170fa2b5269d9ee0d1a298d3a0b Mon Sep 17 00:00:00 2001
From: Morris Jobke <morris.jobke@gmail.com>
Date: Sun, 8 Jun 2014 17:48:53 +0200
Subject: [PATCH] improve ellipsis of filename for different screen sizes
---
apps/files/css/files.css | 34 ++++++++++++++++++++--------------
apps/files/css/mobile.css | 7 ++-----
2 files changed, 22 insertions(+), 19 deletions(-)
diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 02b2c26ecf..330c5c1bc4 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;
}
-}
-@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 3ad7d63483..5e7d387553 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 */
--
GitLab