Changeset 10810

Timestamp:

05/25/2016 06:30:47 PM (8 years ago)

Author:

mercime

Message:

xProfiles: Improve mobile view of User > Extended Profile screen.

Add responsive goodness :)

Fixes #7081.

Location:

trunk/src/bp-members/admin/css

Files:

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

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

@@ -129 +129 @@
 }
 .bp-profile-field .description {  /* description also sits in the right side column */
-    margin: 10px 200px 10px 0;
+    margin: 10px 200px 12px 0;
     text-align: right;
 }
@@ -161 +161 @@
 }
 #normal-sortables .field-visibility-settings legend {  /* id required for css selector weight */
-    font-size: 16px;
-    margin-bottom: 10px;
+    font-size: 14px;
+    font-weight:600;
 }
 
@@ -178 +178 @@
 
 #your-profile .bp-profile-field .radio legend {
+    margin-bottom: 20px;
     vertical-align: top;
 }
@@ -184 +185 @@
     margin-top: 10px;
 }
+
+@media screen and (max-width: 782px) {
+    #your-profile .bp-profile-field .checkbox legend,
+    #your-profile .bp-profile-field .datebox legend,
+    #your-profile .bp-profile-field .radio legend,
+    .bp-profile-field label {
+        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,
+    .bp-profile-field .radio label {
+        line-height: 1.4em;
+        margin-bottom: 12px;
+        vertical-align: middle;
+    }
+    .bp-profile-field .checkbox input[type="checkbox"],
+    .bp-profile-field .radio input[type="radio"] {
+        vertical-align: top;
+    }
+    .bp-profile-field .clear-value,
+    .bp-profile-field .description,
+    .bp-profile-field input[type="email"],
+    .bp-profile-field input[type="number"],
+    .bp-profile-field input[type="radio"],
+    .bp-profile-field input[type="text"],
+    .bp-profile-field input[type="url"],
+    .bp-profile-field select:nth-of-type(1),
+    .bp-profile-field .wp-editor-wrap,
+    .field-visibility-settings-notoggle,
+    .field-visibility-settings-toggle {
+        clear: right;
+        margin-right: 50px;
+    }
+    .field-visibility-settings {
+        margin-right: 100px;
+    }
+    #your-profile .field_multiselectbox select {
+        height: auto;
+    }
+}
+
+@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="email"],
+    .bp-profile-field input[type="number"],
+    .bp-profile-field input[type="radio"],
+    .bp-profile-field input[type="text"],
+    .bp-profile-field input[type="url"],
+    .bp-profile-field select:nth-of-type(1),
+    .bp-profile-field .wp-editor-wrap,
+    .field-visibility-settings-notoggle,
+    .field-visibility-settings-toggle {
+        margin-right: 0;
+    }
+    .field-visibility-settings {
+        margin-right: 50px;
+    }
+}

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

@@ -129 +129 @@
 }
 .bp-profile-field .description {  /* description also sits in the right side column */
-    margin: 10px 0 10px 200px;
+    margin: 10px 0 12px 200px;
     text-align: left;
 }
@@ -161 +161 @@
 }
 #normal-sortables .field-visibility-settings legend {  /* id required for css selector weight */
-    font-size: 16px;
-    margin-bottom: 10px;
+    font-size: 14px;
+    font-weight:600;
 }
 
@@ -178 +178 @@
 
 #your-profile .bp-profile-field .radio legend {
+    margin-bottom: 20px;
     vertical-align: top;
 }
@@ -184 +185 @@
     margin-top: 10px;
 }
+
+@media screen and (max-width: 782px) {
+    #your-profile .bp-profile-field .checkbox legend,
+    #your-profile .bp-profile-field .datebox legend,
+    #your-profile .bp-profile-field .radio legend,
+    .bp-profile-field label {
+        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,
+    .bp-profile-field .radio label {
+        line-height: 1.4em;
+        margin-bottom: 12px;
+        vertical-align: middle;
+    }
+    .bp-profile-field .checkbox input[type="checkbox"],
+    .bp-profile-field .radio input[type="radio"] {
+        vertical-align: top;
+    }
+    .bp-profile-field .clear-value,
+    .bp-profile-field .description,
+    .bp-profile-field input[type="email"],
+    .bp-profile-field input[type="number"],
+    .bp-profile-field input[type="radio"],
+    .bp-profile-field input[type="text"],
+    .bp-profile-field input[type="url"],
+    .bp-profile-field select:nth-of-type(1),
+    .bp-profile-field .wp-editor-wrap,
+    .field-visibility-settings-notoggle,
+    .field-visibility-settings-toggle {
+        clear: left;
+        margin-left: 50px;
+    }
+    .field-visibility-settings {
+        margin-left: 100px;
+    }
+    #your-profile .field_multiselectbox select {
+        height: auto;
+    }
+}
+
+@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="email"],
+    .bp-profile-field input[type="number"],
+    .bp-profile-field input[type="radio"],
+    .bp-profile-field input[type="text"],
+    .bp-profile-field input[type="url"],
+    .bp-profile-field select:nth-of-type(1),
+    .bp-profile-field .wp-editor-wrap,
+    .field-visibility-settings-notoggle,
+    .field-visibility-settings-toggle {
+        margin-left: 0;
+    }
+    .field-visibility-settings {
+        margin-left: 50px;
+    }
+}