WordPress.org
Get WordPress

Making WordPress.org

Changeset 11741


Ignore:
Timestamp:
04/03/2022 03:31:24 PM (4 years ago)
Author:
ocean90
Message:

Translate: Improve projects overview.

  • Use proper grid layout to ensure same heights of boxes.
  • Use three columns on large screens.
  • Reduce icon size and description length since these don't require to be in the focus unlike in the relevant directories.
  • Keep current filters when changing search keywords.
  • Show pagination on top and bottom.

Fixes #5945.
Fixes #6249.
See #6246.

Location:
sites/trunk/wordpress.org/public_html/wp-content/plugins
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/locale-projects.php

    r11732 r11741  
    8686        <div class="search-form">
    8787                <form>
     88                        <input type="hidden" name="filter" value="<?php echo esc_attr( $filter ?? '' ); ?>">
     89                        <input type="hidden" name="without-editors" value="<?php echo esc_attr( $without_editors ? '1' : '' ); ?>">
    8890                        <label class="screen-reader-text" for="projects-filter"><?php esc_attr_e( 'Search projects...' ); ?></label>
    89                         <input placeholder="<?php esc_attr_e( 'Search projects...' ); ?>" type="search" id="projects-filter" name="s" value="<?php if ( !empty( $search ) ) { echo esc_attr( $search ); } ?>" class="filter-search">
     91                        <input placeholder="<?php esc_attr_e( 'Search projects...' ); ?>" type="search" id="projects-filter" name="s" value="<?php echo esc_attr( $search ?? '' ); ?>" class="filter-search">
    9092                        <input type="submit" value="<?php esc_attr_e( 'Search' ); ?>" class="screen-reader-text" />
    9193                </form>
    … …  
    103105                        $filter_count++;
    104106                        ?>
    105                         <input id="filter-without-editors" type="checkbox" name="without-editors" value="1"<?php checked( isset( $_GET['without-editors'] ) ); ?>>
     107                        <input id="filter-without-editors" type="checkbox" name="without-editors" value="1"<?php checked( $without_editors ); ?>>
    106108                        <label for="filter-without-editors">Limit to projects without editors</label>
    107109                        <span class="filter-sep" aria-hidden="true">|</span>
    … …  
    144146        </form>
    145147</div>
     148
     149<?php
     150if ( isset( $pages ) && $pages['pages'] > 1 ) {
     151        echo '<div class="projects-paging">';
     152        echo gp_pagination( $pages['page'], $pages['per_page'], $pages['results'] );
     153        echo '</div>';
     154}
     155?>
     156
    146157<div id="projects" class="projects">
    147158        <?php
    … …  
    193204                                <div class="project-name">
    194205                                        <h4>
    195                                                 <?php echo gp_link_get( $project_url, $project_name ) ?>
     206                                                <?php echo gp_link_get( $project_url, wp_trim_words( $project_name, 10 ) ); ?>
    196207                                        </h4>
    197208                                </div>
    … …  
    200211                                                $description = wp_strip_all_tags( $sub_project->description );
    201212                                                $description = str_replace( array( 'WordPress.org Plugin Page', 'WordPress.org Theme Page' ), '', $description );
    202                                                 echo wp_trim_words( $description, 30 );
     213                                                echo wp_trim_words( $description, 15 );
    203214                                        ?></p>
    204215                                </div>
    … …  
    243254        ?>
    244255</div>
     256
    245257<?php
    246         if ( isset( $pages ) && $pages['pages'] > 1 ) {
    247                 echo gp_pagination( $pages['page'], $pages['per_page'], $pages['results'] );
    248         }
     258if ( isset( $pages ) && $pages['pages'] > 1 ) {
     259        echo '<div class="projects-paging">';
     260        echo gp_pagination( $pages['page'], $pages['per_page'], $pages['results'] );
     261        echo '</div>';
     262}
    249263?>
    250264

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/style.css

    r11739 r11741  
    911911.locale-header:before,
    912912.locale-header:after,
    913 .projects:before,
    914 .projects:after,
    915913.project-box-header:before,
    916914.project-box-header:after,
    … …  
    924922
    925923.locale-header:after,
    926 .projects:after,
    927924.project-box-header:after,
    928925.project-status:after,
    … …  
    10581055}
    10591056
     1057.projects-paging {
     1058        clear: both;
     1059        display: flex;
     1060        justify-content: flex-end;
     1061        margin: 1rem 0;
     1062}
     1063
    10601064.projects {
    1061         margin-left: -2.083%;
     1065        clear: both;
     1066        display: grid;
     1067        grid-gap: 1rem;
     1068        grid-template-columns: minmax( 0, 1fr );
     1069        margin: 1rem 0;
     1070}
     1071
     1072@media screen and (min-width: 799px) {
     1073        .projects {
     1074                grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
     1075        }
     1076}
     1077
     1078@media screen and (min-width: 1219px) {
     1079        .projects {
     1080                grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
     1081        }
    10621082}
    10631083
    10641084.projects .project {
    1065         float: left;
    1066         margin: 0 0 2.083% 2.083%;
    1067         width: 47.917%;
     1085        display: flex;
     1086        flex-direction: column;
     1087        justify-content: flex-end;
    10681088        border: 1px solid #72777c;
    10691089        box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
    … …  
    10711091}
    10721092
    1073 .projects .project:nth-child(odd) {
    1074         clear: both;
    1075 }
    1076 
    10771093.projects .project.percent-100 {
    10781094        border-color: #509040;
    … …  
    10811097.projects .project-top {
    10821098        position: relative;
    1083         padding: 20px 20px 10px;
    1084         min-height: 135px;
     1099        padding: 20px;
     1100        min-height: 140px;
     1101        margin-bottom: auto;
    10851102}
    10861103
    10871104.projects .project-name,
    10881105.projects .project-description {
    1089         margin-left: 148px;
     1106        margin-left: 120px;
    10901107        overflow-wrap: break-word;
    10911108}
    … …  
    11031120        margin-top: 0;
    11041121        padding: 0;
     1122        font-size: .875rem;
     1123}
     1124
     1125.projects .project-description p {
     1126        margin: 0;
    11051127}
    11061128
    … …  
    11091131        top: 20px;
    11101132        left: 20px;
    1111         width: 128px;
    1112         height: 128px;
     1133        width: 100px;
     1134        height: 100px;
    11131135        margin: 0 20px 20px 0;
    11141136}
    … …  
    11201142.projects .project-icon .default-icon,
    11211143.projects .project-icon .wordpress-icon {
    1122         width: 128px;
    1123         height: 128px;
     1144        width: 100px;
     1145        height: 100px;
    11241146        background: #dedede;
    11251147}
    11261148
    11271149.projects .project-icon .plugin-icon {
    1128         width: 128px;
    1129         height: 128px;
     1150        width: 100px;
     1151        height: 100px;
    11301152        background-size: contain;
    11311153}
    … …  
    11331155.projects .project-icon .default-icon span,
    11341156.projects .project-icon .wordpress-icon span {
    1135         height: 128px;
    1136         width: 128px;
     1157        height: 100px;
     1158        width: 100px;
    11371159        font-size: 85px;
    1138         line-height: 128px;
     1160        line-height: 100px;
    11391161        color: #a0a5aa;
    11401162}
    … …  
    11491171
    11501172.projects .project-icon .icon img {
    1151         width: 128px;
     1173        width: 100px;
    11521174        height: auto;
    11531175}
    … …  
    11601182        width: 25%;
    11611183        float: left;
    1162         margin: 20px 0;
     1184        margin: 0 0 20px;
    11631185        text-align: center;
    11641186}
    … …  
    14991521        }
    15001522
    1501         .projects {
    1502                 margin-left: 0;
    1503         }
    1504 
    1505         .projects .project {
    1506                 width: 100%;
    1507                 margin-left: 0;
    1508         }
    1509 
    15101523        .locale-intro {
    15111524                float: none;
    … …  
    16931706.sort-bar {
    16941707        float: right;
    1695         margin: -30px 0 5px 5px;
     1708        margin: -30px 0 1rem 5px;
    16961709        background-color: #e2e4e7;
    16971710        padding: 5px;

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-routes/inc/routes/class-locale.php

    r11092 r11741  
    4444                global $wpdb;
    4545
    46                 $per_page = 20;
     46                $per_page = 21;
    4747                $page = (int) gp_get( 'page', 1 );
    4848                $search = gp_get( 's', '' );
    … …  
    267267                                        case 'wordcamp':
    268268                                                return '<div class="default-icon"><span class="dashicons dashicons-tickets"></span></div>';
     269                                        case 'pattern-directory':
     270                                                return '<div class="default-icon"><span class="dashicons dashicons-art"></span></div>';
    269271                                        case 'browsehappy':
    270272                                                return '<div class="icon"><img src="' . plugins_url( 'templates/images/browsehappy.png', 'wporg-gp-customizations/wporg-gp-customizations.php' ) . '" width="' . $size . '" height="' . $size . '"></div>';
    … …  
    298300                        case 'apps':
    299301                                return '<div class="default-icon"><span class="dashicons dashicons-smartphone"></span></div>';
     302                        case 'patterns':
     303                                return '<div class="default-icon"><span class="dashicons dashicons-art"></span></div>';
    300304                        default:
    301305                                return '<div class="default-icon"><span class="dashicons dashicons-translation"></span></div>';
Note: See TracChangeset for help on using the changeset viewer.