Changeset 10856

Timestamp:

06/01/2016 06:50:58 PM (10 years ago)

Author:

dcavins

Message:

Xprofile: Fix layout issues with input types in wp-admin.

Align input fields on the extended profile
pane of a user’s profile in wp-admin.

See #7080.

Props mercime, dcavins.

Location:

trunk/src/bp-members/admin/css

Files:

• admin-rtl.css (modified) (7 diffs)
• admin.css (modified) (7 diffs)

trunk/src/bp-members/admin/css/admin-rtl.css

@@ -1 @@
-/**** BP Members Profile Administration Screens ****/
+/**** BP Members Profile Administration Screens
+* TO DO: Organize and clean up stylesheet.
+****/
 
 div#profile-page.wrap form#your-profile {
@@ -142 +144 @@
         width: auto;
 }
-.field_type_radio .radio div:not(.field-visibility-settings) label {  /* force radio buttons to new lines */
+.field_type_radio .radio .input-options label,
+.field_type_checkbox .checkbox .input-options label {
+        /* force checkboxes and radio buttons to new lines */
         display: block;
 }
-.field_type_radio .radio div:not(.field-visibility-settings) {  /* make the radio buttons sit in the right side column */
+.field_type_checkbox .checkbox .input-options,
+.field_type_datebox .datebox .input-options,
+.field_type_radio .radio .input-options {
+        /* make the checkboxes, select menus, and radio buttons sit in the right side column */
         display: inline-block;
 }
@@ -168 +175 @@
 #your-profile .bp-profile-field .datebox legend,
 #your-profile .bp-profile-field .radio legend {
-        display: inline-block;
+        float:right; /* Firefox will not apply display: inline-block to legends */
         font-size: 14px;
         font-weight: 600;
@@ -177 +184 @@
 }
 
-#your-profile .bp-profile-field .radio legend {
+#your-profile .bp-profile-field .radio legend,
+#your-profile .bp-profile-field .checkbox legend {
         margin-bottom: 20px;
-        vertical-align: top;
 }
 
@@ -191 +198 @@
         #your-profile .bp-profile-field .radio legend,
         .bp-profile-field label {
+                float: none;
                 clear: right;
                 display: block;
                 margin-bottom: 12px;
-        }
-        .bp-profile-field .checkbox > label,
-        .bp-profile-field .checkbox > label + label {
-                margin-right: 50px;
         }
         .bp-profile-field .checkbox label,
@@ -211 +215 @@
         .bp-profile-field .clear-value,
         .bp-profile-field .description,
+        .bp-profile-field input[type="checkbox"],
         .bp-profile-field input[type="email"],
         .bp-profile-field input[type="number"],
@@ -232 +237 @@
 
 @media screen and (max-width: 480px) {
-        .bp-profile-field .checkbox > label,
-        .bp-profile-field .checkbox > label + label,
         .bp-profile-field .clear-value,
         .bp-profile-field .description,
+        .bp-profile-field input[type="checkbox"],
         .bp-profile-field input[type="email"],
         .bp-profile-field input[type="number"],

trunk/src/bp-members/admin/css/admin.css

@@ -1 @@
-/**** BP Members Profile Administration Screens ****/
+/**** BP Members Profile Administration Screens
+* TO DO: Organize and clean up stylesheet.
+****/
 
 div#profile-page.wrap form#your-profile {
@@ -142 +144 @@
         width: auto;
 }
-.field_type_radio .radio div:not(.field-visibility-settings) label {  /* force radio buttons to new lines */
+.field_type_radio .radio .input-options label,
+.field_type_checkbox .checkbox .input-options label {
+        /* force checkboxes and radio buttons to new lines */
         display: block;
 }
-.field_type_radio .radio div:not(.field-visibility-settings) {  /* make the radio buttons sit in the right side column */
+.field_type_checkbox .checkbox .input-options,
+.field_type_datebox .datebox .input-options,
+.field_type_radio .radio .input-options {
+        /* make the checkboxes, select menus, and radio buttons sit in the right side column */
         display: inline-block;
 }
@@ -168 +175 @@
 #your-profile .bp-profile-field .datebox legend,
 #your-profile .bp-profile-field .radio legend {
-        display: inline-block;
+        float:left; /* Firefox will not apply display: inline-block to legends */
         font-size: 14px;
         font-weight: 600;
@@ -177 +184 @@
 }
 
-#your-profile .bp-profile-field .radio legend {
+#your-profile .bp-profile-field .radio legend,
+#your-profile .bp-profile-field .checkbox legend {
         margin-bottom: 20px;
-        vertical-align: top;
 }
 
@@ -191 +198 @@
         #your-profile .bp-profile-field .radio legend,
         .bp-profile-field label {
+                float: none;
                 clear: left;
                 display: block;
                 margin-bottom: 12px;
-        }
-        .bp-profile-field .checkbox > label,
-        .bp-profile-field .checkbox > label + label {
-                margin-left: 50px;
         }
         .bp-profile-field .checkbox label,
@@ -211 +215 @@
         .bp-profile-field .clear-value,
         .bp-profile-field .description,
+        .bp-profile-field input[type="checkbox"],
         .bp-profile-field input[type="email"],
         .bp-profile-field input[type="number"],
@@ -232 +237 @@
 
 @media screen and (max-width: 480px) {
-        .bp-profile-field .checkbox > label,
-        .bp-profile-field .checkbox > label + label,
         .bp-profile-field .clear-value,
         .bp-profile-field .description,
+        .bp-profile-field input[type="checkbox"],
         .bp-profile-field input[type="email"],
         .bp-profile-field input[type="number"],