Make WordPress Core

Changeset 33072


Ignore:
Timestamp:
07/03/2015 08:46:54 PM (10 years ago)
Author:
boonebgorges
Message:

Improve the display of my-sites.php on small screens.

Props tryon.
Fixes #31685.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r33067 r33072  
    648648
    649649.striped > tbody > :nth-child(odd),
     650ul.striped > :nth-child(odd),
    650651.alternate {
    651652    background-color: #f9f9f9;
     
    30403041}
    30413042
     3043/* My Sites */
     3044.my-sites {
     3045    display: block;
     3046    overflow: auto;
     3047    zoom: 1;
     3048    border: 1px solid #e5e5e5;
     3049}
     3050
     3051.my-sites li {
     3052    display: block;
     3053    padding: 8px 1%;
     3054    margin: 0;
     3055}
     3056
     3057@media only screen and (min-width: 600px) {
     3058    .my-sites.striped li {
     3059        background-color: #fff;
     3060        position: relative;
     3061    }
     3062    .my-sites.striped li:after {
     3063        content: "";
     3064        width: 1px;
     3065        height: 100%;
     3066        position: absolute;
     3067        top: 0;
     3068        right: 0;
     3069        background: #ccc;
     3070    }
     3071
     3072}
     3073@media only screen and (min-width: 600px) and (max-width: 699px) {
     3074    .my-sites li{
     3075        float: left;
     3076        width: 48%;
     3077    }
     3078    .my-sites.striped li {
     3079        background-color: #fff;
     3080    }
     3081    .my-sites.striped li:nth-of-type(2n+2):after {
     3082        content: none;
     3083    }
     3084    .my-sites li:nth-of-type(4n+1),
     3085    .my-sites li:nth-of-type(4n+2) {
     3086        background-color: #f9f9f9;
     3087    }
     3088
     3089}
     3090
     3091@media only screen and (min-width: 700px) and (max-width: 1199px) {
     3092    .my-sites li {
     3093        float: left;
     3094        width: 31.333333%;
     3095        background-color: #fff;
     3096    }
     3097    .my-sites.striped li:nth-of-type(3n+3):after {
     3098        content: none;
     3099    }
     3100    .my-sites li:nth-of-type(6n+1),
     3101    .my-sites li:nth-of-type(6n+2),
     3102    .my-sites li:nth-of-type(6n+3) {
     3103        background-color: #f9f9f9;
     3104    }
     3105}
     3106
     3107@media only screen and (min-width: 1200px) and (max-width: 1399px) {
     3108    .my-sites li {
     3109        float: left;
     3110        width: 23%;
     3111        background-color: #fff;
     3112    }
     3113    .my-sites.striped li:nth-of-type(4n+4):after {
     3114        content: none;
     3115    }
     3116    .my-sites li:nth-of-type(8n+1),
     3117    .my-sites li:nth-of-type(8n+2),
     3118    .my-sites li:nth-of-type(8n+3),
     3119    .my-sites li:nth-of-type(8n+4) {
     3120        background-color: #f9f9f9;
     3121    }
     3122}
     3123
     3124@media only screen and (min-width: 1400px) and (max-width: 1599px) {
     3125    .my-sites li {
     3126        float: left;
     3127        width: 18%;
     3128        background-color: #fff;
     3129    }
     3130    .my-sites.striped li:nth-of-type(5n+5):after {
     3131        content: none;
     3132    }
     3133    .my-sites li:nth-of-type(10n+1),
     3134    .my-sites li:nth-of-type(10n+2),
     3135    .my-sites li:nth-of-type(10n+3),
     3136    .my-sites li:nth-of-type(10n+4),
     3137    .my-sites li:nth-of-type(10n+5) {
     3138        background-color: #f9f9f9;
     3139    }
     3140}
     3141
     3142@media only screen and (min-width: 1600px) {
     3143    .my-sites li {
     3144        float: left;
     3145        width: 14.666666%;
     3146        background-color: #fff;
     3147    }
     3148    .my-sites.striped li:nth-of-type(6n+6):after {
     3149        content: none;
     3150    }
     3151    .my-sites li:nth-of-type(12n+1),
     3152    .my-sites li:nth-of-type(12n+2),
     3153    .my-sites li:nth-of-type(12n+3),
     3154    .my-sites li:nth-of-type(12n+4),
     3155    .my-sites li:nth-of-type(12n+5),
     3156    .my-sites li:nth-of-type(12n+6) {
     3157        background-color: #f9f9f9;
     3158    }
     3159}
     3160
     3161.my-sites li a {
     3162    text-decoration: none;
     3163}
     3164
    30423165/* =Media Queries
    30433166-------------------------------------------------------------- */
  • trunk/src/wp-admin/my-sites.php

    r32974 r33072  
    6969    choose_primary_blog();
    7070    /**
    71      * Fires before the sites table on the My Sites screen.
     71     * Fires before the sites list on the My Sites screen.
    7272     *
    7373     * @since 3.0.0
     
    7676    ?>
    7777    <br clear="all" />
    78     <table class="widefat fixed striped">
     78    <ul class="my-sites striped">
    7979    <?php
    8080    /**
     
    9292    $settings_html = apply_filters( 'myblogs_options', '', 'global' );
    9393    if ( $settings_html != '' ) {
    94         echo '<tr><td><h3>' . __( 'Global Settings' ) . '</h3></td><td>';
     94        echo '<h3>' . __( 'Global Settings' ) . '</h3>';
    9595        echo $settings_html;
    96         echo '</td></tr>';
    9796    }
    9897    reset( $blogs );
    99     $num = count( $blogs );
    100     $cols = 1;
    101     if ( $num >= 20 )
    102         $cols = 4;
    103     elseif ( $num >= 10 )
    104         $cols = 2;
    105     $num_rows = ceil( $num / $cols );
    106     $split = 0;
    107     for ( $i = 1; $i <= $num_rows; $i++ ) {
    108         $rows[] = array_slice( $blogs, $split, $cols );
    109         $split = $split + $cols;
    110     }
    11198
    112     foreach ( $rows as $row ) {
    113         echo "<tr>";
    114         $i = 0;
    115         foreach ( $row as $user_blog ) {
    116             $s = $i == 3 ? '' : 'border-right: 1px solid #ccc;';
    117             echo "<td style='$s'>";
    118             echo "<h3>{$user_blog->blogname}</h3>";
    119             /**
    120              * Filter the row links displayed for each site on the My Sites screen.
    121              *
    122              * @since MU
    123              *
    124              * @param string $string    The HTML site link markup.
    125              * @param object $user_blog An object containing the site data.
    126              */
    127             echo "<p>" . apply_filters( 'myblogs_blog_actions', "<a href='" . esc_url( get_home_url( $user_blog->userblog_id ) ). "'>" . __( 'Visit' ) . "</a> | <a href='" . esc_url( get_admin_url( $user_blog->userblog_id ) ) . "'>" . __( 'Dashboard' ) . "</a>", $user_blog ) . "</p>";
    128             /** This filter is documented in wp-admin/my-sites.php */
    129             echo apply_filters( 'myblogs_options', '', $user_blog );
    130             echo "</td>";
    131             $i++;
    132         }
    133         echo "</tr>";
     99    foreach ( $blogs as $user_blog ) {
     100        echo "<li>";
     101        echo "<h3>{$user_blog->blogname}</h3>";
     102        /**
     103         * Filter the row links displayed for each site on the My Sites screen.
     104         *
     105         * @since MU
     106         *
     107         * @param string $string    The HTML site link markup.
     108         * @param object $user_blog An object containing the site data.
     109         */
     110        echo "<p class='my-sites-actions'>" . apply_filters( 'myblogs_blog_actions', "<a href='" . esc_url( get_home_url( $user_blog->userblog_id ) ). "'>" . __( 'Visit' ) . "</a> | <a href='" . esc_url( get_admin_url( $user_blog->userblog_id ) ) . "'>" . __( 'Dashboard' ) . "</a>", $user_blog ) . "</p>";
     111        /** This filter is documented in wp-admin/my-sites.php */
     112        echo apply_filters( 'myblogs_options', '', $user_blog );
     113        echo "</li>";
    134114    }?>
    135     </table>
     115    </ul>
    136116    <input type="hidden" name="action" value="updateblogsettings" />
    137117    <?php wp_nonce_field( 'update-my-sites' ); ?>
Note: See TracChangeset for help on using the changeset viewer.