Changeset 4540

Timestamp:

12/15/2016 07:54:20 AM (8 years ago)

Author:

dd32

Message:

Login: Disable flexbox alignments for the registration pages and login on smaller screens, as it cuts off the top of the content.

See #148

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login

Files:

• functions.php (modified) (2 diffs)
• stylesheets/login.css (modified) (4 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/functions.php

@@ -53 +53 @@
  */
 function wporg_login_replace_css() {
-    wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons' ), '20161215c' );
+    wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons' ), '20161215d' );
 }
 add_action( 'login_init', 'wporg_login_replace_css' );
@@ -69 +69 @@
 
     wp_enqueue_style( 'wporg-normalize', get_template_directory_uri() . '/stylesheets/normalize.css', 3 );
-    wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons' ), '20161215c' );
+    wp_enqueue_style( 'wporg-login', get_template_directory_uri() . '/stylesheets/login.css', array( 'login', 'dashicons' ), '20161215d' );
 }
 add_action( 'wp_enqueue_scripts', 'wporg_login_scripts' );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/stylesheets/login.css

@@ -11 +11 @@
     -webkit-align-items:center;
     align-items:center;
+}
+
+/* Don't use Flex alignments for the registration pages, doesn't play nice with content that exceeds the window height  */
+body.route-register,
+body.route-register-profile,
+body.route-register-confirm {
+    display: block;
+    margin-top: 100px;
 }
 
@@ -305 +313 @@
 }
 
-
-body.route-register,
-body.route-register-profile,
-body.route-register-confirm {
-    padding-top: 105px;
-    height: auto;
-}
-
 body.route-register input.input,
 body.route-register-profile input.input,
@@ -384 +384 @@
 }
 
+/* Clearfix for the forms, allows for non-flex-mode #login div to stretch over the submit button */
+form:before,
+form:after {
+    content: "";
+    display: table;
+    border-collapse: collapse;
+}
+form:after {
+    clear: both;
+}
+form {
+    min-height: 0; /* clearfix IE7 support */
+}
+
 @media (max-width:375px) {
     body, html { 
@@ -417 +431 @@
     }
 }
+
+/* Disable flex display on smaller screens, as it cuts off the centered content */
+@media (max-height: 550px) {
+    body.login {
+        display: block;
+        margin-top: 100px;
+    }
+}