Changeset 10856

Timestamp:

06/01/2016 06:50:58 PM (9 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"],