summaryrefslogtreecommitdiffstats
path: root/apps
diff options
context:
space:
mode:
authorjbtbnl <jbtbnl@users.noreply.github.com>2014-06-09 13:09:18 +0200
committerjbtbnl <jbtbnl@users.noreply.github.com>2014-06-09 13:09:18 +0200
commitb2c86b7a07762b5542e9f991e36860242b108924 (patch)
tree1a6cf7f10f8c8e04fb3040ac733310a11f88efc7 /apps
parent3239d1099c88b78d57a14e032f15062277aeaee3 (diff)
parente3429b63a275a170fa2b5269d9ee0d1a298d3a0b (diff)
downloadnextcloud-server-b2c86b7a07762b5542e9f991e36860242b108924.tar.gz
nextcloud-server-b2c86b7a07762b5542e9f991e36860242b108924.zip
Merge pull request #8928 from owncloud/too-long-filename-fix-v2
Ellipcises too long filenames
Diffstat (limited to 'apps')
-rw-r--r--apps/files/css/files.css53
-rw-r--r--apps/files/css/mobile.css7
-rw-r--r--apps/files/js/filelist.js4
3 files changed, 58 insertions, 6 deletions
diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 4dac2b66a59..e138261b9f2 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -121,6 +121,7 @@ span.extension {
-moz-transition: opacity 300ms;
-o-transition: opacity 300ms;
transition: opacity 300ms;
+ vertical-align: top;
}
tr:hover span.extension {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
@@ -263,6 +264,56 @@ table td.filename .nametext {
text-overflow: ellipsis;
max-width: 800px;
}
+
+table td.filename .nametext .innernametext {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ position: relative;
+ display: inline-block;
+}
+
+@media only screen and (min-width: 1366px) {
+ table td.filename .nametext .innernametext {
+ 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: 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: 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; }
@@ -383,6 +434,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/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 */
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 4229988b171..85c5d3f1bb0 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -596,7 +596,9 @@
basename = name;
extension = false;
}
- var nameSpan=$('<span></span>').addClass('nametext').text(basename);
+ var nameSpan=$('<span></span>').addClass('nametext');
+ var innernameSpan = $('<span></span>').addClass('innernametext').text(basename);
+ nameSpan.append(innernameSpan);
linkElem.append(nameSpan);
if (extension) {
nameSpan.append($('<span></span>').addClass('extension').text(extension));