Address UX issues with the Contribute menu.
authorjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 7 Dec 2015 19:48:37 +0000 (19:48 +0000)
committerjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 7 Dec 2015 19:48:37 +0000 (19:48 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@193642 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/wp-content/themes/webkit/functions.php
Websites/webkit.org/wp-content/themes/webkit/header.php
Websites/webkit.org/wp-content/themes/webkit/style.css

index 49d46c1..d26c55c 100644 (file)
@@ -1,3 +1,57 @@
+2015-12-07  Jonathan Davis  <jond@apple.com>
+
+        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.
+
 2015-12-05  Timothy Hatcher  <timothy@apple.com>
 
         One last fix for https redirect.
index 2b86ccf..bc846ce 100644 (file)
@@ -210,8 +210,6 @@ class Responsive_Toggle_Walker_Nav_Menu extends Walker_Nav_Menu {
 
     public function start_lvl( &$output, $depth = 0, $args = array() ) {
         $output .= "\n" . str_repeat("\t", $depth);
-        if ( ! empty($this->toggleid) )
-            $output .= "<input type=\"checkbox\" id=\"toggle-{$this->toggleid}\" class=\"menu-toggle\" />";
         $classes = array("sub-menu");
         if ( 0 == $depth ) {
             $classes[] = "sub-menu-layer";
@@ -232,9 +230,10 @@ class Responsive_Toggle_Walker_Nav_Menu extends Walker_Nav_Menu {
         $after = $args->link_after;
 
         if ( in_array('menu-item-has-children', $item->classes) && 0 == $depth ) {
+            $this->toggleid = $item->ID;
+            $args->before .= "<input type=\"checkbox\" id=\"toggle-{$item->ID}\" class=\"menu-toggle\" />";
             $args->link_before = "<label for=\"toggle-{$item->ID}\" class=\"label-toggle\">" . $args->link_before;
             $args->link_after .= "</label>";
-            $this->toggleid = $item->ID;
             $item->url = '#nav-sub-menu';
         } elseif ( in_array('menu-item-has-children', $item->classes) && 1 == $depth ) {
             // $item->role = "presentation";
index ec994f2..e8220a6 100644 (file)
@@ -33,7 +33,7 @@
 <?php wp_nav_menu( array(
 'walker'          => new Responsive_Toggle_Walker_Nav_Menu(),
 'theme_location'  => 'site-nav',
-'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>',
+'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>',
 ) ); ?></nav>
         </div>
     </header>
index 4a0ab24..c498e44 100644 (file)
@@ -20,16 +20,16 @@ article, aside, canvas, details,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, section, summary,
 time, mark, audio, video {
-       margin: 0;
-       padding: 0;
-       border: 0;
-       font: inherit;
-       vertical-align: baseline;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
-       display: block;
+    display: block;
 }
 html {
     font-family: "Myriad Set Pro","Helvetica Neue",sans-serif;
@@ -40,22 +40,22 @@ body {
     background-color: #f7f7f7;
     font-size: 1.6rem;
     font-weight: 400;
-       line-height: 1.4;
+    line-height: 1.4;
 }
 ol, ul {
-       list-style: none;
+    list-style: none;
 }
 blockquote, q {
-       quotes: none;
+    quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
-       content: '';
-       content: none;
+    content: '';
+    content: none;
 }
 table {
-       border-collapse: collapse;
-       border-spacing: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
 }
 p:empty {
     display: none;
@@ -136,31 +136,31 @@ h6 a[name] {
 }
 
 .screen-reader-text {
-       clip: rect(1px, 1px, 1px, 1px);
-       position: absolute !important;
-       height: 1px;
-       width: 1px;
-       overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
 }
 
 .screen-reader-text:focus {
-       background-color: #f1f1f1;
-       border-radius: 3px;
-       box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-       clip: auto !important;
-       color: #21759b;
-       display: block;
-       font-size: 14px;
-       font-size: 0.875rem;
-       font-weight: bold;
-       height: auto;
-       left: 5px;
-       line-height: normal;
-       padding: 15px 23px 14px;
-       text-decoration: none;
-       top: 5px;
-       width: auto;
-       z-index: 100000; /* Above WP toolbar. */
+    background-color: #f1f1f1;
+    border-radius: 3px;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+    clip: auto !important;
+    color: #21759b;
+    display: block;
+    font-size: 14px;
+    font-size: 0.875rem;
+    font-weight: bold;
+    height: auto;
+    left: 5px;
+    line-height: normal;
+    padding: 15px 23px 14px;
+    text-decoration: none;
+    top: 5px;
+    width: auto;
+    z-index: 100000; /* Above WP toolbar. */
 }
 
 /** Page Layout **/
@@ -690,11 +690,11 @@ footer .menu {
 /** Code Syntax Highlighting **/
 pre {
     width: calc(100% + 6rem);
-       overflow: auto;
+    overflow: auto;
     -webkit-overflow-scrolling: touch;
     background: #f2f2f2;
-       border: 1px solid #E6E6E6;
-       border-radius: 3px;
+    border: 1px solid #E6E6E6;
+    border-radius: 3px;
 
     box-sizing: border-box;
     padding: 3rem;
@@ -703,7 +703,7 @@ pre {
 
 code {
     color: #555555;
-       font-size: 1.6rem;
+    font-size: 1.6rem;
     line-height: 2.5rem;
 }
 
@@ -1291,9 +1291,9 @@ article,
 }
 
 .feature.opened .feature-header:after {
-       -webkit-transform: rotateX(-180deg);
-       -moz-transform: rotateX(-180deg);
-       transform: rotateX(-180deg);
+    -webkit-transform: rotateX(-180deg);
+    -moz-transform: rotateX(-180deg);
+    transform: rotateX(-180deg);
     perspective: 600;
 }
 
@@ -1349,19 +1349,27 @@ footer nav a:hover {
     text-decoration: none;
 }
 
-header nav .menu-item-has-children .label-toggle {
-    background: url('images/menu-down.svg') right 0.7rem no-repeat;
-    background-size: 1rem;
+header .menu-item-has-children .label-toggle::after {
+    background: url('images/menu-down.svg') no-repeat;
+    background-size: 1.2rem;
     display: inline-block;
-    padding-right: 1.5rem;
+    padding-right: 1.2rem;
+    padding-top: 0.8rem;
+    margin-left: 0.5rem;
+    margin-top: -0.1rem;
+    content: '';
+    
+    -webkit-transition: transform 0.3s ease-out;
+    -moz-transition: transform 0.3s ease-out;
+    transition: transform 0.3s ease-out;
 }
 
-header nav .menu-item { /* add bottom dimension to main menu items */
+header .menu-item { /* add bottom dimension to main menu items */
     padding-bottom: 3rem;
 }
 
 /* Improves mouse accessibility of menus */
-header .menu > .menu-item-has-children:hover > a::before {
+/*header .menu > .menu-item-has-children:hover > a::before {
     position: absolute;
     content: '';
     width: 100%;
@@ -1370,14 +1378,15 @@ header .menu > .menu-item-has-children:hover > a::before {
     top: 2rem;
     right: -3rem;
 }
-
+*/
 .sub-menu-layer {
     text-align: center;
     padding: 3rem;
     box-sizing: border-box;
 
-    width: 210px;
-    margin-left: -110px;
+    width: 21rem;
+    margin-left: -11rem;
+    margin-top: -99rem;
     
     position: absolute;
     top: 7rem;    
@@ -1426,14 +1435,15 @@ header .menu > .menu-item-has-children:hover > a::before {
 }
 
 .menu > .menu-item > a:focus ~ .sub-menu,
-.menu > .menu-item.open-menu> .sub-menu,
+.menu > .menu-item.open-menu > .sub-menu,
 .menu > .menu-item:hover > .sub-menu,
-.menu > .menu-item > .menu-toggle:checked ~ .sub-menu {
+.menu > .menu-item > .menu-toggle:checked + .sub-menu {
     display: block;
     box-sizing: border-box;
     z-index: 1;
     opacity: 1;
     top: 8rem;    
+    margin-top: 0;
 }
 
 /** Screen Breakpoints **/
@@ -1487,13 +1497,25 @@ header .menu > .menu-item-has-children:hover > a::before {
 
 @media only screen and (max-width: 920px) {
     
-    header nav .main-menu.label-toggle {
+    .main-menu.label-toggle {
         display: inline-block;
         margin: 1.5rem 0 2.5rem;
         height: 3rem;
         width: 3rem;
         background: url('images/menu-down.svg') no-repeat 50%;
         cursor: pointer;
+        
+        -webkit-transition: transform 0.3s ease-out;
+        -moz-transition: transform 0.3s ease-out;
+        transition: transform 0.3s ease-out;
+    }
+    
+    .menu-toggle:checked + .main-menu.label-toggle,
+    header .menu-item > .menu-toggle:checked + a > .label-toggle::after {
+        -webkit-transform: rotateX(-180deg);
+        -moz-transform: rotateX(-180deg);
+        transform: rotateX(-180deg);
+        perspective: 600;
     }
 
     header .menu {
@@ -1511,7 +1533,7 @@ header .menu > .menu-item-has-children:hover > a::before {
         background: rgba(255,255,255,0.8);
     }
 
-    header nav .menu-toggle:checked ~ ul {
+    header .menu-toggle:checked ~ ul {
         display: block;
         opacity: 1;
     }
@@ -1570,23 +1592,19 @@ header .menu > .menu-item-has-children:hover > a::before {
         margin-left: -11px;
     }
     
-    header .menu-toggle:checked ~ .sub-menu {
-        text-align: left;
-    }
-
-    header .menu > .menu-item:hover > .sub-menu,
     header .menu > .menu-item > .menu-toggle:checked ~ .sub-menu {
         position: relative;
         top: 1.5rem;
+        margin-top: 0;
     }
-    
+        
     footer nav li {
         padding: 0 3rem 3rem 0;
     }
 
 }
 
-@media only screen and (max-width: 782px) {
+@media only screen and (max-width: 690px) {
     
     .featured-tile {
         padding: 0;
@@ -1698,9 +1716,9 @@ header .menu > .menu-item-has-children:hover > a::before {
     }
 
     .feature-filters.opened:after {
-       -webkit-transform: rotateX(-180deg);
-       -moz-transform: rotateX(-180deg);
-       transform: rotateX(-180deg);
+        -webkit-transform: rotateX(-180deg);
+        -moz-transform: rotateX(-180deg);
+        transform: rotateX(-180deg);
     }
     
     #wpadminbar {
@@ -1738,9 +1756,9 @@ header .menu > .menu-item-has-children:hover > a::before {
     }
     
     .menu-toggle:checked ~ .table-of-contents label:after {
-       -webkit-transform: rotateX(-180deg);
-       -moz-transform: rotateX(-180deg);
-       transform: rotateX(-180deg);
+        -webkit-transform: rotateX(-180deg);
+        -moz-transform: rotateX(-180deg);
+        transform: rotateX(-180deg);
     }
     
     .table-of-contents h6 {
@@ -1856,9 +1874,9 @@ header .menu > .menu-item-has-children:hover > a::before {
     }
     
     .menu-toggle:checked ~ .table-of-contents label:after {
-       -webkit-transform: rotateX(-180deg);
-       -moz-transform: rotateX(-180deg);
-       transform: rotateX(-180deg);
+        -webkit-transform: rotateX(-180deg);
+        -moz-transform: rotateX(-180deg);
+        transform: rotateX(-180deg);
     }
     
     .table-of-contents h6 {