mobile: first mobile fixes for Files. We still need to hide Rename and Versions

2 files changed, 45 insertions, 0 deletions

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;
+}
+
+
+}
diff --git a/apps/files/index.php b/apps/files/index.php
index ad7a2e210ed..a856a56136a 100644
--- a/apps/files/index.php
+++ b/apps/files/index.php
@@ -27,6 +27,7 @@ OCP\User::checkLoggedIn();
 // Load the files we need
 OCP\Util::addStyle('files', 'files');
 OCP\Util::addStyle('files', 'upload');
+OCP\Util::addStyle('files', 'mobile');
 OCP\Util::addscript('files', 'file-upload');
 OCP\Util::addscript('files', 'jquery.iframe-transport');
 OCP\Util::addscript('files', 'jquery.fileupload');