WordPress.org
Get WordPress

Making WordPress.org

Changeset 9262


Ignore:
Timestamp:
11/07/2019 05:16:30 PM (5 years ago)
Author:
iandunn
Message:

WordPress.tv: Add responsive styles to improve UX.

Props nvwd, BrashRebel, iandunn
Fixes #974

Location:
sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/anon-upload-template.php

    r9177 r9262  
    2828        }
    2929
    30         .page-template-anon-upload-template-php #footer {
    31             position: absolute;
    32             bottom: 0;
    33             right: 0;
    34             left: 0;
    35         }
    36 
    3730        .video-upload {
    38             padding-bottom: 70px;
     31            width: 100%;
    3932        }
    4033
    … …  
    4942        .video-upload-left {
    5043            max-width: 550px;
     44            margin: 15px;
    5145        }
    5246
    … …  
    5549            width: 390px;
    5650            margin: -25px 0 25px;
     51        }
     52
     53        @media screen and ( max-width: 920px ) {
     54            .video-upload-right {
     55                float: none;
     56                width: auto;
     57                margin: 0 10px;
     58            }
    5759        }
    5860
    … …  
    7375            float: left;
    7476            font-weight: bold;
     77        }
     78
     79        @media screen and ( max-width: 500px ) {
     80            .video-upload-left p > label,
     81            .video-upload-left div > label {
     82                width: 100%;
     83            }
    7584        }
    7685
    … …  
    94103            background-color: #fff;
    95104            padding: 4px;
    96             width: 329px;
     105            width: 96%;
    97106            max-width: 329px;
    98107        }
    99108
    100109        .video-upload-left ul.cats-checkboxes {
    101             margin-left: 130px;
    102110            height: 150px;
    103111            overflow: auto;

  • sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/front-page.php

    r9175 r9262  
    5050
    5151                <li class="group">
    52                     <a href="<?php the_permalink(); ?>" rel="bookmark">
    5352                        <span class="video-thumbnail">
     53                            <a href="<?php the_permalink(); ?>" rel="bookmark">
    5454                            <?php $wptv->the_video_image( 50, null, false ); ?>
     55                            </a>
    5556                        </span>
    56                         <span class="video-title"><?php the_title(); ?></span>
    57                     </a>
     57                        <span class="video-title">
     58                            <a href="<?php the_permalink(); ?>" rel="bookmark">
     59                                <?php the_title(); ?>
     60                            </a>
     61                        </span>
    5862                    <?php $wptv->the_event( '<strong class="video-event">', '</strong>' ); ?>
    5963                </li>

  • sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/header.php

    r8377 r9262  
    1616    <meta charset="<?php bloginfo( 'charset' ); ?>">
    1717
     18    <meta name="viewport" content="width=device-width, initial-scale=1">
    1819    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    1920    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

  • sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/sidebar.php

    r8450 r9262  
    11<div class="secondary-content">
    22    <ul>
    3         <li>
     3        <li class="widget">
    44            <h3><?php esc_html_e( 'Resources', 'wptv' ); ?></h3>
    55

  • sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/style.css

    r8370 r9262  
    8787}
    8888
    89 /* Contain floats */
    90 .group:before, .group:after {
    91     content: "";
    92     display: table;
    93 }
    94 
    95 .group:after {
    96     clear: both;
    97 }
    98 
    99 .group {
    100     *zoom: 1;
     89iframe {
     90    max-width: 100%;
    10191}
    10292
    … …  
    110100    background: #fff;
    111101    color: #444;
    112 }
    113 
    114 .group:after {
    115     content: ".";
    116     display: block;
    117     height: 0;
    118     clear: both;
    119     visibility: hidden;
    120102}
    121103
    … …  
    247229#header {
    248230    margin-top: 10px;
    249     height: 57px;
     231    padding: 0 30px;
     232}
     233
     234#header:after {
     235    clear: both;
     236    content: '';
     237    display: table;
    250238}
    251239
    252240#header h1 {
    253241    padding-top: 8px;
    254     float: left;
    255242}
    256243
    257244#header .sleeve {
    258     width: 942px;
     245    max-width: 942px;
    259246    margin: 0 auto;
    260247}
    261248
    262 #menu ul {
    263     float: right;
    264     height: 57px;;
     249/* Menu */
     250
     251#menu {
     252    clear: both;
     253    padding: 10px 0;
    265254}
    266255
    267256#menu li {
    268     float: left;
    269     display: block;
    270     margin-left: 10px;
    271     line-height: 57px;
    272 }
     257    display: inline-block;
     258    font-size: 14px;
     259    margin-left: 0;
     260    border-bottom: 1px solid white;
     261}
     262
     263#menu li:last-child {
     264    border-bottom: none;
     265}
     266
     267#menu li a {
     268    border: 0;
     269    padding: 0 5px;
     270}
     271
     272#menu #searchform {
     273    margin: 0 0 0 15px;
     274}
     275
    273276
    274277#menu li a,
    275278#menu li a:link,
    276279#menu li a:visited {
    277     padding: 5px;
    278     color: #555;
    279280    text-decoration: none;
    280     border: 0;
    281281}
    282282
    … …  
    289289}
    290290
    291 #searchform {
    292     float: right;
    293     margin-left: 15px;
     291#menu.toggled .menu-primary-container {
     292    display: block;
    294293}
    295294
    … …  
    304303    height: 15px;
    305304    padding: 5px 6px;
    306     width: 140px;
     305    width: 71%;
    307306    -webkit-appearance: textfield;
    308307}
    … …  
    322321    box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
    323322}
     323
     324/* Forms */
    324325
    325326input[type=submit], button, .button {
    … …  
    397398}
    398399
     400/* Intro */
     401
    399402.intro {
    400403    font-size: 30px;
    … …  
    14801483}
    14811484
    1482 #content {
    1483     width: 100%;
    1484     float: left;
    1485 }
    1486 
    14871485#content .post {
    14881486    margin-bottom: 20px;
    … …  
    17851783}
    17861784
    1787 .container {
    1788     width: 940px;
     1785.wptv-hero .container,
     1786#page > .container {
    17891787    margin: auto;
     1788    max-width: 940px;
     1789    padding: 0 10px;
    17901790}
    17911791
    17921792.primary-content {
    1793     float: left;
    1794     width: 700px;
     1793    flex: 1 1 650px;
    17951794    margin: 0;
    17961795}
    17971796
    17981797.secondary-content {
    1799     float: right;
    1800     width: 200px;
    1801     margin: 0 0 50px 0;
     1798    flex: 1 1 auto;
     1799    margin: 0 30px;
    18021800}
    18031801
    … …  
    18691867/* Typography
    18701868============================================================= */
    1871 
    1872 /* Menu */
    1873 
    1874 #menu {
    1875     margin-right: 5px;
    1876 }
    1877 
    1878 #menu li {
    1879     font-size: 14px;
    1880 }
    1881 
    1882 #menu li a,
    1883 #menu li a:link,
    1884 #menu li a:visited {
    1885     color: #21759b;
    1886 }
    1887 
    1888 #menu li a.selected {
    1889     color: #545454;
    1890 }
    1891 
    1892 #menu li a:hover,
    1893 #menu li a:focus {
    1894     color: #d54e21;
    1895 }
    1896 
    1897 #menu #searchform {
    1898     margin: 0 0 0 15px;
    1899 }
    19001869
    19011870/* Titles and Body Text */
    … …  
    19191888
    19201889.page-title {
    1921     width: 940px;
     1890    max-width: 940px;
    19221891    margin: auto;
    19231892}
    … …  
    19271896    font-weight: bold;
    19281897    -webkit-font-smoothing: antialiased;
     1898    text-align: left;
    19291899}
    19301900
    … …  
    20161986
    20171987.wptv-hero {
    2018     clear: both;
    2019 
    2020     margin: 10px auto 30px auto;
    2021     padding: 30px 0 10px 0;
    2022 
     1988    margin: 10px auto 30px;
     1989    padding: 30px 0 10px;
    20231990    background: #F0F0F0;
    20241991}
    … …  
    20261993.wptv-hero .main-video {
    20271994    background: #2f2f2f;
    2028     clear: both;
    2029 
    2030     float: left;
    2031     width: 575px;
     1995    margin: 0 auto;
     1996    max-width: 575px;
     1997    position: relative;
    20321998}
    20331999
    20342000.wptv-hero .main-video .video-player {
    2035     width: 100% !important;
    2036     height: 323px !important;
    20372001    margin: 0 !important;
    20382002}
    … …  
    20512015
    20522016.wptv-hero .main-video .video-player .videopress-title,
    2053 .wptv-hero .main-video .video-player .videopress-watemark {
     2017.wptv-hero .main-video .video-player .videopress-watermark {
    20542018    display: none !important;
    20552019}
    … …  
    20972061
    20982062.wptv-hero .secondary-videos {
    2099     float: right;
    2100     width: 345px;
     2063    margin: 20px auto 0;
     2064    max-width: 575px;
    21012065}
    21022066
    … …  
    21122076.wptv-hero .secondary-videos li {
    21132077    font-size: 13px;
    2114 
    2115     min-height: 75px;
    2116     position: relative;
    2117 
    2118     margin: 0 auto 23px 0;
    2119     padding: 0 0 0 142px;
     2078    margin: 0 auto 23px;
     2079    max-width: 130px;
    21202080}
    21212081
    … …  
    21232083    width: 130px;
    21242084    height: 75px;
    2125 
    2126     position: absolute;
    2127     left: 0;
    21282085}
    21292086
    … …  
    21362093
    21372094.video-list {
    2138     clear: both;
     2095    display: flex;
     2096    flex-wrap: wrap;
     2097    margin: 0 -5px;
     2098}
     2099
     2100.video-list:after {
     2101    content: '';
     2102    flex: auto;
    21392103}
    21402104
    21412105.video-list li {
    2142     float: left;
    2143     min-height: 220px;
     2106    flex: 0 0 160px;
    21442107    margin-bottom: 20px;
     2108    padding: 0 5px;
    21452109}
    21462110
    … …  
    21482112    display: block;
    21492113    width: 100%;
    2150     height: 100px;
    21512114
    21522115    margin: 0 0 8px 0;
    … …  
    21592122    width: 100%;
    21602123    min-height: 100px;
    2161 }
    2162 
    2163 .video-list.four-col {
    2164     width: 860px;
    2165 }
    2166 
    2167 .video-list.four-col li {
    2168     width: 160px;
    2169     margin-right: 20px;
    21702124}
    21712125
    … …  
    22042158}
    22052159
    2206 .archive.video-list .video-thumbnail {
    2207     position: absolute;
    2208     top: 0;
    2209     left: 0;
    2210 
    2211     width: 220px;
    2212     height: 120px;
    2213 
    2214     margin: 0 20px 0 0;
    2215 }
    2216 
    22172160.archive.video-list .video-title {
    22182161    font-size: 16px;
    22192162    margin: 4px 0 8px;
    2220 }
    2221 
    2222 .archive.video-list .video-description {
    2223     display: block;
    2224     padding-left: 240px;
    22252163}
    22262164
    … …  
    22812219
    22822220/* Video Player and Placeholder */
    2283 
    2284 .single .video-player {
    2285     float: left;
    2286     width: 940px !important;
    2287     height: 529px !important;
    2288 
    2289     overflow: hidden;
    2290 }
    22912221
    22922222.videopress-placeholder,
    … …  
    24192349
    24202350.category .page-title {
    2421     float: left;
    2422     width: auto;
    2423     margin: -8px 0 20px 0;
     2351    flex: 0 0 25%;
     2352    margin: -8px auto 20px;
    24242353}
    24252354
    24262355.desc {
    2427     float: right;
     2356    flex: 0 0 70%;
    24282357    color: #969696;
    24292358    margin: 3px 0 20px 0;
    2430 }
    2431 
    2432 .category-wordcamptv .secondary-content {
    2433     float: left;
    2434     width: 200px;
    2435 }
    2436 
    2437 .category-wordcamptv .primary-content {
    2438     float: right;
    2439     margin: 0;
     2359    text-align: center;
    24402360}
    24412361
    … …  
    24522372.secondary-content ul {
    24532373    margin: 0 0 40px 0;
     2374}
     2375
     2376.secondary-content li.widget {
     2377    border: 0;
     2378    text-align: center;
    24542379}
    24552380
    … …  
    24692394}
    24702395
    2471 .secondary-content li.widget {
    2472     border: 0;
    2473 }
    2474 
    24752396/* 404 page
    24762397============================================================= */
    24772398
    24782399.error404 .primary-content {
    2479     width: 940px;
     2400    max-width: 940px;
    24802401}
    24812402
    … …  
    25132434#footer {
    25142435    background: #f0f0f0;
    2515     clear: both;
    25162436    color: #888;
    2517     height: 3.5em;
    2518     margin: 10px 0 15px 0;
     2437    margin: 10px 0 0 0;
    25192438    padding: 10px 0;
    25202439}
    25212440
    25222441#footer .automattic {
    2523     width: 400px;
    2524     float: right;
    2525     text-align: right;
    25262442    font-size: 11px;
    25272443    letter-spacing: 0.2em;
    2528     line-height: 3em;
     2444    line-height: 28px;
     2445    padding-right: 2px;
    25292446    padding-top: 13px;
    2530     padding-right: 2px;
     2447    text-align: center;
    25312448    text-transform: uppercase;
    2532     line-height: 28px;
    25332449}
    25342450
    … …  
    25412457.menu-footer-container,
    25422458#footer div.menu {
    2543     float: left;
    25442459    line-height: 4em;
    2545     margin-left: 2px;
    25462460    font-size: 13px;
    25472461    margin-bottom: 0;
    2548 }
    2549 
    2550 .menu-footer-container li,
    2551 #footer div.menu li {
    2552     display: inline-block;
    2553     margin: 0 10px;
     2462    text-align: center;
    25542463}
    25552464
    … …  
    25882497    display: inline;
    25892498}
     2499
     2500/* Media Queries
     2501============================================================= */
     2502
     2503@media screen and ( min-width: 415px ) {
     2504    .wptv-hero .secondary-videos li {
     2505        max-width: initial;
     2506        min-height: 75px;
     2507        padding-left: 150px;
     2508        position: relative;
     2509    }
     2510
     2511    .wptv-hero .secondary-videos .video-thumbnail {
     2512        left: 0;
     2513        position: absolute;
     2514    }
     2515}
     2516
     2517@media screen and ( min-width: 500px ) {
     2518    #header {
     2519        padding: 0 20px;
     2520    }
     2521
     2522    #header h1 {
     2523        float: left;
     2524    }
     2525
     2526    .menu-primary-container {
     2527        display: initial;
     2528    }
     2529
     2530    #menu ul {
     2531        background-color: transparent;
     2532        margin-left: -10px;
     2533        margin-right: auto;
     2534    }
     2535
     2536    #menu li {
     2537        float: left;
     2538        margin-left: 10px;
     2539    }
     2540
     2541    #menu li a,
     2542    #menu li a:link,
     2543    #menu li a:visited {
     2544        color: #21759b;
     2545    }
     2546
     2547    #menu li a.selected {
     2548        color: #545454;
     2549    }
     2550
     2551    #menu li a:hover,
     2552    #menu li a:focus {
     2553        color: #d54e21;
     2554    }
     2555
     2556    #searchform {
     2557        float: right;
     2558    }
     2559
     2560    #searchform #searchbox,
     2561    #searchform input#s {
     2562        width: 140px;
     2563    }
     2564
     2565    .secondary-content li.widget {
     2566        width: 45%;
     2567        display: inline-block;
     2568        vertical-align: top;
     2569        margin-right: -6px; /* http://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
     2570        padding-right: 30px;
     2571    }
     2572
     2573    .secondary-content li.widget:nth-child( even ) {
     2574        margin-right: 0;
     2575        padding-right: 0;
     2576    }
     2577
     2578}
     2579
     2580@media screen and ( min-width: 600px ) {
     2581    #menu li a:link,
     2582    #menu li a:visited {
     2583        color: #555;
     2584    }
     2585
     2586    #footer {
     2587        height: 3.5em;
     2588    }
     2589
     2590    .menu-footer-container li,
     2591    #footer div.menu li {
     2592        display: inline-block;
     2593        margin: 0 10px;
     2594    }
     2595}
     2596
     2597@media screen and ( min-width: 940px ) {
     2598    #menu {
     2599        clear: initial;
     2600        padding: 0;
     2601    }
     2602
     2603    #menu ul {
     2604        float: right;
     2605        margin-top: 18px;
     2606    }
     2607
     2608    #menu li {
     2609        padding: 0;
     2610    }
     2611
     2612    #menu li a {
     2613        display: initial;
     2614        padding: 5px;
     2615    }
     2616
     2617    #searchform {
     2618        margin-left: 15px;
     2619    }
     2620
     2621    body .wptv-hero .container,
     2622    body #page > .container {
     2623        display: flex;
     2624        flex-direction: row;
     2625        flex-wrap: wrap;
     2626        justify-content: space-between;
     2627    }
     2628
     2629    .wptv-hero .main-video {
     2630        flex: 0 0 575px;
     2631        margin-left: 0;
     2632        margin-right: 0;
     2633    }
     2634
     2635    .wptv-hero .secondary-videos {
     2636        flex: 1 0 320px;
     2637        margin-left: 23px;
     2638        margin-top: 0;
     2639    }
     2640
     2641    .secondary-content {
     2642        flex: 0 0 200px;
     2643        margin: -20px 0 50px 40px;
     2644    }
     2645
     2646    .secondary-content li.widget {
     2647        display: initial;
     2648        text-align: left;
     2649        width: auto;
     2650    }
     2651
     2652    .category-wordcamptv .secondary-content {
     2653        margin: 0 30px 0 0;
     2654        order: 0;
     2655        width: 170px;
     2656    }
     2657
     2658    .category-wordcamptv .primary-content {
     2659        margin: 0;
     2660        order: 1;
     2661    }
     2662
     2663    .single .video-player {
     2664        float: left;
     2665        width: 940px !important;
     2666        height: 529px !important;
     2667        overflow: hidden;
     2668    }
     2669
     2670    .menu-footer-container,
     2671    #footer div.menu {
     2672        float: left;
     2673    }
     2674
     2675    #footer .automattic {
     2676        float: right;
     2677        margin-right: 20px;
     2678        text-align: right;
     2679        width: 380px;
     2680    }
     2681}
     2682
     2683@media screen and ( min-width:920px ) {
     2684    #footer {
     2685        height: 3.5em;
     2686    }
     2687}
     2688
     2689@media screen and ( max-width:620px ) {
     2690    .dot {
     2691        display: none;
     2692    }
     2693}
     2694
     2695@media screen and ( min-width:621px ) {
     2696    .archive.video-list .video-thumbnail {
     2697        top: 0;
     2698        left: 0;
     2699
     2700        width: 220px;
     2701        height: 120px;
     2702
     2703        margin: 0 20px 0 0;
     2704    }
     2705
     2706    .archive.video-list .video-description {
     2707        display: block;
     2708    }
     2709}
     2710
     2711@media screen and ( max-width:400px ) {
     2712    .entry .contact-form textarea {
     2713        width: 98%;
     2714    }
     2715}
Note: See TracChangeset for help on using the changeset viewer.