WordPress.org
Get WordPress

Making WordPress.org

Changeset 11741


Ignore:
Timestamp:
04/03/2022 03:31:24 PM (3 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.