From ec67d7e63528069269e4469b4feeeb9b52b90680 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 14 Mar 2014 09:16:53 +0100 Subject: mobile: first mobile fixes for Files. We still need to hide Rename and Versions --- apps/files/css/mobile.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 apps/files/css/mobile.css (limited to 'apps/files/css') diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css new file mode 100644 index 00000000000..5f1c08af58b --- /dev/null +++ b/apps/files/css/mobile.css @@ -0,0 +1,44 @@ +@media only screen and (max-width: 600px) { + +/* don’t require a minimum width for files table */ +#body-user #filestable { + min-width: initial !important; +} + +/* hide size and date columns */ +table th#headerSize, +table td.filesize, +table th#headerDate, +table td.date { + display: none; +} + +/* restrict length of displayed filename to prevent overflow */ +table td.filename .nametext { + max-width: 75% !important; +} + +/* do not show Rename or Versions on mobile */ +#fileList .action-rename, +#fileList .action-versions { + display: none !important; +} + +/* always show actions on mobile, not only on hover */ +#fileList a.action { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important; + filter: alpha(opacity=20) !important; + opacity: .2 !important; + display: inline !important; +} +/* some padding for better clickability */ +#fileList a.action img { + padding: 0 6px 0 12px; +} +/* hide text of the actions on mobile */ +#fileList a.action span { + display: none; +} + + +} -- cgit v1.2.3 From 285fc5ba96eba1c9046a3c05c39ed7708c13b897 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Tue, 18 Mar 2014 11:50:08 +0100 Subject: mobile: change CSS order so rename and versions are hidden --- apps/files/css/mobile.css | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'apps/files/css') diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css index 5f1c08af58b..00c4630ea6c 100644 --- a/apps/files/css/mobile.css +++ b/apps/files/css/mobile.css @@ -18,12 +18,6 @@ table td.filename .nametext { max-width: 75% !important; } -/* do not show Rename or Versions on mobile */ -#fileList .action-rename, -#fileList .action-versions { - display: none !important; -} - /* always show actions on mobile, not only on hover */ #fileList a.action { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important; @@ -31,6 +25,11 @@ table td.filename .nametext { opacity: .2 !important; display: inline !important; } +/* do not show Rename or Versions on mobile */ +#fileList .action.action-rename, +#fileList .action.action-versions { + display: none !important; +} /* some padding for better clickability */ #fileList a.action img { padding: 0 6px 0 12px; -- cgit v1.2.3 From 40c20b2eebed45be56cf554b904fe2d7510ed448 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 21 Mar 2014 14:34:05 +0100 Subject: mobile: remove shift for multiselect bar to account for missing navigation --- apps/files/css/mobile.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'apps/files/css') diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css index 00c4630ea6c..225448e5abc 100644 --- a/apps/files/css/mobile.css +++ b/apps/files/css/mobile.css @@ -13,6 +13,11 @@ table td.date { display: none; } +/* remove shift for multiselect bar to account for missing navigation */ +table.multiselect thead { + padding-left: 0; +} + /* restrict length of displayed filename to prevent overflow */ table td.filename .nametext { max-width: 75% !important; -- cgit v1.2.3 From c6aefada71097d2baf7db36b4829e7f6b258ea95 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 21 Mar 2014 15:29:37 +0100 Subject: do not show Deleted Files on mobile, not optimized yet and button too long --- apps/files/css/mobile.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'apps/files/css') diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css index 225448e5abc..221c23e5ad5 100644 --- a/apps/files/css/mobile.css +++ b/apps/files/css/mobile.css @@ -5,6 +5,11 @@ min-width: initial !important; } +/* do not show Deleted Files on mobile, not optimized yet and button too long */ +#controls #trash { + display: none; +} + /* hide size and date columns */ table th#headerSize, table td.filesize, -- cgit v1.2.3 From f2566e649ffd944dd5dfea3ba38124fef9472ed8 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 21 Mar 2014 16:36:45 +0100 Subject: mobile: adjust break to 768, also fix min-widths --- apps/files/css/files.css | 2 +- apps/files/css/mobile.css | 2 +- core/css/mobile.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'apps/files/css') diff --git a/apps/files/css/files.css b/apps/files/css/files.css index af863aca33e..a463eb51d8f 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -77,7 +77,7 @@ } /* make sure there's enough room for the file actions */ #body-user #filestable { - min-width: 750px; + min-width: 688px; } #body-user #controls { min-width: 600px; diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css index 221c23e5ad5..087bb1f8364 100644 --- a/apps/files/css/mobile.css +++ b/apps/files/css/mobile.css @@ -1,4 +1,4 @@ -@media only screen and (max-width: 600px) { +@media only screen and (max-width: 768px) { /* don’t require a minimum width for files table */ #body-user #filestable { diff --git a/core/css/mobile.css b/core/css/mobile.css index 6665b95f27c..dbe1c55a560 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -1,4 +1,4 @@ -@media only screen and (max-width: 600px) { +@media only screen and (max-width: 768px) { /* show caret indicator next to logo to make clear it is tappable */ #owncloud.menutoggle { -- cgit v1.2.3 From 905aabf5d41b0830cc2754229c39be709479ed7b Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 21 Mar 2014 16:43:40 +0100 Subject: mobile: document min-width value --- apps/files/css/files.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'apps/files/css') diff --git a/apps/files/css/files.css b/apps/files/css/files.css index a463eb51d8f..1bac5d2b7db 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -77,10 +77,10 @@ } /* make sure there's enough room for the file actions */ #body-user #filestable { - min-width: 688px; + min-width: 688px; /* 768 (mobile break) - 80 (nav width) */ } #body-user #controls { - min-width: 600px; + min-width: 688px; /* 768 (mobile break) - 80 (nav width) */ } #filestable tbody tr { background-color:#fff; height:40px; } -- cgit v1.2.3 From e6392163a437ad5d44cba452edeaba35aeff250b Mon Sep 17 00:00:00 2001 From: Thomas Müller Date: Tue, 25 Mar 2014 23:40:40 +0100 Subject: adding ellipsis on file names --- apps/files/css/mobile.css | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'apps/files/css') diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css index 087bb1f8364..bb71d67c761 100644 --- a/apps/files/css/mobile.css +++ b/apps/files/css/mobile.css @@ -49,5 +49,12 @@ table td.filename .nametext { display: none; } +/* ellipsis on file names */ +.nametext { + width: 60%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} } -- cgit v1.2.3 From d0f84e936f3be2a4622b0b1b8be8d070c970b1cd Mon Sep 17 00:00:00 2001 From: Thomas Müller Date: Wed, 26 Mar 2014 00:04:11 +0100 Subject: adding proper notification area for multi line messages --- apps/files/css/mobile.css | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'apps/files/css') diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css index bb71d67c761..3ad7d634838 100644 --- a/apps/files/css/mobile.css +++ b/apps/files/css/mobile.css @@ -57,4 +57,12 @@ table td.filename .nametext { text-overflow: ellipsis; } +/* proper notification area for multi line messages */ +#notification-container { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} } -- cgit v1.2.3