Changeset 193642 in webkit


Ignore:
Timestamp:
Dec 7, 2015 11:48:37 AM (8 years ago)
Author:
Jon Davis
Message:

Address UX issues with the Contribute menu.
​https://bugs.webkit.org/show_bug.cgi?id=151874

Reviewed by Timothy Hatcher.

  • wp-content/themes/webkit/functions.php:
  • wp-content/themes/webkit/header.php:
  • wp-content/themes/webkit/style.css:

(time, mark, audio, video):
(footer, header, hgroup, menu, nav, section):
(html):
(body):
(ol, ul):
(blockquote, q):
(q:before, q:after):
(table):
(p:empty):
(.admin-bar p > a[name]::before):
(.screen-reader-text):
(.screen-reader-text:focus):
(pre):
(code):
(.feature-header:after):
(.feature.opened .feature-header:after):
(footer nav a:hover):
(header .menu-item-has-children .label-toggle::after):
(header .menu-item):
(.sub-menu-layer):
(.sub-menu-layer .menu-item:first-child):
(.menu > .menu-item > .menu-toggle:checked + .sub-menu):
(@media only screen and (max-width: 920px)):
(header .menu-item > .menu-toggle:checked + a > .label-toggle::after):
(header .menu):
(header .menu-toggle:checked ~ ul):
(header .sub-menu-layer:before):
(header .menu > .menu-item > .menu-toggle:checked ~ .sub-menu):
(footer nav li):
(@media only screen and (max-width: 690px)):
(.feature-filters:after):
(.feature-filters.opened:after):
(#wpadminbar):
(.table-of-contents label:after):
(.menu-toggle:checked ~ .table-of-contents label:after):
(.table-of-contents h6):
(header nav .menu-item-has-children .label-toggle): Deleted.
(header nav .menu-item): Deleted.
(header .menu > .menu-item-has-children:hover > a::before): Deleted.
(.menu > .menu-item > .menu-toggle:checked ~ .sub-menu): Deleted.
(header nav .menu-toggle:checked ~ ul): Deleted.
(header .menu-toggle:checked ~ .sub-menu): Deleted.
(@media only screen and (max-width: 782px)): Deleted.

Location:
trunk/Websites/webkit.org
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Websites/webkit.org/ChangeLog

    r193536 r193642  
     12015-12-07  Jonathan Davis  <jond@apple.com>
     2
     3        Address UX issues with the Contribute menu.
     4        https://bugs.webkit.org/show_bug.cgi?id=151874
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        * wp-content/themes/webkit/functions.php:
     9        * wp-content/themes/webkit/header.php:
     10        * wp-content/themes/webkit/style.css:
     11        (time, mark, audio, video):
     12        (footer, header, hgroup, menu, nav, section):
     13        (html):
     14        (body):
     15        (ol, ul):
     16        (blockquote, q):
     17        (q:before, q:after):
     18        (table):
     19        (p:empty):
     20        (.admin-bar p > a[name]::before):
     21        (.screen-reader-text):
     22        (.screen-reader-text:focus):
     23        (pre):
     24        (code):
     25        (.feature-header:after):
     26        (.feature.opened .feature-header:after):
     27        (footer nav a:hover):
     28        (header .menu-item-has-children .label-toggle::after):
     29        (header .menu-item):
     30        (.sub-menu-layer):
     31        (.sub-menu-layer .menu-item:first-child):
     32        (.menu > .menu-item > .menu-toggle:checked + .sub-menu):
     33        (@media only screen and (max-width: 920px)):
     34        (header .menu-item > .menu-toggle:checked + a > .label-toggle::after):
     35        (header .menu):
     36        (header .menu-toggle:checked ~ ul):
     37        (header .sub-menu-layer:before):
     38        (header .menu > .menu-item > .menu-toggle:checked ~ .sub-menu):
     39        (footer nav li):
     40        (@media only screen and (max-width: 690px)):
     41        (.feature-filters:after):
     42        (.feature-filters.opened:after):
     43        (#wpadminbar):
     44        (.table-of-contents label:after):
     45        (.menu-toggle:checked ~ .table-of-contents label:after):
     46        (.table-of-contents h6):
     47        (header nav .menu-item-has-children .label-toggle): Deleted.
     48        (header nav .menu-item): Deleted.
     49        (header .menu > .menu-item-has-children:hover > a::before): Deleted.
     50        (.menu > .menu-item > .menu-toggle:checked ~ .sub-menu): Deleted.
     51        (header nav .menu-toggle:checked ~ ul): Deleted.
     52        (header .menu-toggle:checked ~ .sub-menu): Deleted.
     53        (@media only screen and (max-width: 782px)): Deleted.
     54
    1552015-12-05  Timothy Hatcher  <timothy@apple.com>
    256

  • trunk/Websites/webkit.org/wp-content/themes/webkit/functions.php

    r193387 r193642  
    211211    public function start_lvl( &$output, $depth = 0, $args = array() ) {
    212212        $output .= "\n" . str_repeat("\t", $depth);
    213         if ( ! empty($this->toggleid) )
    214             $output .= "<input type=\"checkbox\" id=\"toggle-{$this->toggleid}\" class=\"menu-toggle\" />";
    215213        $classes = array("sub-menu");
    216214        if ( 0 == $depth ) {
    … …  
    233231
    234232        if ( in_array('menu-item-has-children', $item->classes) && 0 == $depth ) {
     233            $this->toggleid = $item->ID;
     234            $args->before .= "<input type=\"checkbox\" id=\"toggle-{$item->ID}\" class=\"menu-toggle\" />";
    235235            $args->link_before = "<label for=\"toggle-{$item->ID}\" class=\"label-toggle\">" . $args->link_before;
    236236            $args->link_after .= "</label>";
    237             $this->toggleid = $item->ID;
    238237            $item->url = '#nav-sub-menu';
    239238        } elseif ( in_array('menu-item-has-children', $item->classes) && 1 == $depth ) {

  • trunk/Websites/webkit.org/wp-content/themes/webkit/header.php

    r192832 r193642  
    3434'walker'          => new Responsive_Toggle_Walker_Nav_Menu(),
    3535'theme_location'  => 'site-nav',
    36 'items_wrap'      => '<label for="%1$s-toggle" class="label-toggle main-menu" data-open="Main Menu" data-close="Close Menu" onclick></label><input type="checkbox" id="%1$s-toggle" class="menu-toggle" /><ul id="%1$s" class="%2$s" role="menubar">%3$s</ul>',
     36'items_wrap'      => '<input type="checkbox" id="%1$s-toggle" class="menu-toggle" /><label for="%1$s-toggle" class="label-toggle main-menu" data-open="Main Menu" data-close="Close Menu"></label><ul id="%1$s" class="%2$s" role="menubar">%3$s</ul>',
    3737) ); ?></nav>
    3838        </div>

  • trunk/Websites/webkit.org/wp-content/themes/webkit/style.css

    r193379 r193642  
    2121menu, nav, output, section, summary,
    2222time, mark, audio, video {
    23         margin: 0;
    24         padding: 0;
    25         border: 0;
    26         font: inherit;
    27         vertical-align: baseline;
     23    margin: 0;
     24    padding: 0;
     25    border: 0;
     26    font: inherit;
     27    vertical-align: baseline;
    2828}
    2929/* HTML5 display-role reset for older browsers */
    3030article, aside, details, figcaption, figure,
    3131footer, header, hgroup, menu, nav, section {
    32         display: block;
     32    display: block;
    3333}
    3434html {
    … …  
    4141    font-size: 1.6rem;
    4242    font-weight: 400;
    43         line-height: 1.4;
     43    line-height: 1.4;
    4444}
    4545ol, ul {
    46         list-style: none;
     46    list-style: none;
    4747}
    4848blockquote, q {
    49         quotes: none;
     49    quotes: none;
    5050}
    5151blockquote:before, blockquote:after,
    5252q:before, q:after {
    53         content: '';
    54         content: none;
     53    content: '';
     54    content: none;
    5555}
    5656table {
    57         border-collapse: collapse;
    58         border-spacing: 0;
     57    border-collapse: collapse;
     58    border-spacing: 0;
    5959}
    6060p:empty {
    … …  
    137137
    138138.screen-reader-text {
    139         clip: rect(1px, 1px, 1px, 1px);
    140         position: absolute !important;
    141         height: 1px;
    142         width: 1px;
    143         overflow: hidden;
     139    clip: rect(1px, 1px, 1px, 1px);
     140    position: absolute !important;
     141    height: 1px;
     142    width: 1px;
     143    overflow: hidden;
    144144}
    145145
    146146.screen-reader-text:focus {
    147         background-color: #f1f1f1;
    148         border-radius: 3px;
    149         box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    150         clip: auto !important;
    151         color: #21759b;
    152         display: block;
    153         font-size: 14px;
    154         font-size: 0.875rem;
    155         font-weight: bold;
    156         height: auto;
    157         left: 5px;
    158         line-height: normal;
    159         padding: 15px 23px 14px;
    160         text-decoration: none;
    161         top: 5px;
    162         width: auto;
    163         z-index: 100000; /* Above WP toolbar. */
     147    background-color: #f1f1f1;
     148    border-radius: 3px;
     149    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
     150    clip: auto !important;
     151    color: #21759b;
     152    display: block;
     153    font-size: 14px;
     154    font-size: 0.875rem;
     155    font-weight: bold;
     156    height: auto;
     157    left: 5px;
     158    line-height: normal;
     159    padding: 15px 23px 14px;
     160    text-decoration: none;
     161    top: 5px;
     162    width: auto;
     163    z-index: 100000; /* Above WP toolbar. */
    164164}
    165165
    … …  
    691691pre {
    692692    width: calc(100% + 6rem);
    693         overflow: auto;
     693    overflow: auto;
    694694    -webkit-overflow-scrolling: touch;
    695695    background: #f2f2f2;
    696         border: 1px solid #E6E6E6;
    697         border-radius: 3px;
     696    border: 1px solid #E6E6E6;
     697    border-radius: 3px;
    698698
    699699    box-sizing: border-box;
    … …  
    704704code {
    705705    color: #555555;
    706         font-size: 1.6rem;
     706    font-size: 1.6rem;
    707707    line-height: 2.5rem;
    708708}
    … …  
    12921292
    12931293.feature.opened .feature-header:after {
    1294         -webkit-transform: rotateX(-180deg);
    1295         -moz-transform: rotateX(-180deg);
    1296         transform: rotateX(-180deg);
     1294    -webkit-transform: rotateX(-180deg);
     1295    -moz-transform: rotateX(-180deg);
     1296    transform: rotateX(-180deg);
    12971297    perspective: 600;
    12981298}
    … …  
    13501350}
    13511351
    1352 header nav .menu-item-has-children .label-toggle {
    1353     background: url('images/menu-down.svg') right 0.7rem no-repeat;
    1354     background-size: 1rem;
     1352header .menu-item-has-children .label-toggle::after {
     1353    background: url('images/menu-down.svg') no-repeat;
     1354    background-size: 1.2rem;
    13551355    display: inline-block;
    1356     padding-right: 1.5rem;
    1357 }
    1358 
    1359 header nav .menu-item { /* add bottom dimension to main menu items */
     1356    padding-right: 1.2rem;
     1357    padding-top: 0.8rem;
     1358    margin-left: 0.5rem;
     1359    margin-top: -0.1rem;
     1360    content: '';
     1361   
     1362    -webkit-transition: transform 0.3s ease-out;
     1363    -moz-transition: transform 0.3s ease-out;
     1364    transition: transform 0.3s ease-out;
     1365}
     1366
     1367header .menu-item { /* add bottom dimension to main menu items */
    13601368    padding-bottom: 3rem;
    13611369}
    13621370
    13631371/* Improves mouse accessibility of menus */
    1364 header .menu > .menu-item-has-children:hover > a::before {
     1372/*header .menu > .menu-item-has-children:hover > a::before {
    13651373    position: absolute;
    13661374    content: '';
    … …  
    13711379    right: -3rem;
    13721380}
    1373 
     1381*/
    13741382.sub-menu-layer {
    13751383    text-align: center;
    … …  
    13771385    box-sizing: border-box;
    13781386
    1379     width: 210px;
    1380     margin-left: -110px;
     1387    width: 21rem;
     1388    margin-left: -11rem;
     1389    margin-top: -99rem;
    13811390   
    13821391    position: absolute;
    … …  
    14271436
    14281437.menu > .menu-item > a:focus ~ .sub-menu,
    1429 .menu > .menu-item.open-menu> .sub-menu,
     1438.menu > .menu-item.open-menu > .sub-menu,
    14301439.menu > .menu-item:hover > .sub-menu,
    1431 .menu > .menu-item > .menu-toggle:checked ~ .sub-menu {
     1440.menu > .menu-item > .menu-toggle:checked + .sub-menu {
    14321441    display: block;
    14331442    box-sizing: border-box;
    … …  
    14351444    opacity: 1;
    14361445    top: 8rem;   
     1446    margin-top: 0;
    14371447}
    14381448
    … …  
    14881498@media only screen and (max-width: 920px) {
    14891499   
    1490     header nav .main-menu.label-toggle {
     1500    .main-menu.label-toggle {
    14911501        display: inline-block;
    14921502        margin: 1.5rem 0 2.5rem;
    … …  
    14951505        background: url('images/menu-down.svg') no-repeat 50%;
    14961506        cursor: pointer;
     1507       
     1508        -webkit-transition: transform 0.3s ease-out;
     1509        -moz-transition: transform 0.3s ease-out;
     1510        transition: transform 0.3s ease-out;
     1511    }
     1512   
     1513    .menu-toggle:checked + .main-menu.label-toggle,
     1514    header .menu-item > .menu-toggle:checked + a > .label-toggle::after {
     1515        -webkit-transform: rotateX(-180deg);
     1516        -moz-transform: rotateX(-180deg);
     1517        transform: rotateX(-180deg);
     1518        perspective: 600;
    14971519    }
    14981520
    … …  
    15121534    }
    15131535
    1514     header nav .menu-toggle:checked ~ ul {
     1536    header .menu-toggle:checked ~ ul {
    15151537        display: block;
    15161538        opacity: 1;
    … …  
    15711593    }
    15721594   
    1573     header .menu-toggle:checked ~ .sub-menu {
    1574         text-align: left;
    1575     }
    1576 
    1577     header .menu > .menu-item:hover > .sub-menu,
    15781595    header .menu > .menu-item > .menu-toggle:checked ~ .sub-menu {
    15791596        position: relative;
    15801597        top: 1.5rem;
    1581     }
    1582    
     1598        margin-top: 0;
     1599    }
     1600       
    15831601    footer nav li {
    15841602        padding: 0 3rem 3rem 0;
    … …  
    15871605}
    15881606
    1589 @media only screen and (max-width: 782px) {
     1607@media only screen and (max-width: 690px) {
    15901608   
    15911609    .featured-tile {
    … …  
    16991717
    17001718    .feature-filters.opened:after {
    1701         -webkit-transform: rotateX(-180deg);
    1702         -moz-transform: rotateX(-180deg);
    1703         transform: rotateX(-180deg);
     1719        -webkit-transform: rotateX(-180deg);
     1720        -moz-transform: rotateX(-180deg);
     1721        transform: rotateX(-180deg);
    17041722    }
    17051723   
    … …  
    17391757   
    17401758    .menu-toggle:checked ~ .table-of-contents label:after {
    1741         -webkit-transform: rotateX(-180deg);
    1742         -moz-transform: rotateX(-180deg);
    1743         transform: rotateX(-180deg);
     1759        -webkit-transform: rotateX(-180deg);
     1760        -moz-transform: rotateX(-180deg);
     1761        transform: rotateX(-180deg);
    17441762    }
    17451763   
    … …  
    18571875   
    18581876    .menu-toggle:checked ~ .table-of-contents label:after {
    1859         -webkit-transform: rotateX(-180deg);
    1860         -moz-transform: rotateX(-180deg);
    1861         transform: rotateX(-180deg);
     1877        -webkit-transform: rotateX(-180deg);
     1878        -moz-transform: rotateX(-180deg);
     1879        transform: rotateX(-180deg);
    18621880    }
    18631881   
Note: See TracChangeset for help on using the changeset viewer.