WordPress.org
Get WordPress

Making WordPress.org

Changeset 4924


Ignore:
Timestamp:
02/18/2017 02:27:48 PM (8 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.