WordPress.org
Get WordPress

Making WordPress.org

Ticket #493: search.2.diff

File search.2.diff, 6.5 KB (added by nlarnold1, 10 years ago)

This one includes the responsive adjustments

  • functions.php

     
    483483        wp_enqueue_style( 'wp-dev-sass-compiled', get_template_directory_uri() . '/stylesheets/main.css', array( 'wporg-developer-style' ), '20141026' );
    484484        wp_enqueue_script( 'wporg-developer-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
    485485        wp_enqueue_script( 'wporg-developer-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
     486        wp_enqueue_script( 'wporg-developer-search', get_template_directory_uri() . '/js/search.js', array(), '20141029', true );
    486487}
    487488
    488489/**

  • header.php

     
    2424                        </div>
    2525                </div><!-- .inner-wrap -->
    2626        </header><!-- #masthead -->
     27        <?php
     28        $post_types = array( 'wp-parser-class', 'wp-parser-function', 'wp-parser-method', 'wp-parser-hook' );
     29        if ( is_singular( $post_types ) || is_post_type_archive( $post_types ) ) : ?>
     30                <div id="inner-search">
     31                        <?php get_search_form(); ?>
     32                        <div id="inner-search-icon">
     33                                <div class="dashicons dashicons-search"></div>
     34                        </div>
     35                </div>
     36
     37        <?php endif; ?>
    2738        <div id="content" class="site-content">

  • scss/main.scss

     
    617617                padding-top: 0;
    618618        }
    619619
     620        &.single, &.archive {
     621                div#inner-search {
     622                        background-color: #2e6183;
     623                        margin-top: -1em;
     624                        margin-bottom: 1em;
     625                        padding: 2px 13px 0;
     626                        .section.search-section {
     627                                color: #ffffff;
     628                        }
     629                        div#inner-search-icon {
     630                                background-color: #2e6183;
     631                                color: #ffffff;
     632                                text-align: center;
     633                                position: absolute;
     634                                left: 75%;
     635                                padding: 5px;
     636                                -webkit-border-bottom-right-radius: 5px;
     637                                -webkit-border-bottom-left-radius: 5px;
     638                                -moz-border-radius-bottomright: 5px;
     639                                -moz-border-radius-bottomleft: 5px;
     640                                border-bottom-right-radius: 5px;
     641                                border-bottom-left-radius: 5px;
     642                                .dashicons-search {
     643                                        height: auto;
     644                                        width: auto;
     645                                        &:before {
     646                                                font-size: 36px;
     647                                                line-height: 36px;
     648                                        }
     649                                }
     650                        }
     651                }
     652        }
     653
    620654        .searchform {
    621655                overflow: hidden;
    622656                height: auto;
    … …  
    13241358                        padding: 0 4rem;
    13251359                }
    13261360
    1327                 .reference-landing .searchform {
    1328                         text-alignment: center;
     1361                .reference-landing, &.single, &.archive {
     1362                        .searchform {
     1363                                text-alignment: center;
     1364                                input[type="text"], input[type="submit"] {
     1365                                        width: 100%;
     1366                                        margin-right: 0;
     1367                                        margin-bottom: 1em;
     1368                                        float: none;
     1369                                        clear: both;
     1370                                }
     1371                        }
    13291372                }
    13301373
    1331                 .reference-landing .searchform input[type="text"],
    1332                 .reference-landing .searchform input[type="submit"] {
    1333                         width: 100%;
    1334                         margin-right: 0;
    1335                         margin-bottom: 1em;
    1336                         float: none;
    1337                         clear: both;
    1338                 }
    13391374
    13401375                .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
    13411376                        h1 {
    … …  
    13491384                .two-columns .box {
    13501385                        width: 99%;
    13511386                }
     1387                &.single, &.archive {
     1388                        div#inner-search {
     1389                                div#inner-search-icon {
     1390                                        right: 5px;
     1391                                        left: auto;
     1392                                        padding: 3px 5px;
     1393                                        .dashicons-search:before {
     1394                                                font-size: 20px;
     1395                                                line-height: 20px;
     1396                                        }
     1397                                }
     1398                                .search-post-type label {
     1399                                        display: block;
     1400                                        border: none;
     1401                                }
     1402                        }
     1403                }
    13521404        }
    13531405}
     1406 No newline at end of file

  • stylesheets/main.css

     
    855855.devhub-wrap .reference-landing .section.search-section {
    856856  padding-top: 0;
    857857}
     858.devhub-wrap.single div#inner-search, .devhub-wrap.archive div#inner-search {
     859  background-color: #2e6183;
     860  margin-top: -1em;
     861  margin-bottom: 1em;
     862  padding: 2px 13px 0;
     863}
     864.devhub-wrap.single div#inner-search .section.search-section, .devhub-wrap.archive div#inner-search .section.search-section {
     865  color: #ffffff;
     866}
     867.devhub-wrap.single div#inner-search div#inner-search-icon, .devhub-wrap.archive div#inner-search div#inner-search-icon {
     868  background-color: #2e6183;
     869  color: #ffffff;
     870  text-align: center;
     871  position: absolute;
     872  left: 75%;
     873  padding: 5px;
     874  -webkit-border-bottom-right-radius: 5px;
     875  -webkit-border-bottom-left-radius: 5px;
     876  -moz-border-radius-bottomright: 5px;
     877  -moz-border-radius-bottomleft: 5px;
     878  border-bottom-right-radius: 5px;
     879  border-bottom-left-radius: 5px;
     880}
     881.devhub-wrap.single div#inner-search div#inner-search-icon .dashicons-search, .devhub-wrap.archive div#inner-search div#inner-search-icon .dashicons-search {
     882  height: auto;
     883  width: auto;
     884}
     885.devhub-wrap.single div#inner-search div#inner-search-icon .dashicons-search:before, .devhub-wrap.archive div#inner-search div#inner-search-icon .dashicons-search:before {
     886  font-size: 36px;
     887  line-height: 36px;
     888}
    858889.devhub-wrap .searchform {
    859890  overflow: hidden;
    860891  height: auto;
    … …  
    14381469    padding: 0 40px;
    14391470    padding: 0 4rem;
    14401471  }
    1441   .devhub-wrap .reference-landing .searchform {
     1472  .devhub-wrap .reference-landing .searchform, .devhub-wrap.single .searchform, .devhub-wrap.archive .searchform {
    14421473    text-alignment: center;
    14431474  }
    1444   .devhub-wrap .reference-landing .searchform input[type="text"],
    1445   .devhub-wrap .reference-landing .searchform input[type="submit"] {
     1475  .devhub-wrap .reference-landing .searchform input[type="text"], .devhub-wrap .reference-landing .searchform input[type="submit"], .devhub-wrap.single .searchform input[type="text"], .devhub-wrap.single .searchform input[type="submit"], .devhub-wrap.archive .searchform input[type="text"], .devhub-wrap.archive .searchform input[type="submit"] {
    14461476    width: 100%;
    14471477    margin-right: 0;
    14481478    margin-bottom: 1em;
    … …  
    14581488  .devhub-wrap .two-columns .box {
    14591489    width: 99%;
    14601490  }
     1491  .devhub-wrap.single div#inner-search div#inner-search-icon, .devhub-wrap.archive div#inner-search div#inner-search-icon {
     1492    right: 5px;
     1493    left: auto;
     1494    padding: 3px 5px;
     1495  }
     1496  .devhub-wrap.single div#inner-search div#inner-search-icon .dashicons-search:before, .devhub-wrap.archive div#inner-search div#inner-search-icon .dashicons-search:before {
     1497    font-size: 20px;
     1498    line-height: 20px;
     1499  }
     1500  .devhub-wrap.single div#inner-search .search-post-type label, .devhub-wrap.archive div#inner-search .search-post-type label {
     1501    display: block;
     1502    border: none;
     1503  }
    14611504}