Changeset 11014

Timestamp:

08/15/2016 10:09:43 PM (8 years ago)

Author:

mercime

Message:

Improve markup of the BuddyPress Tools screen.

Make the screen accessible:

• remove an extra fieldset
• remove table markup from fieldset
• improve legibility of long text for desktop

Fixes #7219.

Location:

trunk/src/bp-core/admin

Files:

• bp-core-admin-tools.php (modified) (1 diff)
• css/common-rtl.css (modified) (2 diffs)
• css/common.css (modified) (2 diffs)

trunk/src/bp-core/admin/bp-core-admin-tools.php

@@ -22 +22 @@
         <h1><?php esc_html_e( 'BuddyPress Tools', 'buddypress' ) ?></h1>
 
-        <p>
-            <?php esc_html_e( 'BuddyPress keeps track of various relationships between members, groups, and activity items. Occasionally these relationships become out of sync, most often after an import, update, or migration.', 'buddypress' ); ?>
-            <?php esc_html_e( 'Use the tools below to manually recalculate these relationships.', 'buddypress' ); ?>
+        <p><?php esc_html_e( 'BuddyPress keeps track of various relationships between members, groups, and activity items. Occasionally these relationships become out of sync, most often after an import, update, or migration.', 'buddypress' ); ?></p>
+        <p><?php esc_html_e( 'Use the tools below to manually recalculate these relationships.', 'buddypress' ); ?>
         </p>
         <p class="description"><?php esc_html_e( 'Some of these tools create substantial database overhead. Avoid running more than one repair job at a time.', 'buddypress' ); ?></p>
 
         <form class="settings" method="post" action="">
-            <table class="form-table">
-                <tbody>
-                    <tr valign="top">
-                        <th scope="row"><?php esc_html_e( 'Repair tools', 'buddypress' ) ?></th>
-                        <td>
-                            <fieldset>
-                                <legend class="screen-reader-text"><span><?php
-                                    /* translators: accessibility text */
-                                    esc_html_e( 'Repair', 'buddypress' );
-                                ?></span></legend>
-
-                                <?php foreach ( bp_admin_repair_list() as $item ) : ?>
-
-                                    <label for="<?php echo esc_attr( str_replace( '_', '-', $item[0] ) ); ?>"><input type="checkbox" class="checkbox" name="<?php echo esc_attr( $item[0] ) . '" id="' . esc_attr( str_replace( '_', '-', $item[0] ) ); ?>" value="1" /> <?php echo esc_html( $item[1] ); ?></label><br />
-
-                                <?php endforeach; ?>
-
-                            </fieldset>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-
-            <fieldset class="submit">
-                <input class="button-primary" type="submit" name="bp-tools-submit" value="<?php esc_attr_e( 'Repair Items', 'buddypress' ); ?>" />
-                <?php wp_nonce_field( 'bp-do-counts' ); ?>
+
+            <fieldset>
+                <legend><?php esc_html_e( 'Repair tools', 'buddypress' ) ?></legend>
+
+                <div class="checkbox">
+                <?php foreach ( bp_admin_repair_list() as $item ) : ?>
+                    <label for="<?php echo esc_attr( str_replace( '_', '-', $item[0] ) ); ?>"><input type="checkbox" class="checkbox" name="<?php echo esc_attr( $item[0] ) . '" id="' . esc_attr( str_replace( '_', '-', $item[0] ) ); ?>" value="1" /> <?php echo esc_html( $item[1] ); ?></label>
+                <?php endforeach; ?>
+                </div>
+
+                <p class="submit">
+                    <input class="button-primary" type="submit" name="bp-tools-submit" value="<?php esc_attr_e( 'Repair Items', 'buddypress' ); ?>" />
+                    <?php wp_nonce_field( 'bp-do-counts' ); ?>
+                </p>
+
             </fieldset>
+
         </form>
+
     </div>
+
     <?php
 }

trunk/src/bp-core/admin/css/common-rtl.css

@@ -21 +21 @@
 3.0 User's Lists
 4.0 Emails - Edit page
+5.0 Tools - BuddyPress
 ------------------------------------------------------------------------------*/
 
@@ -492 +493 @@
     text-indent: -25px;
 }
+
+/*------------------------------------------------------------------------------
+ * 5.0 Tools - BuddyPress
+ *----------------------------------------------------------------------------*/
+.tools_page_bp-tools .wrap {
+    max-width: 950px;
+}
+
+.tools_page_bp-tools p {
+    line-height: 2;
+}
+
+.tools_page_bp-tools fieldset {
+    margin: 2em 0 0;
+}
+
+.tools_page_bp-tools legend {
+    color: #23282d;
+    font-size: 1.3em;
+    font-weight: 600px;
+    margin: 1em 0;
+}
+
+.tools_page_bp-tools label {
+    clear: right;
+    display: block;
+    line-height: 1.5em;
+    margin: 0 0 1em;
+    vertical-align: middle;
+}
+
+@media screen and (max-width: 782px) {
+    .tools_page_bp-tools p {
+        line-height: 1.5;
+    }
+    .tools_page_bp-tools label {
+        margin-bottom: 1em;
+        padding-left: 25px;
+        text-indent: -33px;
+    }
+    .tools_page_bp-tools .checkbox {
+        padding: 0 30px 0 0;
+    }
+}

trunk/src/bp-core/admin/css/common.css

@@ -21 +21 @@
 3.0 User's Lists
 4.0 Emails - Edit page
+5.0 Tools - BuddyPress
 ------------------------------------------------------------------------------*/
 
@@ -492 +493 @@
     text-indent: -25px;
 }
+
+/*------------------------------------------------------------------------------
+ * 5.0 Tools - BuddyPress
+ *----------------------------------------------------------------------------*/
+.tools_page_bp-tools .wrap {
+    max-width: 950px;
+}
+
+.tools_page_bp-tools p {
+    line-height: 2;
+}
+
+.tools_page_bp-tools fieldset {
+    margin: 2em 0 0;
+}
+
+.tools_page_bp-tools legend {
+    color: #23282d;
+    font-size: 1.3em;
+    font-weight: 600px;
+    margin: 1em 0;
+}
+
+.tools_page_bp-tools label {
+    clear: left;
+    display: block;
+    line-height: 1.5em;
+    margin: 0 0 1em;
+    vertical-align: middle;
+}
+
+@media screen and (max-width: 782px) {
+    .tools_page_bp-tools p {
+        line-height: 1.5;
+    }
+    .tools_page_bp-tools label {
+        margin-bottom: 1em;
+        padding-right: 25px;
+        text-indent: -33px;
+    }
+    .tools_page_bp-tools .checkbox {
+        padding: 0 0 0 30px;
+    }
+}