Commit: 5c8beafabc9c4cee910835e90e38a65a0a4d09c2 Author: Adam Harvey <[email protected]> Thu, 27 Dec 2012 18:25:32 +0800 Parents: 31c00bd7e020f5b9e5f7ad01bc345f74e6bbf17a Branches: master
Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=5c8beafabc9c4cee910835e90e38a65a0a4d09c2 Log: Update user notes styling on the beta site. Part of this also improves the markup we're generating on both the stable and beta sites by removing the inline styles that have crept into shared-manual.inc. Squashed commit of the following: commit 8aaaea73f8a1128c45bbd081b0a61fb58aaff10e Author: Adam Harvey <[email protected]> Date: Thu Dec 27 18:21:51 2012 +0800 Remove inline styles from the user note voting elements. commit 4239bdcfa8506d5e37d678032570aa6b81fe54be Author: Adam Harvey <[email protected]> Date: Thu Dec 27 18:21:25 2012 +0800 Fix clearing behaviour when the user note heading wraps. commit fc08e0abad0d1b500d0d1561bf5966febd3c4426 Author: Adam Harvey <[email protected]> Date: Thu Dec 27 18:15:05 2012 +0800 Replace the user note vote styling on the beta site with something more inline with the beta site style. commit ade84bf601be20c74493d54d089edf8578ba1185 Author: Adam Harvey <[email protected]> Date: Thu Dec 27 18:14:46 2012 +0800 Improve note vote support on the beta site. commit 0e1a71f8a4945408000428fa88f1d5aa12aeeca4 Author: Adam Harvey <[email protected]> Date: Thu Dec 27 18:12:31 2012 +0800 Add genanchors to user notes. commit 03393d70a6f3ac8530432ba5d7c228528ad6230d Author: Adam Harvey <[email protected]> Date: Thu Dec 27 17:49:41 2012 +0800 Make the note styling more in line with other block elements by moving the header row outside the shaded note body. commit dc2a83990c33fd3cf7df209201536458ff01de59 Author: Adam Harvey <[email protected]> Date: Thu Dec 27 17:45:10 2012 +0800 Rationalise beta site user note styles. commit da2b492c186d6b8946170e1702f052ef93696028 Author: Adam Harvey <[email protected]> Date: Thu Dec 27 17:31:53 2012 +0800 Apply styling to user note dates in site.css, not inline. Changed paths: M include/shared-manual.inc M styles/site.css M styles/theme.css Diff: diff --git a/include/shared-manual.inc b/include/shared-manual.inc index 6b57e11..9630394 100644 --- a/include/shared-manual.inc +++ b/include/shared-manual.inc @@ -396,6 +396,7 @@ function manual_notes_beta() { // Load user note for this page $notes = manual_notes_load($filename); + uasort($notes, "manual_notes_sort"); // Link target to add a note to the current manual page, // and it's extended form with a [+] image @@ -427,7 +428,7 @@ END_USERNOTE_HEADER; foreach($notes as $note) { manual_note_display( - $note['xwhen'], $note['user'], $note['note'], $note['id'] + $note['xwhen'], $note['user'], $note['note'], $note['id'], $note['votes'] ); } echo "</div>\n"; @@ -478,7 +479,7 @@ function manual_note_display($date, $name, $text, $id, $votes = array('up'=>0,'d } else { $name = "<strong class=\"user\"><em>Anonymous</em></strong>"; } - $name = ($id ? "\n <a href=\"#$id\" class=\"date\">$name</a>" : "\n $name"); + $name = ($id ? "\n <a href=\"#$id\" class=\"name\">$name</a><a class=\"genanchor\" href=\"#$id\"> ¶</a>" : "\n $name"); // New date style will be relative time $datestr = relTime(new DateTime("@{$date}")); @@ -499,13 +500,13 @@ function manual_note_display($date, $name, $text, $id, $votes = array('up'=>0,'d $rredir_filename = urlencode($redir_filename); $votediv = <<<VOTEDIV <div class="votes"> - <div id="Vu{$id}" style="float: left;"> + <div id="Vu{$id}"> <a href="/manual/vote-note.php?id={$id}&page={$rredir_filename}&vote=up" title="Vote up!" class="usernotes-voteu">up</a> </div> - <div id="Vd{$id}" style="float: left;"> + <div id="Vd{$id}"> <a href="/manual/vote-note.php?id={$id}&page={$rredir_filename}&vote=down" title="Vote down!" class="usernotes-voted">down</a> </div> - <div id="V{$id}" style="float: left; padding: 4px; color: #323232; font-weight: strong; font-size: 19px; margin-top: -6px;" title="{$rate}"> + <div class="tally" id="V{$id}" title="{$rate}"> {$vote} </div> </div> @@ -546,7 +547,7 @@ VOTEDIV; echo <<<USER_NOTE_TEXT - <a name="$id"></a><div class="note">{$votediv}{$name}{$admin}<div style="float: right; right-padding: 4px; color: #999997;" title="$fdatestr"><strong>{$datestr}</strong></div> + <a name="$id"></a><div class="note">{$votediv}{$name}{$admin}<div class="date" title="$fdatestr"><strong>{$datestr}</strong></div> <div class="text" id="Hcom{$id}"> {$text} </div> diff --git a/styles/site.css b/styles/site.css index 089d4fa..709e058 100644 --- a/styles/site.css +++ b/styles/site.css @@ -646,6 +646,9 @@ div#usernotes div.text { padding: 2px; margin-top: 4px; } +div#usernotes .genanchor { + display: none; +} /* User notes on manual pages --------------------------------------------- */ div#usernotes { @@ -676,6 +679,11 @@ div#usernotes div.text { padding: 2px; margin-top: 4px; } +div#usernotes div.date { + float: right; + padding-right: 4px; + color: #999997; +} /* User notes new features */ div#usernotes a { text-decoration: none; @@ -696,6 +704,9 @@ div#usernotes div.votes { vertical-align: middle; padding-right: 8px; } +div#usernotes div.votes > div { + float: left; +} div#usernotes a.usernotes-voteu { display: block; width: 16px; @@ -716,6 +727,13 @@ div#usernotes a.usernotes-voteu:hover { div#usernotes a.usernotes-voted:hover { background-position:-16px 16px; } +div#usernotes div.votes .tally { + float: left; + padding: 4px; + color: #323232; + font-size: 19px; + margin-top: -6px; +} div#usernotes div.features { float: left; display: block; diff --git a/styles/theme.css b/styles/theme.css index fb4a0f0..da93e81 100755 --- a/styles/theme.css +++ b/styles/theme.css @@ -359,17 +359,13 @@ hr { max-width: 75em; } -#usernotes .note:before { - content:" "; - position:absolute; - top:-.25em; - left:0; - right:0; - bottom:0; - z-index: -1; - border-top:.25em solid #ddd; +/* User contributed notes heading. */ +#usernotes h3 { + border-top: .2em solid #669; + padding-top: .801em; } +/* Add a note buttons. */ #usernotes .action { display: block; top: 1em; @@ -378,85 +374,108 @@ hr { text-align: right; } -#usernotes .foot .action { - position: relative; - top: -1em; +#usernotes .foot { + text-align: right; margin-bottom: 1em; } -#usernotes h3 { - border-top: .2em solid #669; - padding-top: .801em; -} - +/* Notes themselves. */ #usernotes .note { margin: 1.5em 0; - padding: 1.5em .75em; - background-color: #f5f5f5; position: relative; } -#usernotes .user, -#usernotes .date, -#usernotes .admin { - display: block; - width: 50%; +#usernotes .note .votes { float: left; - margin-top:-.25em; } -#usernotes .text { - padding-top:1.5em; + +#usernotes .note .name { + border-bottom: 0; + color: #444; + margin-left: 1em; +} + +#usernotes .note .name em { + font-size: 1.2em; + font-style: normal; + font-weight: normal; +} + +#usernotes .note .name:hover + .genanchor { + color: black; +} + +#usernotes .note .date { + color: #666; + float: right; + text-align: right; +} + +#usernotes .note .date strong { + font-weight: normal; } -/* User notes new features */ -#usernotes a { - text-decoration: none; - color: #222222; +#usernotes .note .admin { + float: left; + padding-left: 1em; +} + +#usernotes .note .admin a { + border-bottom: 0; } -#usernotes a:hover { - text-decoration: underline; - color: #111111; + +#usernotes .note .text { + background-color: #f5f5f5; + border-top: 0.25em solid #ddd; + clear: both; + padding: 1.5em .75em; } -#usernotes div.features { - padding-right: 8px; - float: left; + +/* Vote arrow styles. */ +#usernotes .note .votes > div:first-child { + float: left; } -#usernotes div.votes { - float: left; - font-size: 16px; - text-align: center; - vertical-align: middle; - padding-right: 8px; + +#usernotes .note .votes > div { + float: right; } -#usernotes a.usernotes-voteu { - display: block; - width: 16px; - height: 16px; - background-position:0px 0px; - text-indent: -99999px; + +#usernotes .note .votes a { + display: block; + height: 0; + width: 0; + overflow: hidden; + margin: 8px 0 0 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 0; + + -webkit-transition: border 0.4s; + -moz-transition: border 0.4s; + -o-transition: border 0.4s; + -ms-transition: border 0.4s; + transition: border 0.4s; } -#usernotes a.usernotes-voted { - display: block; - width: 16px; - height: 16px; - background-position:0px 16px; - text-indent: -99999px; + +#usernotes .note .votes .usernotes-voteu { + border-bottom: 10px solid #999; } -#usernotes a.usernotes-voteu:hover { - background-position:-16px 0px; + +#usernotes .note .votes .usernotes-voted { + border-top: 10px solid #999; } -#usernotes a.usernotes-voted:hover { - background-position:-16px 16px; + +#usernotes .note .votes .usernotes-voteu:hover { + border-bottom: 10px solid #015; } -#usernotes div.features { - float: left; - display: block; + +#usernotes .note .votes .usernotes-voted:hover { + border-top: 10px solid #015; } -#usernotes .date, #usernotes .admin { - float:right; - text-align: right; - border-bottom: none; +#usernotes .note .votes .tally { + color: #333; + padding: 0 0.3em; } /* Definition lists used on eg. the unsub page */ -- PHP Webmaster List Mailing List (http://www.php.net/) To unsubscribe, visit: http://www.php.net/unsub.php
