Modified: trunk/Websites/webkit.org/ChangeLog (193641 => 193642)
--- trunk/Websites/webkit.org/ChangeLog 2015-12-07 19:21:30 UTC (rev 193641)
+++ trunk/Websites/webkit.org/ChangeLog 2015-12-07 19:48:37 UTC (rev 193642)
@@ -1,3 +1,57 @@
+2015-12-07 Jonathan Davis <j...@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 <timo...@apple.com>
One last fix for https redirect.
Modified: trunk/Websites/webkit.org/wp-content/themes/webkit/functions.php (193641 => 193642)
--- trunk/Websites/webkit.org/wp-content/themes/webkit/functions.php 2015-12-07 19:21:30 UTC (rev 193641)
+++ trunk/Websites/webkit.org/wp-content/themes/webkit/functions.php 2015-12-07 19:48:37 UTC (rev 193642)
@@ -210,8 +210,6 @@
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 @@
$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="" class=\"label-toggle\">" . $args->link_before;
$args->link_after .= "</label>";
- $this->toggleid = $item->ID;
$item->url = '';
} elseif ( in_array('menu-item-has-children', $item->classes) && 1 == $depth ) {
// $item->role = "presentation";
Modified: trunk/Websites/webkit.org/wp-content/themes/webkit/style.css (193641 => 193642)
--- trunk/Websites/webkit.org/wp-content/themes/webkit/style.css 2015-12-07 19:21:30 UTC (rev 193641)
+++ trunk/Websites/webkit.org/wp-content/themes/webkit/style.css 2015-12-07 19:48:37 UTC (rev 193642)
@@ -20,16 +20,16 @@
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 @@
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 @@
}
.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 @@
/** 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 @@
code {
color: #555555;
- font-size: 1.6rem;
+ font-size: 1.6rem;
line-height: 2.5rem;
}
@@ -1291,9 +1291,9 @@
}
.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 @@
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 @@
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 @@
}
.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,14 +1497,26 @@
@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 {
display: none;
@@ -1511,7 +1533,7 @@
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 @@
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 @@
}
.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 @@
}
.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 @@
}
.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 {
