WordPress.org
Get WordPress

Making WordPress.org

Changeset 1734


Ignore:
Timestamp:
07/12/2015 05:42:47 PM (9 years ago)
Author:
ocean90
Message:

Translate: Further design improvements for project portals.

see #1091.

Location:
sites/trunk/translate.wordpress.org
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/translate.wordpress.org/includes/gp-plugins/wporg-routes/routes/locale.php

    r1721 r1734  
    9494            $sub_project_statuses = array();
    9595            foreach ( $sub_projects as $key => $_sub_project ) {
    96                 $status = $this->get_project_status( $_sub_project, $locale_slug, $set_slug );
    97                 if ( ! $status->all_count ) {
    98                     unset( $sub_projects[ $key ] );
    99                 }
     96                $status = $this->get_project_status( $_sub_project, $locale_slug, $set_slug, null, false );
    10097
    10198                $sub_project_statuses[ $_sub_project->id ] = $status;
    … …  
    181178            $status->fuzzy_count        = 0;
    182179            $status->all_count          = 0;
     180            $status->percent_complete   = 0;
    183181        }
    184182
    … …  
    195193            $status->fuzzy_count        += (int) $set->fuzzy_count();
    196194            $status->all_count          += (int) $set->all_count();
     195
     196            if ( $status->all_count ) {
     197                $status->percent_complete = floor( $status->current_count / $status->all_count * 100 );
     198            }
    197199        }
    198200
    … …  
    201203            if ( $sub_projects ) {
    202204                foreach ( $sub_projects as $sub_project ) {
    203                     $this->get_project_status( $sub_project, $locale, $set_slug, $status );
     205                    $this->get_project_status( $sub_project, $locale, $set_slug, $status, false );
    204206                }
    205207            }

  • sites/trunk/translate.wordpress.org/public_html/gp-templates/locale-project.php

    r1721 r1734  
    44$breadcrumb   = array();
    55$breadcrumb[] = gp_link_get( '/', __( 'Locales' ) );
    6 $breadcrumb[] = gp_link_get( gp_url_join( '/locale', $locale_slug, $set_slug), esc_html( $locale->english_name ) );
     6$breadcrumb[] = gp_link_get( gp_url_join( '/locale', $locale_slug, $set_slug ), esc_html( $locale->english_name ) );
     7$breadcrumb[] = gp_link_get( gp_url_join( '/locale', $locale_slug, $set_slug, $project->path ), esc_html( $project->name ) );
    78$breadcrumb[] = $sub_project->name;
    89gp_breadcrumb( $breadcrumb );
    … …  
    1314    <p class="project-description"><?php echo $sub_project->description; ?></p>
    1415
    15     <div class="project-box">
     16    <div class="project-box percent-<?php echo $sub_project_status->percent_complete; ?>">
    1617        <div class="project-box-header">
    1718            <div class="project-icon">
    … …  
    5051
    5152            <div class="project-status">
    52                 <?php
    53                 $percent_complete = floor( $project_status->current_count / $project_status->all_count * 100 );
    54                 echo $percent_complete . '%';
    55                 ?>
     53                <?php echo $sub_project_status->percent_complete . '%'; ?>
    5654            </div>
    5755        </div>
    5856
    5957        <div class="project-status-progress percent">
    60             <div class="percent-complete" style="width:<?php echo $percent_complete; ?>%;"></div>
     58            <div class="percent-complete" style="width:<?php echo $sub_project_status->percent_complete; ?>%;"></div>
    6159        </div>
    6260
    6361        <div class="project-box-footer">
     62            <ul class="projects-dropdown">
     63                <li><span>All Sub-Projects</span>
     64                    <ul>
     65                        <?php
     66                        // Show the current project if it has strings.
     67                        if ( $sub_project_status->all_count ) {
     68                            printf(
     69                                '<li><a href="%s">%s <span>%s</span></a>',
     70                                gp_url_project( $sub_project->path, gp_url_join( $locale->slug, $set_slug ) ),
     71                                $sub_project->name,
     72                                $sub_project_status->percent_complete . '%'
     73                            );
     74                        }
     75
     76                        foreach ( $sub_projects as $_sub_project ) {
     77                            $status = $sub_project_statuses[ $_sub_project->id ];
     78
     79                            printf(
     80                                '<li><a href="%s">%s <span>%s</span></a>',
     81                                gp_url_project( $_sub_project->path, gp_url_join( $locale->slug, $set_slug ) ),
     82                                $_sub_project->name,
     83                                $status->percent_complete . '%'
     84                            );
     85                        }
     86                        ?>
     87                    </ul>
     88                </li>
     89            </ul>
    6490        </div>
    6591    </div>
    … …  
    85111                    <td class="set-name">
    86112                        <strong><?php gp_link( gp_url_project( $sub_project->path, gp_url_join( $locale->slug, $set_slug ) ), $sub_project->name ); ?></strong>
    87                         <?php if ( $sub_project_status->current_count && $sub_project_status->current_count >= $sub_project_status->all_count * 0.9 ):
    88                             $percent = floor( $sub_project_status->current_count / $sub_project_status->all_count * 100 );
     113                        <?php if ( $sub_project_status->percent_complete > 90 ):
    89114                            ?>
    90                             <span class="bubble morethan90"><?php echo $percent; ?>%</span>
     115                            <span class="bubble morethan90"><?php echo $sub_project_status->percent_complete; ?>%</span>
    91116                        <?php endif;?>
    92117                    </td>
    … …  
    116141                    <td class="set-name">
    117142                        <strong><?php gp_link( gp_url_project( $sub_project->path, gp_url_join( $locale->slug, $set_slug ) ), $sub_project->name ); ?></strong>
    118                         <?php if ( $status->current_count && $status->current_count >= $status->all_count * 0.9 ):
    119                             $percent = floor( $status->current_count / $status->all_count * 100 );
     143                        <?php if ( $status->percent_complete > 90 ):
    120144                            ?>
    121                             <span class="bubble morethan90"><?php echo $percent; ?>%</span>
     145                            <span class="bubble morethan90"><?php echo $status->percent_complete; ?>%</span>
    122146                        <?php endif;?>
    123147                    </td>
    … …  
    155179            }
    156180        });
     181
     182        $( '.projects-dropdown > li' ).on( 'click', function() {
     183            $( this ).parent( '.projects-dropdown' ).toggleClass( 'open' );
     184        });
    157185    });
    158186</script>

  • sites/trunk/translate.wordpress.org/public_html/gp-templates/locale-projects.php

    r1721 r1734  
    44$breadcrumb   = array();
    55$breadcrumb[] = gp_link_get( '/', __( 'Locales' ) );
    6 $breadcrumb[] = esc_html( $locale->english_name );
     6$breadcrumb[] = gp_link_get( gp_url_join( '/locale', $locale_slug, $set_slug ), esc_html( $locale->english_name ) );
     7$breadcrumb[] = esc_html( $project->name );
    78gp_breadcrumb( $breadcrumb );
    89gp_tmpl_header();
    … …  
    7879        if ( isset( $project_status[ $sub_project->id ] ) ) {
    7980            $status = $project_status[ $sub_project->id ];
    80             $percent_complete = floor( $status->current_count / $status->all_count * 100 );
     81            $percent_complete = $status->percent_complete;
    8182            $waiting = $status->waiting_count;
    8283            $sub_projects_count = $status->sub_projects_count;

  • sites/trunk/translate.wordpress.org/public_html/gp-templates/style.css

    r1684 r1734  
    1515}
    1616
     17
     18.gp-content h3 {
     19    background: none;
     20    padding: 0;
     21    margin: 2px 0 .6em;
     22}
     23
    1724.gp-content span.breadcrumb {
    1825    margin: .5em 0;
    … …  
    5259    margin-top: 1em;
    5360    margin-bottom: 1em;
     61}
     62
     63/* Change some colors (http://codepen.io/hugobaeta/full/RNOzoV/) */
     64span.morethan90 {
     65    background: none;
     66    font-size: 90%;
     67    color: #509040;
     68}
     69
     70span.context {
     71    font-size: 90%;
     72    background-color: #a0a5aa;
     73}
     74
     75table.translations td.translation li {
     76    border-bottom: 1px dotted #eee;
     77}
     78
     79table.translations thead th,
     80table.translations tfoot th,
     81table.translation-sets thead th,
     82table.translations tfoot th,
     83table.glossary thead th,
     84table.locale-sub-projects thead th,
     85table.locales thead th {
     86    background-color: #72777c;
     87    color: #fff;
     88}
     89
     90table.translations,
     91table.translation-sets,
     92table.glossary,
     93table.locale-sub-projects {
     94    border-spacing: 0;
     95}
     96
     97table.translations td,
     98table.translations th,
     99table.translation-sets td,
     100table.translation-sets th,
     101table.locales td,
     102table.locales th,
     103table.glossary th,
     104table.glossary td,
     105table.locale-sub-projects th,
     106table.locale-sub-projects td {
     107    border: 0;
     108    border-bottom: 1px solid #eee;
     109    border-right: 1px solid #eee;
     110}
     111
     112table.translations td:first-child,
     113table.translations th:first-child,
     114table.translation-sets td:first-child,
     115table.translation-sets th:first-child,
     116table.locales td:first-child,
     117table.locales th:first-child,
     118table.glossary th:first-child,
     119table.glossary td:first-child,
     120table.locale-sub-projects th:first-child,
     121table.locale-sub-projects td:first-child {
     122    border-left: 1px solid #eee;
     123}
     124
     125table.translations tr.even,
     126.translation-sets tr,
     127.locales tr {
     128    background-color: #f9f9f9;
     129}
     130
     131.translation-sets tr.odd:hover,
     132.locales tr.odd:hover,
     133.translation-sets tr:hover,
     134.locales tr:hover,
     135.locale-sub-projects tr:hover td {
     136    background-color: #e5f5fa;
     137}
     138
     139table.translations tr.preview.status-current,
     140#legend .status-current {
     141    background-color: #c1e1b9;
     142}
     143
     144table.translations tr.preview.status-waiting,
     145#legend .status-waiting {
     146    background-color: #ffe399;
     147}
     148
     149table.translations tr.preview.status-fuzzy, #legend .status-fuzzy {
     150    background-color: #fbc5a9;
     151}
     152
     153table.translations tr.preview.has-warnings td.original,
     154div#legend div.has-warnings {
     155    border-left: 3px solid #dc3232;
     156}
     157
     158table.translations tr.preview.status-rejected,
     159#legend .status-rejected {
     160    background-color: #f1adad;
     161}
     162
     163table.translations tr.preview.status-old,
     164#legend .status-old {
     165    background-color: #cdc5e1;
     166}
     167
     168table.translations tr.editor {
     169    background-color: #eff7ed;
     170}
     171
     172.gp-content .meta {
     173    color: #333;
     174}
     175
     176.gp-content .meta a {
     177    color: #0074a2;
     178    border-bottom: 0;
     179}
     180
     181.gp-content .meta a:hover {
     182    color: #2ea2cc;
     183    border-bottom: 0;
     184}
     185
     186.editor .original {
     187    margin-bottom: 1em;
     188    word-break: break-all;
     189}
     190
     191.editor .textareas textarea {
     192    width: 100%;
     193    box-sizing: border-box;
     194}
     195
     196.editor .meta {
     197    margin: 0;
     198    padding-left: 2em;
     199    width: 40%;
     200    box-sizing: border-box;
    54201}
    55202
    … …  
    297444
    298445.locale .percent,
     446.project-box .percent,
    299447.project .percent {
    300448    width: 100%;
    … …  
    304452
    305453.locale .percent-complete,
     454.project-box .percent-complete,
    306455.project .percent-complete {
    307456    height: 4px;
    … …  
    473622    width: 100%;
    474623    max-width: 520px;
     624    margin-top: 20px;
    475625}
    476626
    … …  
    487637}
    488638
     639.project-box.percent-100 {
     640    border-color: #509040;
     641}
     642
    489643.project-box .project-box-header {
     644    position: relative;
    490645    padding: 15px;
    491646}
    … …  
    555710}
    556711
     712.project-box .project-box-footer {
     713    background: #f9f9f9;
     714}
     715
     716ul.projects-dropdown,
     717ul.projects-dropdown ul {
     718    padding: 0;
     719}
     720
     721.projects-dropdown li {
     722    list-style: none;
     723}
     724
     725.projects-dropdown a,
     726.projects-dropdown a:hover,
     727.projects-dropdown a:focus {
     728    color: #333;
     729}
     730
     731.projects-dropdown a:hover,
     732.projects-dropdown a:focus {
     733    background: #ddd;
     734}
     735
     736ul.projects-dropdown ul {
     737    position: absolute;
     738    left: -1px;
     739    width: 100%;
     740    background: #f9f9f9;
     741    border: 1px solid #ccc;
     742    border-top: 0;
     743    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.04);
     744    box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.04);
     745    display: none;
     746}
     747
     748ul.projects-dropdown.open ul {
     749    display: block;
     750}
     751
     752ul.projects-dropdown li > span,
     753ul.projects-dropdown li > a  {
     754    position: relative;
     755    display: block;
     756    padding: 10px 50px 10px 15px;
     757    cursor: pointer;
     758    white-space: nowrap;
     759    overflow: hidden;
     760    text-overflow: ellipsis;
     761}
     762
     763/* Dropdown arrow */
     764ul.projects-dropdown > li > span:after {
     765    position: absolute;
     766    top: 5px;
     767    right: 15px;
     768    content: "\f140";
     769    width: 20px;
     770    height: 20px;
     771    font: 20px/1 "dashicons";
     772    border-left: 1px solid #eee;
     773    padding: 5px 0 5px 12px;
     774    box-shadow: inset 1px 0 0 #fff;
     775    -webkit-font-smoothing: antialiased;
     776    -moz-osx-font-smoothing: grayscale;
     777}
     778
     779ul.projects-dropdown.open > li > span:after {
     780    content: "\f142";
     781}
     782
     783/* Percentage */
     784ul.projects-dropdown li > a > span {
     785    position: absolute;
     786    right: 15px;
     787}
     788
    557789/* Responsive styles */
    558790@media (max-width: 700px) {
     791    #hello {
     792        margin: 25px 10px 15px;
     793    }
     794
     795    #hello a {
     796        white-space: nowrap;
     797    }
     798
    559799    .intro {
    560800        width: 100%;
    561801    }
    562 }
    563 
    564 @media only screen and (max-width: 1120px) {
    565     .locales .locale {
    566         width: 47.917%;
    567     }
    568 }
    569 
    570 @media only screen and (max-width: 700px) {
     802
    571803    .locales,
    572804    .projects {
    … …  
    579811        margin-left: 0;
    580812    }
    581 }
     813
     814    .locale-intro {
     815        float: none;
     816    }
     817
     818    .locale-box {
     819        float: none;
     820        width: 100%;
     821        margin-top: 20px;
     822    }
     823
     824    .project-header .project-description {
     825        float: none;
     826    }
     827
     828    .project-header .project-box {
     829        float: none;
     830        width: 100%;
     831        margin-top: 20px;
     832    }
     833}
     834
     835@media only screen and (max-width: 1120px) {
     836    .locales .locale {
     837        width: 47.917%;
     838    }
     839}
Note: See TracChangeset for help on using the changeset viewer.