WordPress.org
Get WordPress

Making WordPress.org

Changeset 4924


Ignore:
Timestamp:
02/18/2017 02:27:48 PM (9 years ago)
Author:
ocean90
Message:

Translate: Update styling of front page and main navigation.

Location:
sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r4923 r4924  
    8787
    8888        /**
    89          * Adds the linkt to profile settings to the user actions toolbar menu.
     89         * Adds the link to profile settings to the user actions toolbar menu.
    9090         *
    9191         * @param \WP_Admin_Bar $wp_admin_bar

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

    r4178 r4924  
    66<script type="text/javascript">document.body.className = document.body.className.replace('no-js','js');</script>
    77
    8 <div id="headline">
    9         <div class="wrapper">
    10                 <h2><a href="<?php echo home_url( '/' ); ?>"><?php bloginfo( 'name' ); ?></a></h2>
    11                 <?php
    12                 wp_nav_menu( array(
    13                         'theme_location' => 'wporg_header_subsite_nav',
    14                         'fallback_cb'    => '__return_false'
    15                 ) );
    16                 ?>
     8<header id="masthead" class="site-header <?php echo wporg_gp_is_index() ? 'home' : ''; ?>" role="banner">
     9        <div class="site-branding">
     10                <?php if ( wporg_gp_is_index() ) : ?>
     11                        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
     12                        <p class="site-description">
     13                                Contribute to WordPress core, themes, and plugins by translating them into your language.<br>
     14                                Select your locale below to get started.
     15                        </p>
     16                <?php else : ?>
     17                        <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
     18
     19                        <nav id="site-navigation" class="navigation-main clear" role="navigation">
     20                                <button type="button" class="menu-toggle dashicons dashicons-arrow-down-alt2"></button>
     21                                <?php
     22                                wp_nav_menu( [
     23                                        'theme_location' => 'wporg_header_subsite_nav',
     24                                        'fallback_cb' => false,
     25                                ] );
     26                                ?>
     27                        </nav>
     28                <?php endif; ?>
    1729        </div>
    18         <div class="wrapper">
    19                 <ul class="translate-meta-nav">
    20                         <?php
    21                         if ( is_user_logged_in() ) {
    22                                 $user = wp_get_current_user();
    23                                 printf(
    24                                         '<li>logged in as %s</li>',
    25                                         '<a href="' . esc_url( gp_url_profile( $user->user_login ) ) . '">@' . esc_html( $user->user_nicename ) . '</a>'
    26                                 );
    27                                 ?>
    28                                 <li><a href="<?php echo esc_url( gp_url( '/settings' ) ); ?>">Settings</a></li>
    29                                 <li><a href="<?php echo esc_url( wp_logout_url( home_url( '/' ) ) ); ?>">Log out</a></li>
    30                                 <?php
    31                         } else {
    32                                 ?>
    33                                 <li><a href="<?php echo esc_url( wp_login_url( gp_url_current() ) ); ?>"><strong>Log in</strong></a></li>
    34                                 <?php
    35                         }
    36                         ?>
    37                         </ul>
    38         </div>
    39 </div>
     30</header>
    4031
    4132<div class="gp-content">
    4233
    43 <div id="gp-js-message"></div>
     34        <div id="gp-js-message"></div>
    4435
    45                 <?php if (gp_notice('error')): ?>
    46                         <div class="error">
    47                                 <?php echo gp_notice( 'error' ); //TODO: run kses on notices ?>
    48                         </div>
    49                 <?php endif; ?>
    50                 <?php if (gp_notice()): ?>
    51                         <div class="notice">
    52                                 <?php echo gp_notice(); ?>
    53                         </div>
    54                 <?php endif; ?>
    55                 <?php echo gp_breadcrumb(); ?>
    56                 <?php do_action( 'gp_after_notices' ); ?>
     36        <?php
     37        if ( gp_notice( 'error' ) ) :
     38                ?>
     39                <div class="error">
     40                        <?php echo gp_notice( 'error' ); //TODO: run kses on notices ?>
     41                </div>
     42                <?php
     43        endif;
    5744
     45        if ( gp_notice() ) :
     46                ?>
     47                <div class="notice">
     48                        <?php echo gp_notice(); ?>
     49                </div>
     50                <?php
     51        endif;
     52
     53        echo gp_breadcrumb();
     54
     55        do_action( 'gp_after_notices' );
     56

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

    r4178 r4924  
    2525        return $locations;
    2626}, 50, 4 );
     27
     28function wporg_gp_is_index() {
     29        return GP::$current_route instanceof \WordPressdotorg\GlotPress\Routes\Routes\Index;
     30}
     31
     32/**
     33 * Prints JavaScript helper for menu toggle.
     34 */
     35add_action( 'gp_footer', function() {
     36        ?>
     37        <script>
     38                ( function( $ ) {
     39                        $( function() {
     40                                var $menu = $( '#site-navigation' );
     41
     42                                if ( $menu.length ) {
     43                                        $menu.find( 'button' ).on( 'click', function() {
     44                                                $menu.toggleClass( 'toggled' );
     45                                        } );
     46                                }
     47                        } );
     48                } )( jQuery );
     49        </script>
     50        <?php
     51} );

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

    r3004 r4924  
    44gp_tmpl_header();
    55?>
    6 
    7         <p class="intro"><?php _e('Contribute to WordPress core, themes, and plugins by translating them into your language. Select your locale below to get started.'); ?></p>
    8         <p class="intro">If your locale isn’t below, follow the steps in the <a href="https://make.wordpress.org/polyglots/handbook/translating/requesting-a-new-locale/">Translator Handbook</a> to contribute a new locale.</p>
    96
    107        <div class="filter-header">
    … …  
    1916                </div>
    2017        </div>
     18
     19        <p class="intro">If your locale isn’t below, follow the steps in the <a href="https://make.wordpress.org/polyglots/handbook/translating/requesting-a-new-locale/">Translator Handbook</a> to contribute a new locale.</p>
    2120
    2221        <div id="locales" class="locales">

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

    r4512 r4924  
    1 /* Secondary header design */
    2 #headline .menu {
    3         list-style: none;
    4         float: right;
     1.site-header {
     2        font-family: "Open Sans", sans-serif;
     3        line-height: 1.5;
     4        color: #32373c;
     5        background: #0073aa;
     6        padding: 18px 0;
     7        position: relative;
     8        z-index: 100;
     9}
     10
     11.site-header .site-branding {
     12        margin: 0 auto;
     13        max-width: 960px;
     14        padding: 0 10px;
     15}
     16
     17.site-header.home {
     18        padding: 28px 20px;
     19        text-align: center;
     20}
     21
     22.site-title {
     23        display: inline-block;
     24        font-size: 28px;
     25        font-weight: 300;
     26        line-height: 1;
     27        margin: 0 36px 0 0;
     28        max-width: none;
     29}
     30
     31.site-title a {
     32        color: #fff;
     33        font-weight: 300;
     34}
     35
     36p.site-title a {
     37        border-bottom: 0;
     38        text-decoration: none;
     39}
     40
     41.site-title a:hover,
     42.site-title a:focus,
     43.site-title a:active {
     44        text-decoration: none;
     45}
     46
     47.site-header .site-title a:hover {
     48        color: rgba( 255, 255, 255, 0.8 );
     49}
     50
     51.site-header.home .site-title {
     52        display: inherit;
     53        font-size: 68px;
     54        margin: 36px 0 18px;
     55}
     56
     57.site-header.home .site-title a:before {
     58        display: none;
     59}
     60
     61.site-description {
     62        color: rgba(255, 255, 255, 0.8);
     63        font-size: 1.25rem;
     64        font-weight: 300;
     65        margin: -0.4rem auto 2rem;
     66        text-align: center;
     67}
     68
     69.navigation-main {
     70        background: transparent;
     71        max-width: 940px;
     72        height: 32px;
     73        margin: -32px auto 0 auto;
     74        text-align: right;
     75        padding: 0;
     76}
     77
     78.navigation-main .menu {
     79        line-height: 32px;
     80}
     81
     82.navigation-main ul li {
     83        display: inline-block;
     84        float: none;
     85        margin-right: 21px;
     86}
     87
     88.rtl .navigation-main ul li {
     89        margin-left: 21px;
     90        margin-right: 0;
     91}
     92
     93.navigation-main ul li:last-of-type {
     94        margin: 0;
     95}
     96
     97.navigation-main ul li a {
     98        padding: 0;
     99}
     100
     101.navigation-main ul li:hover > a,
     102.navigation-main ul li.current-menu-item a,
     103.navigation-main ul li.current-menu-item:hover a {
     104        color: #fff;
     105        background: transparent;
     106}
     107
     108.navigation-main ul li:hover > a:after,
     109.navigation-main ul li.current-menu-item a:after,
     110.navigation-main ul li.current-menu-item:hover a:after {
     111        content: '';
     112        display: block;
     113        border-bottom: 1px solid #fff;
     114        position: relative;
     115        top: -6px;
     116}
     117
     118.navigation-main ul li.icon a:after {
     119        display: none;
     120}
     121
     122.navigation-main ul li:hover > a {
     123        border-bottom: none;
     124}
     125
     126.navigation-main a {
     127        color: rgba(255, 255, 255, 0.8);
    5128        font-size: 14px;
    6         font-weight: bold;
    7         padding-top: 22px;
    8         margin-right: 15px;
    9 }
    10 
    11 #headline .menu li {
    12         display: inline;
    13         padding-left: 20px;
    14 }
    15 
    16 /* Responsive design for secondary header */
    17 @media (max-width: 480px) {
    18         #headline h2 {
    19                 margin-left: 6px;
    20                 font-size: 20px;
    21         }
    22 
    23         #headline h2 a:before {
    24                 font-size: 20px;
    25                 width: 24px;
    26         }
    27 }
    28 
    29 @media (max-width: 770px) {
    30         #headline {
     129}
     130
     131.wporg-make .site-title a:before,
     132body.wporg-make #headline h2 a:before {
     133        vertical-align: middle; /* overrides wp4.css */
     134}
     135
     136.menu-toggle.dashicons {
     137        display: none;
     138        background: transparent;
     139        border: none;
     140        color: #fff;
     141        font-size: 1.5625rem;
     142        height: 3.5rem;
     143        overflow: hidden;
     144        position: absolute;
     145        right: 1rem;
     146        top: -58px;
     147        width: 3.5rem;
     148        -webkit-appearance: none;
     149}
     150
     151.toggled .menu-toggle.dashicons:before {
     152        content: "\f343";
     153}
     154
     155@media screen and (max-width: 900px) {
     156        .navigation-main ul li {
     157                margin-right: 10px;
     158        }
     159}
     160
     161@media screen and (min-width: 750px) {
     162        #wporg-header ul li a.current ~ .uparrow {
     163                border-bottom: 9px solid #0073aa;
     164        }
     165
     166        #wporg-header ul li:hover .nav-submenu ~ .uparrow,
     167        #wporg-header ul li .nav-submenu:hover ~ .uparrow {
     168                border-bottom: 9px solid #32373c;
     169        }
     170}
     171
     172@media screen and (max-width: 750px) {
     173        .menu-toggle.dashicons {
     174                display: block;
     175        }
     176
     177        .navigation-main {
     178                margin: 18px -10px -18px;
    31179                height: auto;
    32         }
    33 
    34         #headline h2 {
     180                position: relative;
     181        }
     182
     183        .navigation-main .menu {
     184                display: none;
     185        }
     186
     187        .toggled .menu {
     188                display: block;
     189        }
     190
     191        .navigation-main ul li {
     192                display: block;
    35193                float: none;
    36         }
    37 
    38         #headline .menu {
    39                 float: left;
    40194                margin: 0;
    41                 padding: 8px 0;
    42                 background: #f5f5f5;
    43                 border-top: 1px solid #d7d7d7;
    44                 width: 100%;
    45         }
    46 }
    47 
    48 .wrapper {
    49         position: relative;
    50 }
    51 
    52 ul.translate-meta-nav {
    53         list-style: none;
    54         margin: 0;
    55         padding: 0;
    56         font-size: 12px;
    57         text-align: right;
    58 }
    59 
    60 #headline ul.translate-meta-nav a {
    61         color: #0073aa;
    62 }
    63 
    64 #headline ul a:hover,
    65 #headline ul a:focus {
    66         color: #00a0d2;
    67 }
    68 
    69 @media (min-width: 771px) {
    70         ul.translate-meta-nav {
    71                 position: absolute;
    72                 bottom: -18px;
    73                 right: 6px;
    74         }
    75 }
    76 
    77 ul.translate-meta-nav li {
    78         display: inline-block;
    79         margin: 0 8px
     195                text-align: left;
     196                border-top: 1px solid rgba(255, 255, 255, 0.2);
     197        }
     198
     199        .navigation-main ul li a {
     200                display: block;
     201                padding: 1rem;
     202        }
     203
     204        .navigation-main ul li:hover > a:after,
     205        .navigation-main ul li.current-menu-item a:after,
     206        .navigation-main ul li.current-menu-item:hover a:after {
     207                display: none;
     208        }
    80209}
    81210
    … …  
    412541
    413542.locales {
    414         margin-left: -2.083%;
     543        -webkit-column-count: 2;
     544        -moz-column-count: 2;
     545        column-count: 2;
     546        -webkit-column-gap: 30px;
     547        -moz-column-gap: 30px;
     548        column-gap: 30px;
     549}
     550
     551@media (min-width: 700px) {
     552        .locales {
     553                -webkit-column-count: 3;
     554                -moz-column-count: 3;
     555                column-count: 3;
     556        }
    415557}
    416558
    … …  
    445587
    446588.locale {
    447         float: left;
    448         margin: 0 0 2.083% 2.083%;
    449         width: 31.25%;
     589        margin-bottom: 30px;
     590        width: 100%;
     591        display: inline-block;
    450592        border: 1px solid #ccc;
    451593        -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
    … …  
    491633        margin: 0;
    492634        padding: 20px 10px 20px 20px;
     635}
     636
     637.locale .name {
     638        max-width: calc( 100% - 100px );
    493639}
    494640
    … …  
    9601106        }
    9611107
    962         .locales,
    9631108        .projects {
    9641109                margin-left: 0;
    9651110        }
    9661111
    967         .locales .locale,
    9681112        .projects .project {
    9691113                width: 100%;
    … …  
    9731117        .locale-intro {
    9741118                float: none;
     1119        }
     1120
     1121        .locales .locale .name {
     1122                display: block;
     1123        }
     1124
     1125        .locales .locale .contributors {
     1126                display: none;
    9751127        }
    9761128
    … …  
    10251177        .stats-table td:before {
    10261178                content: attr(data-column-title);
    1027         }
    1028 }
    1029 
    1030 @media only screen and (max-width: 1120px) {
    1031         .locales .locale {
    1032                 width: 47.917%;
    10331179        }
    10341180}
Note: See TracChangeset for help on using the changeset viewer.