com web/php: Update breadcrumbs to use flexbox when available, and show PHP Manual above h1.: include/header.inc include/shared-manual.inc
js/ext/modernizr.js styles/theme-base.css styles/theme-medium.css

Commit: 33ed430d7aad5a04a0612c22c2f0c69ed33fc46a Author: Adam Harvey <aharvey@php.net> Thu, 21 Nov 2013 18:05:42 -0800 Parents: 34ef9c817b8b2211706b41e797fa325ab0743e29 Branches: master Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=33ed430d7aad5a04a0612c22c2f0c69ed33fc46a Log: Update breadcrumbs to use flexbox when available, and show PHP Manual above h1. Changed paths: M include/header.inc M include/shared-manual.inc A js/ext/modernizr.js M styles/theme-base.css M styles/theme-medium.css Diff: diff --git a/include/header.inc b/include/header.inc index e6791e6..683583a 100755 --- a/include/header.inc +++ b/include/header.inc @@ -69,6 +69,13 @@ if (isset($shortname) && $shortname) { <base href="<?php echo $_SERVER["BASE_HREF"] ?>"> <?php endif ?> +<?php + $jsfiles = array('ext/modernizr.js'); + foreach ($jsfiles as $filename) { + $path = dirname(dirname(__FILE__)).'/js/'.$filename; + echo '<script type="text/javascript" src="/js/'.$filename.'?t='.@filemtime($path).'"></script>'; + } +?> </head> <body class="<?php print $curr; ?> <?php echo $classes; ?>"> @@ -96,29 +103,26 @@ if (isset($shortname) && $shortname) { <?php if (!empty($config['breadcrumbs'])): ?> <div id="breadcrumbs" class="container"> -<ul> <?php if (isset($config['prev'])) { - echo "<li class='prev'><a class='prev' href='{$config['prev'][0]}'>&laquo; {$config['prev'][1]}</a></li>"; + echo "<a class='prev' href='{$config['prev'][0]}'>&laquo; {$config['prev'][1]}</a>"; + } + if (isset($config['next'])) { + echo "<a class='next' href='{$config['next'][0]}'>{$config['next'][1]} &raquo;</a>"; } ?> - <li><ul> + <ul class="breadcrumbs-container"> <?php $breadcrumbs = $config['breadcrumbs']; $last = array_pop($breadcrumbs); foreach ($breadcrumbs as $crumb) { - echo " <li><a href='{$crumb['link']}'>{$crumb['title']}</a> <span class='divider'></span></li>"; + echo " <li><a href='{$crumb['link']}'>{$crumb['title']}</a></li>"; } echo " <li><a href='{$last['link']}'>{$last['title']}</a></li>"; ?> - </ul></li> -<?php - if (isset($config['next'])) { - echo "<li class='next'><a class='next' href='{$config['next'][0]}'>{$config['next'][1]} &raquo;</a></li>"; - } -?> - </ul></div> + </ul> + </div> <?php endif; ?> diff --git a/include/shared-manual.inc b/include/shared-manual.inc index 1a78b01..4e1a638 100644 --- a/include/shared-manual.inc +++ b/include/shared-manual.inc @@ -394,6 +394,10 @@ function manual_setup($setup) { $id = substr($setup['this'][0], 0, -4); ?> + <h1 class="manual-header refname"> + <a href="<?php echo $menu[0]['link']; ?>">PHP Manual</a> + </h1> + <div class="page-tools"> <div class="change-language"> <?php echo manual_language_chooser($config['lang'], $config['thispage']); ?> diff --git a/js/ext/modernizr.js b/js/ext/modernizr.js new file mode 100644 index 0000000..a890341 --- /dev/null +++ b/js/ext/modernizr.js @@ -0,0 +1,4 @@ +/* Modernizr 2.7.0 (Custom Build) | MIT & BSD + * Build: http://modernizr.com/download/#-flexbox-flexboxlegacy-cssclasses-testprop-testallprops-domprefixes + */ +;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.7.0",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.flexbox=function(){return D("flexWrap")},p.flexboxlegacy=function(){return D("boxDirection")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document); \ No newline at end of file diff --git a/styles/theme-base.css b/styles/theme-base.css index 88b641d...f0f06a0 100755 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -2134,6 +2134,13 @@ hr { border-bottom:.25em solid; } +.manual-header a:link, +.manual-header a:visited, +.manual-header a:active, +.manual-header a:hover { + color: #669; + border: 0; +} .page-tools { float: right; position:relative; @@ -3269,6 +3276,44 @@ div.soft-deprecation-notice blockquote.sidebar { #breadcrumbs .next { float: right; } +#breadcrumbs .breadcrumbs-container { + /* Prevent the breadcrumbs from wrapping around the previous link. */ + overflow: hidden; +} +#breadcrumbs .breadcrumbs-container li:first-child { + display: none; +} +@media (max-width:767px) { + #breadcrumbs { + display: none; + } +} + +/* Re-layout the breadcrumbs using flexbox if it's available. */ +.flexbox #breadcrumbs .breadcrumbs-container, +.flexboxlegacy #breadcrumbs .breadcrumbs-container { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + padding: 0 0.625em; +} +.flexbox #breadcrumbs .breadcrumbs-container li:last-child, +.flexboxlegacy #breadcrumbs .breadcrumbs-container li:last-child { + -moz-box-flex: 1 0 auto; + -webkit-box-flex: 1 0 auto; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + margin-left: 0.625em; +} +.flexbox #breadcrumbs .breadcrumbs-container li, +.flexboxlegacy #breadcrumbs .breadcrumbs-container li { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} #mainmenu-toggle-overlay, #mainmenu-toggle { display: none; diff --git a/styles/theme-medium.css b/styles/theme-medium.css index 31a7ff2..a8f8b4d 100755 --- a/styles/theme-medium.css +++ b/styles/theme-medium.css @@ -345,19 +345,19 @@ aside.tips div.border { /* {{{ Breadcrumbs */ #breadcrumbs { color: #669; - background-color: #669; + background-color: rgb(153, 153, 204); border-bottom-color: #d9d9d9; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0..25); border-color: rgb(153, 153, 204); - box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 10px 0px; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 10px 0px; border-top: 0px; } #breadcrumbs li ul { } -#breadcrumbs li.prev a, -#breadcrumbs li.next a, -#breadcrumbs li:last-child a { +#breadcrumbs a.prev, +#breadcrumbs a.next, +#breadcrumbs .breadcrumbs-container li:last-child a { color:#fff; background-color: rgb(102, 102, 153); } @@ -365,8 +365,8 @@ aside.tips div.border { #breadcrumbs a:visited { color:#eff; } -#breadcrumbs li.prev, -#breadcrumbs li.next, +#breadcrumbs a.prev, +#breadcrumbs a.next, #breadcrumbs li:last-child a:hover, #breadcrumbs li:last-child a:focus, #breadcrumbs a:hover,