WordPress.org
Get WordPress

Make WordPress Core

Ticket #31685: 31685.6.diff

File 31685.6.diff, 5.1 KB (added by tryon, 10 years ago)

Flexbox Based Layout & Site icons Concept Patch

  • src/wp-admin/css/common.css

     
    30383038}
    30393039
    30403040/* My Sites */
     3041.my-sites.striped > :nth-child(odd){
     3042        background: #fff;
     3043}
     3044
    30413045.my-sites {
    30423046        display: block;
    30433047        overflow: auto;
    30443048        zoom: 1;
     3049
     3050        display:-webkit-box;
     3051        display:-webkit-flex;
     3052        display:-ms-flexbox;
     3053        display:flex;
     3054        -webkit-box-orient: horizontal;
     3055        -webkit-box-direction: normal;
     3056        -webkit-flex-direction: row;
     3057            -ms-flex-direction: row;
     3058                flex-direction: row;
     3059        -webkit-flex-wrap: wrap;
     3060            -ms-flex-wrap: wrap;
     3061                flex-wrap: wrap;
     3062        -webkit-box-pack: start;
     3063        -webkit-justify-content: flex-start;
     3064            -ms-flex-pack: start;
     3065                justify-content: flex-start;
     3066        -webkit-align-content: flex-start;
     3067            -ms-flex-line-pack: start;
     3068                align-content: flex-start;
     3069        -webkit-box-align: stretch;
     3070        -webkit-align-items: stretch;
     3071            -ms-flex-align: stretch;
     3072                align-items: stretch;
     3073
    30453074}
    30463075
    30473076.my-sites li {
    … …  
    30483077        display: block;
    30493078        padding: 8px 3%;
    30503079        min-height: 130px;
    3051         margin: 0;
    3052 }
     3080        margin: 0 5px 10px 5px;
     3081        border: 1px solid #ccc;
     3082        background-color: #fff;
    30533083
    3054 @media only screen and (max-width: 599px) {
    3055         .my-sites li {
    3056                 min-height: 0;
    3057         }
    3058 }
    30593084
    3060 @media only screen and (min-width: 600px) {
    3061         .my-sites.striped li {
    3062                 background-color: #fff;
    3063                 position: relative;
    3064         }
    3065         .my-sites.striped li:after {
    3066                 content: "";
    3067                 width: 1px;
    3068                 height: 100%;
    3069                 position: absolute;
    3070                 top: 0;
    3071                 right: 0;
    3072                 background: #ccc;
    3073         }
     3085        min-height: 0;
     3086        width: 300px;
     3087        -webkit-box-flex: 1;
     3088        -webkit-flex-grow: 1;
     3089            -ms-flex-positive: 1;
     3090                flex-grow: 1;
     3091        -webkit-flex-shrink: 0;
     3092            -ms-flex-negative: 0;
     3093                flex-shrink: 0;
     3094        -webkit-flex-basis: 200px;
     3095            -ms-flex-preferred-size: 200px;
     3096                flex-basis: 200px;
    30743097
    30753098}
    3076 @media only screen and (min-width: 600px) and (max-width: 699px) {
    3077         .my-sites li{
    3078                 float: left;
    3079                 width: 44%;
    3080         }
    3081         .my-sites.striped li {
    3082                 background-color: #fff;
    3083         }
    3084         .my-sites.striped li:nth-of-type(2n+1) {
    3085                 clear: left;
    3086         }
    3087         .my-sites.striped li:nth-of-type(2n+2):after {
    3088                 content: none;
    3089         }
    3090         .my-sites li:nth-of-type(4n+1),
    3091         .my-sites li:nth-of-type(4n+2) {
    3092                 background-color: #f9f9f9;
    3093         }
    30943099
     3100.my-sites .site-icon{
     3101        max-width: 32px;
     3102        height: auto;
     3103        float: left;
     3104        margin: 0 5px 5px 0;
    30953105}
    30963106
    3097 @media only screen and (min-width: 700px) and (max-width: 1199px) {
    3098         .my-sites li {
    3099                 float: left;
    3100                 width: 27.333333%;
    3101                 background-color: #fff;
    3102         }
    3103         .my-sites.striped li:nth-of-type(3n+3):after {
    3104                 content: none;
    3105         }
    3106         .my-sites li:nth-of-type(6n+1),
    3107         .my-sites li:nth-of-type(6n+2),
    3108         .my-sites li:nth-of-type(6n+3) {
    3109                 background-color: #f9f9f9;
    3110         }
    3111 }
    31123107
    3113 @media only screen and (min-width: 1200px) and (max-width: 1399px) {
    3114         .my-sites li {
    3115                 float: left;
    3116                 width: 21%;
    3117                 padding: 8px 2%;
    3118                 background-color: #fff;
    3119         }
    3120         .my-sites.striped li:nth-of-type(4n+1) {
    3121                 clear: left;
    3122         }
    3123         .my-sites.striped li:nth-of-type(4n+4):after {
    3124                 content: none;
    3125         }
    3126         .my-sites li:nth-of-type(8n+1),
    3127         .my-sites li:nth-of-type(8n+2),
    3128         .my-sites li:nth-of-type(8n+3),
    3129         .my-sites li:nth-of-type(8n+4) {
    3130                 background-color: #f9f9f9;
    3131         }
    3132 }
    31333108
    3134 @media only screen and (min-width: 1400px) and (max-width: 1599px) {
    3135         .my-sites li {
    3136                 float: left;
    3137                 width: 16%;
    3138                 padding: 8px 2%;
    3139                 background-color: #fff;
    3140         }
    3141         .my-sites.striped li:nth-of-type(5n+1) {
    3142                 clear: left;
    3143         }
    3144         .my-sites.striped li:nth-of-type(5n+5):after {
    3145                 content: none;
    3146         }
    3147         .my-sites li:nth-of-type(10n+1),
    3148         .my-sites li:nth-of-type(10n+2),
    3149         .my-sites li:nth-of-type(10n+3),
    3150         .my-sites li:nth-of-type(10n+4),
    3151         .my-sites li:nth-of-type(10n+5) {
    3152                 background-color: #f9f9f9;
    3153         }
    3154 }
    3155 
    3156 @media only screen and (min-width: 1600px) {
    3157         .my-sites li {
    3158                 float: left;
    3159                 width: 12.666666%;
    3160                 padding: 8px 2%;
    3161                 background-color: #fff;
    3162         }
    3163         .my-sites.striped li:nth-of-type(6n+1) {
    3164                 clear: left;
    3165         }
    3166         .my-sites.striped li:nth-of-type(6n+6):after {
    3167                 content: none;
    3168         }
    3169         .my-sites li:nth-of-type(12n+1),
    3170         .my-sites li:nth-of-type(12n+2),
    3171         .my-sites li:nth-of-type(12n+3),
    3172         .my-sites li:nth-of-type(12n+4),
    3173         .my-sites li:nth-of-type(12n+5),
    3174         .my-sites li:nth-of-type(12n+6) {
    3175                 background-color: #f9f9f9;
    3176         }
    3177 }
    3178 
    31793109.my-sites li a {
    31803110        text-decoration: none;
    31813111}

  • src/wp-admin/my-sites.php

     
    9898
    9999        foreach ( $blogs as $user_blog ) {
    100100                echo "<li>";
    101                 echo "<h3>{$user_blog->blogname}</h3>";
     101
     102                $site_icon_image = "";
     103                if($site_icon = get_blog_option($user_blog->userblog_id, "site_icon")){
     104                        switch_to_blog( $user_blog->userblog_id );
     105                        $icon_attrs = array(
     106                                'class' => "site-icon",
     107                        );
     108                        $site_icon_image = wp_get_attachment_image( $site_icon, "thumbnail", false,  $icon_attrs);
     109                        restore_current_blog();
     110                }
     111                echo "<h3>$site_icon_image {$user_blog->blogname}</h3>";
    102112                /**
    103113                 * Filter the row links displayed for each site on the My Sites screen.
    104114                 *