com web/php: Update user notes styling on the beta site.: include/shared-manual.inc styles/site.css styles/theme.css
| From: | Adam Harvey | Date: | Thu, 27 Dec 2012 10:25:32 +0000 |
| Subject: | com web/php: Update user notes styling on the beta site.: include/shared-manual.inc styles/site.css styles/theme.css | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-15153@lists.php.net to get a copy of this message | ||
Commit: 5c8beafabc9c4cee910835e90e38a65a0a4d09c2
Author: Adam Harvey <aharvey@php.net> 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 <aharvey@php.net>
Date: Thu Dec 27 18:21:51 2012 +0800
Remove inline styles from the user note voting elements.
commit 4239bdcfa8506d5e37d678032570aa6b81fe54be
Author: Adam Harvey <aharvey@php.net>
Date: Thu Dec 27 18:21:25 2012 +0800
Fix clearing behaviour when the user note heading wraps.
commit fc08e0abad0d1b500d0d1561bf5966febd3c4426
Author: Adam Harvey <aharvey@php.net>
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 <aharvey@php.net>
Date: Thu Dec 27 18:14:46 2012 +0800
Improve note vote support on the beta site..
commit 0e1a71f8a4945408000428fa88f1d5aa12aeeca4
Author: Adam Harvey <aharvey@php.net>
Date: Thu Dec 27 18:12:31 2012 +0800
Add genanchors to user notes.
commit 03393d70a6f3ac8530432ba5d7c228528ad6230d
Author: Adam Harvey <aharvey@php.net>
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 <aharvey@php.net>
Date: Thu Dec 27 17:45:10 2012 +0800
Rationalise beta site user note styles.
commit da2b492c186d6b8946170e1702f052ef93696028
Author: Adam Harvey <aharvey@php.net>
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 */