Merge pull request #8140 from owncloud/login-valign

Vertically align public layout to better fit small mobile screens
11 years ago · 60efa0f1c8
parent a0f309bbd8 11300621ef
commit 60efa0f1c8
2 changed files with 28 additions and 6 deletions
--- a/core/css/mobile.css
+++ b/core/css/mobile.css
@ -1,5 +1,26 @@
@media only screen and (max-width: 768px) {

+#body-login #header {
+	padding-top: 10px;
+}
+
+#body-login .wrapper {
+	display: -webkit-box;
+	-webkit-box-orient: horizontal;
+	-webkit-box-pack: center;
+	-webkit-box-align: center;
+
+	display: -moz-box;
+	-moz-box-orient: horizontal;
+	-moz-box-pack: center;
+	-moz-box-align: center;
+
+	display: box;
+	box-orient: horizontal;
+	box-pack: center;
+	box-align: center;
+}
+
 /* show caret indicator next to logo to make clear it is tappable */
 #owncloud.menutoggle {
 	background-image: url('../img/actions/caret.svg');
--- a/core/templates/layout.guest.php
+++ b/core/templates/layout.guest.php
@ -35,14 +35,15 @@
 	<?php flush(); ?>
 	<body id="body-login">
 		<div class="wrapper"><!-- for sticky footer -->
-			<header><div id="header">
-				<div class="logo svg"></div>
-				<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
-			</div></header>
-
-			<?php print_unescaped($_['content']); ?>
+			<div class="v-align"><!-- vertically centred box -->
+				<header><div id="header">
+					<div class="logo svg"></div>
+					<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
+				</div></header>

+				<?php print_unescaped($_['content']); ?>
 			<div class="push"></div><!-- for sticky footer -->
+			</div>
 		</div>

 		<footer>