WordPress.org
Get WordPress

Making WordPress.org

Ticket #7698: 7698-readme-validator-responsive.patch

File 7698-readme-validator-responsive.patch, 2.5 KB (added by manhphucofficial, 3 months ago)

Improves the Readme Validator layout by making the input and textarea responsive and adding spacing for better usability.

  • shortcodes/class-readme-validator.php

     
    3737
    3838                ob_start();
    3939                ?>
     40        <style>
     41            .readme-validator-input,
     42            .readme-validator-textarea {
     43                width: 100%;
     44                max-width: 100%;
     45                box-sizing: border-box;
     46            }
     47
     48            .readme-validator-actions .readme-validator-input {
     49                display: block;
     50            }
     51
     52            .readme-validator-actions .wp-element-button {
     53                margin-top: 8px;
     54            }
     55        </style>
    4056                <div class="wrap">
    4157                        <?php
    4258                        if ( $readme_contents || $readme_url ) {
    … …  
    4662                        }
    4763                        ?>
    4864
    49                         <form method="get" action="">
    50                                 <p>
    51                                         <input type="text" name="readme" size="70" placeholder="https://" value="<?php echo esc_attr( $readme_url ); ?>" />
    52                                         <input type="submit" class="wp-element-button button" value="<?php esc_attr_e( 'Validate!', 'wporg-plugins' ); ?>" />
    53                                 </p>
    54                         </form>
     65            <form method="get" action="">
     66                <p class="readme-validator-actions">
     67                    <input
     68                            type="text"
     69                            name="readme"
     70                            size="70"
     71                            placeholder="https://"
     72                            value="<?php echo esc_attr( $readme_url ); ?>"
     73                            class="readme-validator-input"
     74                    />
     75                    <input
     76                            type="submit"
     77                            class="wp-element-button button"
     78                            value="<?php esc_attr_e( 'Validate!', 'wporg-plugins' ); ?>"
     79                    />
     80                </p>
     81            </form>
    5582
    5683                        <p><?php _e( '... or paste your <code>readme.txt</code> here:', 'wporg-plugins' ); ?></p>
    57                                 <textarea rows="20" cols="100" name="readme_visible" placeholder="=== Plugin Name ==="><?php echo esc_textarea( $readme_contents ); ?></textarea>
     84                                <textarea rows="20" cols="100" name="readme_visible" placeholder="=== Plugin Name ===" class="readme-validator-textarea"><?php echo esc_textarea( $readme_contents ); ?></textarea>
    5885                                <form id="readme-data" method="post" action="">
    5986                                        <input type="hidden" name="readme" value="" />
    6087                                        <textarea class="screen-reader-text" rows="20" cols="100" name="readme_contents"><?php echo esc_textarea( $readme_contents ); ?></textarea>