WordPress.org
Get WordPress

Making WordPress.org

Ticket #974: 974.2.diff

File 974.2.diff, 15.5 KB (added by iandunn, 11 years ago)

  • anon-upload-template.php

     
    2929                padding-top: 10px;
    3030        }
    3131
    32         .page-template-anon-upload-template-php #footer {
    33                 position: absolute;
    34                 bottom: 0;
    35                 right: 0;
    36                 left: 0;
    37         }
    38 
    39         .video-upload {
    40                 padding-bottom: 70px;
    41         }
    42 
    4332        .noscript-show p {
    4433                margin: 0 !important;
    4534        }
    … …  
    5140
    5241        .video-upload-left {
    5342                max-width: 550px;
     43                margin: 15px;
    5444        }
    5545
    5646        .video-upload-right {
    57                 float: right;
    58                 width: 390px;
    59                 margin: -25px 0 25px;
     47                margin: -25px 15px 0;
    6048        }
    6149
     50                .video-upload-right {
     51                        float: right;
     52                        width: 390px;
     53                        margin: -25px 0 25px;
     54                }
     55        }
     56
    6257        .video-upload p {
    6358                margin: 16px 0;
    6459        }
    … …  
    107102            color: #333;
    108103            background-color: #fff;
    109104            padding: 4px;
    110             width: 329px;
     105            width: 98%;
    111106                max-width: 329px;
    112107        }
    113108
    114109        .video-upload-left ul.cats-checkboxes {
    115                 margin-left: 130px;
    116110                height: 150px;
    117111                overflow: auto;
    118112        }

  • functions.php

     
    772772        wp_enqueue_style( 'wptv-ie', get_template_directory_uri() . '/ie6.css', array( 'wptv-style' ) );
    773773        wp_style_add_data( 'wptv-ie', 'conditional', 'IE 6' );
    774774
     775        wp_enqueue_script( 'wptv', get_template_directory_uri() . '/js/wordpress-tv.js', array(), 1, true );
     776
    775777        if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    776778                wp_enqueue_script( 'comment-reply' );
    777779        }

  • header.php

     
    1414
    1515<head>
    1616        <meta charset="<?php bloginfo( 'charset' ); ?>">
     17        <meta name="viewport" content="width=device-width, initial-scale=1">
    1718        <title><?php wp_title( '|', true, 'right' ); ?></title>
    1819
    1920        <link rel="alternate" type="application/rss+xml" title="<?php esc_attr_e( 'WordPress.tv RSS Feed', 'wptv' ); ?>" href="http://wordpress.tv/feed/" />
    … …  
    3839                        </form>
    3940
    4041                        <div id="menu">
     42                                <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Menu', 'wptv' ); ?></button>
    4143                                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    4244                        </div>
    4345

  • js/wordpress-tv.js

     
     1var WordPressTV = ( function() {
     2        /**
     3         * Initialize
     4         */
     5        function init() {
     6                toggleNavigationMenu();
     7        }
     8
     9        /**
     10         * Handles toggling the navigation menu for small screens and enables tab
     11         * support for dropdown menus.
     12         */
     13        function toggleNavigationMenu() {
     14                var container, button, menu, links, subMenus;
     15
     16                container = document.getElementById( 'menu' );
     17                if ( ! container ) {
     18                        return;
     19                }
     20
     21                button = container.getElementsByTagName( 'button' )[0];
     22                if ( 'undefined' === typeof button ) {
     23                        return;
     24                }
     25
     26                menu = container.getElementsByTagName( 'ul' )[0];
     27
     28                // Hide menu toggle button if menu is empty and return early.
     29                if ( 'undefined' === typeof menu ) {
     30                        button.style.display = 'none';
     31                        return;
     32                }
     33
     34                menu.setAttribute( 'aria-expanded', 'false' );
     35                if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
     36                        menu.className += ' nav-menu';
     37                }
     38
     39                button.onclick = function() {
     40                        if ( -1 !== container.className.indexOf( 'toggled' ) ) {
     41                                container.className = container.className.replace( ' toggled', '' );
     42                                button.setAttribute( 'aria-expanded', 'false' );
     43                                menu.setAttribute( 'aria-expanded', 'false' );
     44                        } else {
     45                                container.className += ' toggled';
     46                                button.setAttribute( 'aria-expanded', 'true' );
     47                                menu.setAttribute( 'aria-expanded', 'true' );
     48                        }
     49                };
     50
     51                // Get all the link elements within the menu.
     52                links    = menu.getElementsByTagName( 'a' );
     53                subMenus = menu.getElementsByTagName( 'ul' );
     54
     55                // Set menu items with submenus to aria-haspopup="true".
     56                for ( var i = 0, len = subMenus.length; i < len; i++ ) {
     57                        subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
     58                }
     59
     60                // Each time a menu link is focused or blurred, toggle focus.
     61                for ( i = 0, len = links.length; i < len; i++ ) {
     62                        links[i].addEventListener( 'focus', toggleFocus, true );
     63                        links[i].addEventListener( 'blur', toggleFocus, true );
     64                }
     65        }
     66
     67        /**
     68         * Sets or removes .focus class on an element.
     69         */
     70        function toggleFocus() {
     71                var self = this;
     72
     73                // Move up through the ancestors of the current link until we hit .nav-menu.
     74                while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
     75
     76                        // On li elements toggle the class .focus.
     77                        if ( 'li' === self.tagName.toLowerCase() ) {
     78                                if ( -1 !== self.className.indexOf( 'focus' ) ) {
     79                                        self.className = self.className.replace( ' focus', '' );
     80                                } else {
     81                                        self.className += ' focus';
     82                                }
     83                        }
     84
     85                        self = self.parentElement;
     86                }
     87        }
     88
     89        /*
     90         * Reveal public methods
     91         */
     92        return {
     93                init : init
     94        };
     95} )();
     96
     97WordPressTV.init();

  • sidebar.php

     
    11<div class="secondary-content">
    22        <ul>
    3                 <li>
     3                <li class="widget">
    44                        <h3><a href="http://blog.wordpress.tv"><?php esc_html_e( 'From the Blog', 'wptv' ); ?></a></h3>
    55                        <ul>
    66                                <?php
    … …  
    2424                                ?>
    2525                        </ul>
    2626                </li>
    27                 <li>
     27
     28                <li class="widget">
    2829                        <h3><?php esc_html_e( 'Resources', 'wptv' ); ?></h3>
    2930
    3031                        <ul>
    … …  
    3233                        </ul>
    3334                </li>
    3435        <ul/>
    35 </div><!-- .secondary_content -->
    36  No newline at end of file
     36</div><!-- .secondary_content -->

  • style.css

     
    209209
    210210#header {
    211211        margin-top: 10px;
    212         height: 57px;
    213212}
    214213
    215214#header h1 {
    … …  
    218217}
    219218
    220219#header .sleeve {
    221         width: 942px;
     220        max-width: 942px;
    222221        margin: 0 auto;
    223222}
    224223
     224.menu-toggle {
     225        display: none;
     226        margin: 0 auto;
     227}
     228
     229#menu {
     230        clear: both;
     231}
     232
    225233#menu ul {
    226234        float: right;
    227235        height: 57px;;
    … …  
    253261        color: #000 !important;
    254262}
    255263
    256 #searchform {
    257         float: right;
    258         margin-left: 15px;
    259 }
    260 
    261264#searchform #searchbox,
    262265#searchform input#s {
    263266        box-sizing: content-box;
    … …  
    282285        margin-top: 15px;
    283286}
    284287
     288/* Forms */
     289
    285290input[type=submit], button, .button {
    286291        text-decoration: none;
    287292        -moz-border-radius: 5px;
    … …  
    356361        );
    357362}
    358363
     364/* Intro */
     365
    359366.intro {
    360367        font-size: 30px;
    361368        height: 64px;
    … …  
    14241431        display: none;
    14251432}
    14261433
    1427 #content {
    1428         width: 630px;
    1429         float: left;
    1430 }
    1431 
    14321434#content .post {
    14331435        margin-bottom: 20px;
    14341436        clear: both;
    … …  
    15111513}
    15121514
    15131515#commentform textarea {
    1514         width: 600px;
     1516        width: 96%;
    15151517        height: 100px;
    15161518        margin-bottom: 5px;
    15171519}
    … …  
    15761578        font-size: 10px;
    15771579}
    15781580
    1579 #footer {
    1580         clear: both;
    1581         height: 3.5em;
    1582         margin-bottom: 15px;
    1583         color: #888;
    1584 }
    1585 
    15861581#footer .automattic {
    1587         width: 400px;
    1588         float: right;
    1589         text-align: right;
    15901582        font-size: 11px;
    15911583        letter-spacing: 0.2em;
    1592         line-height: 3em;
    1593         padding-top: 13px;
    1594         padding-right: 2px;
     1584        padding: 13px 2px 0 0;
    15951585        text-transform: uppercase;
    15961586        line-height: 28px;
    15971587}
    … …  
    16041594        margin-bottom: 0;
    16051595}
    16061596
    1607 .menu-footer-container li {
    1608         display: inline-block;
    1609 }
    1610 
    16111597.menu-footer-container li:last-of-type .dot {
    16121598        display: none;
    16131599}
    … …  
    17851771}
    17861772
    17871773.container {
    1788         width: 940px;
     1774        max-width: 940px;
    17891775        margin: auto;
    17901776}
    17911777
    17921778.primary-content {
    1793         float: left;
    1794         width: 700px;
    17951779        margin: 0;
    17961780}
    17971781
    17981782.secondary-content {
    1799         float: right;
    1800         width: 170px;
    1801         margin: 0 0 50px 0;
     1783        margin: 0 30px;
    18021784}
    18031785
    18041786.tag-count {
    … …  
    18671849
    18681850/* Menu */
    18691851
    1870 #menu {
    1871         margin-right: 5px;
    1872 }
    1873 
    18741852#menu li {
    18751853        font-size: 14px;
    18761854}
    … …  
    19131891}
    19141892
    19151893.page-title {
    1916         width: 940px;
     1894        max-width: 940px;
    19171895        margin: auto;
    19181896}
    19191897
    … …  
    20071985.wptv-hero {
    20081986        clear: both;
    20091987
    2010         margin: 10px auto 30px auto;
     1988        margin: 20px auto 30px auto;
    20111989        padding: 30px 0 10px 0;
    20121990
    20131991        background: #F0F0F0;
    … …  
    20161994.wptv-hero .main-video {
    20171995        background: #2f2f2f;
    20181996        clear: both;
    2019 
    2020         float: left;
    2021         width: 575px;
    20221997}
    20231998
    20241999.wptv-hero .main-video .video-player {
    20252000        width: 100% !important;
    2026         height: 323px !important;
    20272001        margin: 0 !important;
    20282002}
    20292003
    … …  
    20402014}
    20412015
    20422016.wptv-hero .main-video .video-player .videopress-title,
    2043 .wptv-hero .main-video .video-player .videopress-watemark {
     2017.wptv-hero .main-video .video-player .videopress-watermark {
    20442018        display: none !important;
    20452019}
    20462020
    … …  
    20802054        display: none;
    20812055}
    20822056
    2083 .wptv-hero .secondary-videos {
    2084         float: right;
    2085         width: 345px;
    2086 }
    2087 
    20882057.wptv-hero .secondary-videos h3 {
    20892058        font-size: 18px;
    20902059        font-weight: bold;
    … …  
    20972066.wptv-hero .secondary-videos li {
    20982067        font-size: 13px;
    20992068
    2100         min-height: 75px;
     2069        min-height: 78px;
    21012070        position: relative;
    21022071
    21032072        margin: 0 auto 23px 0;
    2104         padding: 0 0 0 142px;
     2073        padding: 0 0 0 142px;   /* todo pushes title outside container at 450px wide */
    21052074}
    21062075
    21072076.wptv-hero .secondary-videos img {
    … …  
    21242093}
    21252094
    21262095.video-list li {
    2127         float: left;
    2128         min-height: 220px;
    21292096        margin-bottom: 20px;
    21302097}
    21312098
    … …  
    21372104.video-list li .video-thumbnail {
    21382105        display: block;
    21392106        width: 100%;
    2140         height: 100px;
    21412107
    21422108        margin: 0 0 8px 0;
    21432109
    … …  
    21452111        position: relative;
    21462112}
    21472113
    2148 .video-list.four-col {
    2149         width: 860px;
    2150 }
    2151 
    2152 .video-list.four-col li {
    2153         width: 160px;
    2154         margin-right: 20px;
    2155 }
    2156 
    21572114.secondary-content .video-list .video-title {
    21582115        font-size: 13px;
    21592116        display: block;
    … …  
    21882145        position: relative;
    21892146}
    21902147
    2191 .archive.video-list .video-thumbnail {
    2192         position: absolute;
    2193         top: 0;
    2194         left: 0;
    2195 
    2196         width: 220px;
    2197         height: 120px;
    2198 
    2199         margin: 0 20px 0 0;
    2200 }
    2201 
    22022148.archive.video-list .video-title {
    22032149        font-size: 16px;
    22042150        margin: 4px 0 8px;
    22052151}
    22062152
    2207 .archive.video-list .video-description {
    2208         display: block;
    2209         padding-left: 240px;
    2210 }
    2211 
    22122153.archive.video-list .video-date {
    22132154        color: #aaa;
    22142155        display: block;
    … …  
    22652206}
    22662207
    22672208/* Video Player and Placeholder */
    2268 
    2269 .single .video-player {
    2270         float: left;
    2271         width: 940px !important;
    2272         height: 529px !important;
    2273 
    2274         overflow: hidden;
    2275 }
    2276 
    22772209.videopress-placeholder,
    22782210.video-player object {
    22792211        width: 100% !important;
    … …  
    24142346        margin: 3px 0 20px 0;
    24152347}
    24162348
    2417 .category-wordcamptv .secondary-content {
    2418         float: left;
    2419         width: 170px;
    2420 }
    2421 
    2422 .category-wordcamptv .primary-content {
    2423         float: right;
    2424         margin: 0;
    2425 }
    2426 
    24272349/* WordCamp Individual Page
    24282350============================================================= */
    24292351
    … …  
    24612383============================================================= */
    24622384
    24632385.error404 .primary-content {
    2464         width: 940px;
     2386        max-width: 940px;
    24652387}
    24662388
    24672389.error404 h2 {
    … …  
    24972419
    24982420#footer {
    24992421        background: #F0F0F0;
    2500 
     2422        color: #888;
    25012423        margin: 10px 0 0 0;
    2502         padding: 10px 0;
     2424        padding: 10px 30px 20px;
    25032425}
    25042426
    25052427#footer .dot {
    … …  
    25112433        top: 2px;
    25122434        margin: 0 7px;
    25132435}
     2436
     2437/* Media Queries
     2438============================================================= */
     2439
     2440@media screen and ( min-width:941px ) {
     2441        .wptv-hero .main-video {
     2442                width: 575px;
     2443        }
     2444
     2445        .wptv-hero .main-video .video-player {
     2446                height: 323px !important;
     2447        }
     2448
     2449        .primary-content {
     2450                float: left;
     2451                max-width: 700px;
     2452        }
     2453
     2454        .secondary-content {
     2455                float: right;
     2456                width: 170px;
     2457                margin: 0 0 50px 0;
     2458        }
     2459
     2460        .container {
     2461                overflow: hidden;
     2462        }
     2463
     2464        .category-wordcamptv .secondary-content {
     2465                float: left;
     2466                width: 170px;
     2467        }
     2468
     2469        .category-wordcamptv .primary-content {
     2470                float: right;
     2471                margin: 0;
     2472        }
     2473
     2474        .video-list.four-col {
     2475                width: 860px;
     2476        }
     2477
     2478        .wptv-hero .main-video {
     2479                float: left;
     2480        }
     2481
     2482        .wptv-hero .secondary-videos {
     2483                float: right;
     2484                width: 345px;
     2485        }
     2486
     2487        .single .video-player {
     2488                float: left;
     2489                width: 940px !important;
     2490                height: 529px !important;
     2491                overflow: hidden;
     2492        }
     2493}
     2494
     2495@media screen and ( max-width:940px ) {
     2496        #header {
     2497                padding: 0 30px;
     2498        }
     2499
     2500        .category .page-title,
     2501        .desc {
     2502                float: none;
     2503        }
     2504
     2505        .wptv-hero .main-video .video-player {
     2506                /*height: auto !important;*/
     2507
     2508                /* todo when video starts playing, it dissappears */
     2509                /* todo watermark is creating empty space */
     2510        }
     2511
     2512        .primary-content {
     2513                padding: 0 30px;
     2514        }
     2515
     2516        .wptv-hero {
     2517                padding: 30px 30px 10px;
     2518        }
     2519
     2520        .wptv-hero .secondary-videos {
     2521                margin-top: 20px;
     2522        }
     2523
     2524        .wptv-hero .secondary-videos li {
     2525                display: inline-block;
     2526                width: 150px;
     2527                vertical-align: top;
     2528                padding-right: 20px;
     2529        }
     2530
     2531        .secondary-content {
     2532                clear: both;
     2533        }
     2534
     2535        .secondary-content li.widget {
     2536                width: 45%;
     2537                display: inline-block;
     2538                vertical-align: top;
     2539                margin-right: -6px;     /* http://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
     2540                padding-right: 30px;
     2541        }
     2542
     2543                .secondary-content li.widget:nth-child( even ) {
     2544                        margin-right: 0;
     2545                        padding-right: 0;
     2546                }
     2547}
     2548
     2549@media screen and ( min-width:921px ) {
     2550        #footer {
     2551                clear: both;
     2552                height: 3.5em;
     2553
     2554        }
     2555
     2556        .automattic {
     2557                width: 380px;
     2558                float: right;
     2559                text-align: right;
     2560        }
     2561}
     2562
     2563@media screen and ( max-width:920px ) {
     2564        .menu-footer-container {
     2565                float: none;
     2566                text-align: center;
     2567        }
     2568
     2569        .automattic {
     2570                width: 100%;
     2571                clear: both;
     2572                text-align: center;
     2573        }
     2574}
     2575
     2576@media screen and ( max-width: 700px ) {
     2577        .wptv-hero .secondary-videos li {
     2578                display: block;
     2579                width: 100%;
     2580                padding-right: 0;
     2581        }
     2582}
     2583
     2584@media screen and ( min-width:621px ) {
     2585        .menu-footer-container li {
     2586                display: inline-block;
     2587        }
     2588}
     2589
     2590@media screen and ( max-width:620px ) {
     2591        .dot {
     2592                display: none;
     2593        }
     2594}
     2595
     2596@media screen and ( min-width:620px ) and ( max-width:940px ) {
     2597
     2598}
     2599
     2600@media screen and ( min-width:601px ) {
     2601        #header {
     2602                height: 57px;
     2603        }
     2604}
     2605
     2606@media screen and ( max-width:600px ) {
     2607        /* Menu */
     2608        .menu-toggle {
     2609                display: block;
     2610        }
     2611
     2612        .menu-primary-container {
     2613                display: none;
     2614                margin-top: 20px;
     2615        }
     2616
     2617        #menu.toggled .menu-primary-container {
     2618                display: block;
     2619        }
     2620
     2621        #menu ul {
     2622                float: none;
     2623                height: auto;
     2624                margin-left: -30px;     /* offset margins on #header, to achieve 100% viewport width */
     2625                margin-right: -30px;
     2626                background-color: #2698CF;
     2627                text-align: center;
     2628        }
     2629
     2630        #menu li {
     2631                float: none;
     2632                margin-left: 0;
     2633                padding: 10px 0 8px;
     2634                line-height: 2em;
     2635                border-bottom: 1px solid white;
     2636        }
     2637
     2638        #menu li:last-child {
     2639                border-bottom: none;
     2640        }
     2641
     2642        #menu li a,
     2643        #menu li a:link,
     2644        #menu li a:visited {
     2645                color: white;
     2646        }
     2647
     2648        #menu .current-menu-item > a,
     2649        #menu .current-menu-ancestor > a,
     2650        #menu .current_page_item > a,
     2651        #menu .current_page_ancestor > a {
     2652                color: white !important;
     2653        }
     2654
     2655        /* Footer */
     2656        .menu-footer-container {
     2657                float: none;
     2658        }
     2659
     2660        #menu-footer {
     2661                text-align: center;
     2662        }
     2663
     2664        #menu-footer li {
     2665                display: block;
     2666        }
     2667}
     2668
     2669@media screen and ( min-width:621px ) {
     2670        .archive.video-list .video-thumbnail {
     2671                position: absolute;
     2672                top: 0;
     2673                left: 0;
     2674
     2675                width: 220px;
     2676                height: 120px;
     2677
     2678                margin: 0 20px 0 0;
     2679        }
     2680
     2681        .archive.video-list .video-description {
     2682                display: block;
     2683                padding-left: 240px;
     2684        }
     2685}
     2686
     2687@media screen and ( min-width:401px ) {
     2688        #searchform {
     2689                float: right;
     2690                margin-left: 15px;
     2691        }
     2692}
     2693
     2694@media screen and ( max-width: 500px ) {
     2695        .secondary-content li.widget {
     2696                width: auto;
     2697                display: block;
     2698                margin-right: 0;
     2699                padding-right: 0;
     2700                text-align: center;
     2701        }
     2702}
     2703
     2704@media screen and ( max-width:400px ) {
     2705        #searchform #searchbox,
     2706        #searchform input#s {
     2707                width: 95%;
     2708        }
     2709
     2710        .entry .contact-form textarea {
     2711                width: 98%;
     2712        }
     2713}
     2714
     2715@media screen and ( min-width:395px ) {
     2716        .video-list li {
     2717                float: left;
     2718                min-height: 220px;
     2719        }
     2720
     2721        .video-list.four-col li {
     2722                width: 160px;
     2723                margin-right: 20px;
     2724        }
     2725}