Merge pull request #7724 from owncloud/mobile

[WIP] Mobile optimization for base layout and Files app

2 files changed, 85 insertions, 1 deletions

diff --git a/core/css/mobile.css b/core/css/mobile.css
index a63aa902d34..c67ac3e5ecf 100644
--- a/core/css/mobile.css
+++ b/core/css/mobile.css
@@ -1,4 +1,12 @@
-@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 {
+	background-image: url('../img/actions/caret.svg');
+	background-repeat: no-repeat;
+	background-position: right 26px;
+	padding-right: 16px !important;
+}
 
 /* compress search box on mobile, expand when focused */
 .searchbox input[type="search"] {
@@ -18,5 +26,80 @@
 	display: none;
 }
 
+/* toggle navigation */
+#content-wrapper {
+	padding-left: 0;
+}
+
+#navigation {
+	top: 45px;
+	bottom: initial;
+	width: 255px;
+	max-height: 90%;
+	margin-top: 0;
+	top: 45px;
+	background-color: rgba(36, 40, 47, .97);
+	overflow-x: initial;
+	border-bottom-right-radius: 7px;
+	border-bottom: 1px #333 solid;
+	border-right: 1px #333 solid;
+	box-shadow: 0 0 7px rgba(29,45,68,.97);
+	display: none;
+}
+#navigation, #navigation * {
+	box-sizing:border-box; -moz-box-sizing:border-box;
+}
+#navigation li {
+	display: inline-block;
+}
+#navigation a {
+	width: 80px;
+	height: 80px;
+	display: inline-block;
+	text-align: center;
+	padding: 20px 0;
+}
+#navigation a span {
+	display: inline-block;
+	font-size: 13px;
+	padding-bottom: 0;
+	padding-left: 0;
+	width: 80px;
+}
+#navigation .icon {
+	margin: 0 auto;
+	padding: 0;
+}
+#navigation li:first-child .icon {
+	padding-top: 0;
+}
+/* Apps management as sticky footer */
+#navigation .wrapper {
+	min-height: initial;
+	margin: 0;
+}
+#apps-management, #navigation .push {
+	height: initial;
+}
+
+
+
+/* shift to account for missing navigation */
+#body-user #controls,
+#body-settings #controls {
+	padding-left: 0;
+}
+
+/* don’t require a minimum width for controls bar */
+#controls {
+	min-width: initial !important;
+}
+
+/* position share dropdown */
+#dropdown {
+	margin-right: 10% !important;
+	width: 80% !important;
+}
+
 
 }
diff --git a/core/css/styles.css b/core/css/styles.css
index 89f58828cf9..2c043ab724c 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -248,6 +248,7 @@ input[type="submit"].enabled {
 	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
 	position: fixed;
+	top:45px;
 	right: 0;
 	left: 0;
 	height: 44px;