com web/php: Update add-note.php and user notes animation: js/common.js manual/add-note.php styles/theme-base.css
| From: | Dejan Marjanovic | Date: | Sun, 15 Dec 2013 04:26:14 +0000 |
| Subject: | com web/php: Update add-note.php and user notes animation: js/common.js manual/add-note.php styles/theme-base.css | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-17633@lists.php.net to get a copy of this message | ||
Commit: 61a729a55c3a57404797c1964a49a30b0fea6d9c
Author: Dejan Marjanovic <dejan.marjanovic@gmail.com> Sun, 15 Dec 2013 05:26:14
+0100
Parents: 636a7e494b48f9eef29bf99bb13326a7ffd5d693
Branches: master
Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=61a729a55c3a57404797c1964a49a30b0fea6d9c
Log:
Update add-note.php and user notes animation
Changed paths:
M js/common.js
M manual/add-note.php
M styles/theme-base.css
diff --git a/js/common.js b/js/common.js index f29da55..b2f6eac 100755 --- a/js/common.js +++ b/js/common.js @@ -311,6 +311,65 @@ $(document).ready(function() { }); +/* {{{ add-user.php animations */ +$(function() { + + if ( ! document.getElementById('add-note-usernotes')) + return; + + $('#usernotes').animate({marginLeft: 0}, 1000); + + $('#usernotes .note').removeAttr('style'); + + var times = [3, 7, 10]; + for (i in times) + times[i] = times[i] * 1000; + + var notes = []; + notes[0] = $('#usernotes .bad'); + notes[1] = $('#usernotes .good'); + notes[2] = $('#usernotes .spam'); + + setTimeout(function() + { + notes[0].find('.usernotes-voted').css('border-top-color', '#001155'); + notes[1].find('.usernotes-voteu').css('border-bottom-color', '#001155'); + + var t = 1000; + var i = 1; + var timer = setInterval(function() + { + if (i * t > times[1] - times[0]) + { + clearTimeout(timer); + return; + } + + notes[0].find('.tally').html( notes[0].find('.tally').html().toInt() - 1); + notes[1].find('.tally').html( notes[1].find('.tally').html().toInt() + 1); + + i++; + }, t); + + notes[0].find('.text').animate({opacity: 0.3}, (times[1] - times[0])); + + }, times[0]); + + setTimeout(function() + { + notes[2].find('.text').html("@BJORI DOESN'T LIKE SPAM").css('background-color', '#F9ECF2'); + }, times[1]); + + setTimeout(function() + { + notes[0].fadeOut(); + notes[2].fadeOut(); + $('#usernotes .count').html('1 note'); + }, times[2]); + +}); +/* }}} */ + /** * Determine what language to present to the user. */ diff --git a/manual/add-note.php b/manual/add-note.php index f51afe7..f58843c 100644 --- a/manual/add-note.php +++ b/manual/add-note.php @@ -155,64 +155,183 @@ if ($process) { // Any needed variable was missing => display instructions else { ?> -<div class='warning'> - <h2>Pay Attention!</h2> - <p class='center'><img src="http://imgs.xkcd.com/comics/freedom.png" title="This is how we feel sometimes when obvious violations take place here!"/></p> - <p> - Please read <a href="#whatnottoenter">What not to enter</a>; - we have many comments to moderate and there is an overwhelming number of - users ignoring this important section. - </p> + +<div id="add-note-usernotes" class="row-fluid"> +<div class="span4"> + + <h1>Adding a note to the manual</h1> + + <ul> + <li> + Please read <a href="#whatnottoenter">What not to enter</a> + we have many comments to moderate and there is an overwhelming number of + users ignoring this important section. + </li> + <li> + Good notes (high score) are voted up and <strong>rise to top</strong> + so they are easy to find. + </li> + <li> + Low score (negative) notes are faded out to discourage usage and + after certain threshold are removed. + </li> + <li> + Any form of spam is removed immediately. Some folks still don't get it. + </li> + </ul> + +</div> +<div class="span8"> +<div class="shadow"></div> +<div id="usernotes"> + +<h3 class="title">User Contributed Notes <span class="count">3 notes</span></h3> + +<div class="note bad"> + <div class="votes"> + <div> + <a class="usernotes-voteu" title="Vote up!">up</a> + </div> + <div> + <a class="usernotes-voted" title="Vote down!">down</a> + </div> + <div title="" class="tally"> + 3 + </div> + </div> + <a class="name"><strong class="user"><em>Anonymous</em></strong></a> + <a class="genanchor" href="#"> ¶</a> + <div class="date"> + <strong> + 1 year ago + </strong> + </div> + <div class="text"> + <div class="phpcode"> + <code> + <span class="html"> + <p>eval() is the best for all sorts of things</p> + </span> + </code> + </div> + </div> +</div> + +<div class="note good"> + <div class="votes"> + <div> + <a class="usernotes-voteu" title="Vote up!">up</a> + </div> + <div> + <a class="usernotes-voted" title="Vote down!">down</a> + </div> + <div title="" class="tally"> + 1 + </div> + </div> + <a class="name"><strong class="user"><em>rasmus () lerdorf ! com</em></strong></a> + <a class="genanchor" href="#"> ¶</a> + <div class="date"> + <strong> + 2 days ago + </strong> + </div> + <div class="text"> + <div class="phpcode"> + <code> + <span class="html"> + <p>If eval() is the answer, you're almost certainly asking the wrong question.</p> + </span> + </code> + </div> + </div> </div> -<h1>Adding a note to the manual</h1> +<div class="note spam"> + <div class="votes"> + <div> + <a class="usernotes-voteu" title="Vote up!">up</a> + </div> + <div> + <a class="usernotes-voted" title="Vote down!">down</a> + </div> + <div title="" class="tally"> + 0 + </div> + </div> + <a class="name"><strong class="user"><em>spam () spam ! spam</em></strong></a> + <a class="genanchor" href="#"> ¶</a> + <div class="date"> + <strong> + 1 hour ago + </strong> + </div> + <div class="text"> + <div class="phpcode"> + <code> + <span class="html"> + <p>egg bacon sausage spam spam spam spam baked beans spam spam spam and spam</p> + </span> + </code> + </div> + </div> +</div> + +</div> -<a id="whatnottoenter"><h3>What not to enter</h3></a> -<ul> - <li> - <strong>Bug reports</strong>. Instead +</div> +</div> + + +<div id="whatnottoenter"> +<h3>Thou shall not enter! <small>(No, really, don't)</small></h3> + +<div class="row-fluid"> + <div class="span3"> + <strong>Bug reports & Missing documentation</strong> Instead <a href="http://bugs.php.net/report.php?bug_type=Documentation+problem<?php echo isset($_POST['sect']) ? '&manpage=' . clean($_POST['sect']) : ''; ?>">report a bug</a> for this manual page to the bug database. - </li> - <li> - <strong>Missing documentation</strong>. Also report that as a bug. - </li> - <li> - <strong>Support questions</strong>. See the <a href="/support.php">support page</a> - for available options. In other words, do not ask questions within the user notes. - </li> - <li> - <strong>References to other notes or authors</strong>. This is not a forum; - we do not encourage nor permit discussions here. Further, if a note is - referenced directly and is later removed or modified it causes confusion. - </li> - <li> - <strong>Code collaboration or improvements</strong>. This is not to suggest that - your code snippet is bad; this is simply not the place to show it off. You - should publish elsewhere (perhaps on your blog). - </li> - <li> - <strong>Links to your website, blog, code, or a third-party website</strong>. - On occasion we permit the posting of websites such as faqs.org or the MySQL - manual, but links to other sites will be removed, no matter how well-intended. - </li> - <li> - <strong>Complaints that your notes keep getting deleted</strong>. Most likely - you didn't bother to read this page and you violated one of these rules. - </li> - <li> - <strong>Notes in languages other than English</strong>. 不 gach duine понимает - el lenguaje जिसमें Sie sprechen. - </li> - <li> - <strong>Spam</strong>. This goes without saying but some folks still don't get it. - </li> - <li> - <strong>Your disdain for PHP and/or its maintainers</strong>. Go learn FORTRAN instead. - </li> -</ul> -<p>User notes may be edited or deleted for any reason, whether in the list above or not</p> + </div> + <div class="span3"> + <strong>Support questions or request for help</strong> See the <a href="/support.php">support page</a> + for available options. In other words, do not ask questions within the user notes. + </div> + <div class="span3"> + <strong>References to other notes or authors</strong> This is not a forum; + we do not encourage nor permit discussions here. Further, if a note is + referenced directly and is later removed or modified it causes confusion. + </div> + <div class="span3"> + <strong>Code collaboration or improvements</strong> This is not to suggest that + your code snippet is bad; this is simply not the place to show it off. You + should publish elsewhere (perhaps on your blog). + </div> +</div> +<div class="row-fluid"> + <div class="span3"> + <strong>Links to your website, blog, code, or a third-party website</strong> + On occasion we permit the posting of websites such as faqs.org or the MySQL + manual, but links to other sites will be removed, no matter how well-intended. + </div> + <div class="span3"> + <strong>Complaints that your notes keep getting deleted</strong> Most likely + you didn't bother to read this page and you violated one of these rules. + </div> + <div class="span3"> + <strong>Notes in languages other than English</strong> 不 gach duine понимает + el lenguaje जिसमें Sie sprechen. + </div> + <div class="span3"> + <strong>Your disdain for PHP and/or its maintainers</strong> Go learn FORTRAN instead. + </div> +</div> +<p>User notes may be edited or deleted for any reason, whether in the list above or not!</p> +</div> + +<div class="row-fluid"> + +<div class="span6"> <h3>Email address conversion</h3> <p> We have a simple conversion in place to convert the @ signs and dots in your @@ -223,7 +342,24 @@ else { as <tt>user at NOSPAM dot example dot com</tt>. If we remove your note we can only send an email if you use your real email address. </p> +</div> +<div class="span6"> +<h3>Formatting</h3> +<p> + Note that HTML tags are not allowed in the posts, but the note formatting + is preserved. URLs will be turned into clickable links, PHP code blocks + enclosed in the PHP tags <?php and ?> will + be source highlighted automatically. So always enclose PHP snippets in + these tags. <em>(Double-check that your note appears + as you want during the preview. That's why it is there!)</em> +</p> +</div> + +</div> + +<div class="row-fluid"> +<div class="span12"> <h3>Additional information</h3> <p> Please note that periodically the developers go through the notes and @@ -241,15 +377,8 @@ else { The SPAM challenge requires numbers to written out in English, so, an appropriate answer may be <em>nine</em> but not <em>9</em>. </p> -<h4>Formatting</h4> -<p> - Note that HTML tags are not allowed in the posts, but the note formatting - is preserved. URLs will be turned into clickable links, PHP code blocks - enclosed in the PHP tags <?php and ?> will - be source highlighted automatically. So always enclose PHP snippets in - these tags. <em>(Double-check that your note appears - as you want during the preview. That's why it is there!)</em> -</p> +</div> +</div> <?php } diff --git a/styles/theme-base.css b/styles/theme-base.css index 62c597c..20b455b 100755 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -3566,3 +3566,56 @@ aside.tips div.inner { /* }}} */ +/* {{{ Adjustments for add-note.php animations */ +#add-note-usernotes +{ + overflow: hidden; + position: relative; + height: 400px; +} + +#add-note-usernotes .shadow +{ + box-shadow: inset -10px 0 5px -5px rgba(0, 0, 0, 0.1); + width:3%; + height: 100%; + position:absolute; + float:right; + z-index:1; + left: 97%; +} + +#add-note-usernotes li +{ + margin-bottom: 1em; +} + +#add-note-usernotes #usernotes { + position: relative; + margin: 1em 0 1em 100px; +} + +#whatnottoenter strong +{ + display: block; + text-align: left; +} + +#whatnottoenter div, #add-note-usernotes li +{ + text-align: justify; +} + +#whatnottoenter div.row-fluid +{ + margin-bottom: 1em; +} + +#whatnottoenter strong:before{ + color: #333366; + content: '•'; + position: absolute; + font-size: 2em; + margin: -0.5em 0 0 -0.5em; +} +/* }}} */
diff --git a/js/common.js b/js/common.js index f29da55..b2f6eac 100755 --- a/js/common.js +++ b/js/common.js @@ -311,6 +311,65 @@ $(document).ready(function() { }); +/* {{{ add-user.php animations */ +$(function() { + + if ( ! document.getElementById('add-note-usernotes')) + return; + + $('#usernotes').animate({marginLeft: 0}, 1000); + + $('#usernotes .note').removeAttr('style'); + + var times = [3, 7, 10]; + for (i in times) + times[i] = times[i] * 1000; + + var notes = []; + notes[0] = $('#usernotes .bad'); + notes[1] = $('#usernotes .good'); + notes[2] = $('#usernotes .spam'); + + setTimeout(function() + { + notes[0].find('.usernotes-voted').css('border-top-color', '#001155'); + notes[1].find('.usernotes-voteu').css('border-bottom-color', '#001155'); + + var t = 1000; + var i = 1; + var timer = setInterval(function() + { + if (i * t > times[1] - times[0]) + { + clearTimeout(timer); + return; + } + + notes[0].find('.tally').html( notes[0].find('.tally').html().toInt() - 1); + notes[1].find('.tally').html( notes[1].find('.tally').html().toInt() + 1); + + i++; + }, t); + + notes[0].find('.text').animate({opacity: 0.3}, (times[1] - times[0])); + + }, times[0]); + + setTimeout(function() + { + notes[2].find('.text').html("@BJORI DOESN'T LIKE SPAM").css('background-color', '#F9ECF2'); + }, times[1]); + + setTimeout(function() + { + notes[0].fadeOut(); + notes[2].fadeOut(); + $('#usernotes .count').html('1 note'); + }, times[2]); + +}); +/* }}} */ + /** * Determine what language to present to the user. */ diff --git a/manual/add-note.php b/manual/add-note.php index f51afe7..f58843c 100644 --- a/manual/add-note.php +++ b/manual/add-note.php @@ -155,64 +155,183 @@ if ($process) { // Any needed variable was missing => display instructions else { ?> -<div class='warning'> - <h2>Pay Attention!</h2> - <p class='center'><img src="http://imgs.xkcd.com/comics/freedom.png" title="This is how we feel sometimes when obvious violations take place here!"/></p> - <p> - Please read <a href="#whatnottoenter">What not to enter</a>; - we have many comments to moderate and there is an overwhelming number of - users ignoring this important section. - </p> + +<div id="add-note-usernotes" class="row-fluid"> +<div class="span4"> + + <h1>Adding a note to the manual</h1> + + <ul> + <li> + Please read <a href="#whatnottoenter">What not to enter</a> + we have many comments to moderate and there is an overwhelming number of + users ignoring this important section. + </li> + <li> + Good notes (high score) are voted up and <strong>rise to top</strong> + so they are easy to find. + </li> + <li> + Low score (negative) notes are faded out to discourage usage and + after certain threshold are removed. + </li> + <li> + Any form of spam is removed immediately. Some folks still don't get it. + </li> + </ul> + +</div> +<div class="span8"> +<div class="shadow"></div> +<div id="usernotes"> + +<h3 class="title">User Contributed Notes <span class="count">3 notes</span></h3> + +<div class="note bad"> + <div class="votes"> + <div> + <a class="usernotes-voteu" title="Vote up!">up</a> + </div> + <div> + <a class="usernotes-voted" title="Vote down!">down</a> + </div> + <div title="" class="tally"> + 3 + </div> + </div> + <a class="name"><strong class="user"><em>Anonymous</em></strong></a> + <a class="genanchor" href="#"> ¶</a> + <div class="date"> + <strong> + 1 year ago + </strong> + </div> + <div class="text"> + <div class="phpcode"> + <code> + <span class="html"> + <p>eval() is the best for all sorts of things</p> + </span> + </code> + </div> + </div> +</div> + +<div class="note good"> + <div class="votes"> + <div> + <a class="usernotes-voteu" title="Vote up!">up</a> + </div> + <div> + <a class="usernotes-voted" title="Vote down!">down</a> + </div> + <div title="" class="tally"> + 1 + </div> + </div> + <a class="name"><strong class="user"><em>rasmus () lerdorf ! com</em></strong></a> + <a class="genanchor" href="#"> ¶</a> + <div class="date"> + <strong> + 2 days ago + </strong> + </div> + <div class="text"> + <div class="phpcode"> + <code> + <span class="html"> + <p>If eval() is the answer, you're almost certainly asking the wrong question.</p> + </span> + </code> + </div> + </div> </div> -<h1>Adding a note to the manual</h1> +<div class="note spam"> + <div class="votes"> + <div> + <a class="usernotes-voteu" title="Vote up!">up</a> + </div> + <div> + <a class="usernotes-voted" title="Vote down!">down</a> + </div> + <div title="" class="tally"> + 0 + </div> + </div> + <a class="name"><strong class="user"><em>spam () spam ! spam</em></strong></a> + <a class="genanchor" href="#"> ¶</a> + <div class="date"> + <strong> + 1 hour ago + </strong> + </div> + <div class="text"> + <div class="phpcode"> + <code> + <span class="html"> + <p>egg bacon sausage spam spam spam spam baked beans spam spam spam and spam</p> + </span> + </code> + </div> + </div> +</div> + +</div> -<a id="whatnottoenter"><h3>What not to enter</h3></a> -<ul> - <li> - <strong>Bug reports</strong>. Instead +</div> +</div> + + +<div id="whatnottoenter"> +<h3>Thou shall not enter! <small>(No, really, don't)</small></h3> + +<div class="row-fluid"> + <div class="span3"> + <strong>Bug reports & Missing documentation</strong> Instead <a href="http://bugs.php.net/report.php?bug_type=Documentation+problem<?php echo isset($_POST['sect']) ? '&manpage=' . clean($_POST['sect']) : ''; ?>">report a bug</a> for this manual page to the bug database. - </li> - <li> - <strong>Missing documentation</strong>. Also report that as a bug. - </li> - <li> - <strong>Support questions</strong>. See the <a href="/support.php">support page</a> - for available options. In other words, do not ask questions within the user notes. - </li> - <li> - <strong>References to other notes or authors</strong>. This is not a forum; - we do not encourage nor permit discussions here. Further, if a note is - referenced directly and is later removed or modified it causes confusion. - </li> - <li> - <strong>Code collaboration or improvements</strong>. This is not to suggest that - your code snippet is bad; this is simply not the place to show it off. You - should publish elsewhere (perhaps on your blog). - </li> - <li> - <strong>Links to your website, blog, code, or a third-party website</strong>. - On occasion we permit the posting of websites such as faqs.org or the MySQL - manual, but links to other sites will be removed, no matter how well-intended. - </li> - <li> - <strong>Complaints that your notes keep getting deleted</strong>. Most likely - you didn't bother to read this page and you violated one of these rules. - </li> - <li> - <strong>Notes in languages other than English</strong>. 不 gach duine понимает - el lenguaje जिसमें Sie sprechen. - </li> - <li> - <strong>Spam</strong>. This goes without saying but some folks still don't get it. - </li> - <li> - <strong>Your disdain for PHP and/or its maintainers</strong>. Go learn FORTRAN instead. - </li> -</ul> -<p>User notes may be edited or deleted for any reason, whether in the list above or not</p> + </div> + <div class="span3"> + <strong>Support questions or request for help</strong> See the <a href="/support.php">support page</a> + for available options. In other words, do not ask questions within the user notes. + </div> + <div class="span3"> + <strong>References to other notes or authors</strong> This is not a forum; + we do not encourage nor permit discussions here. Further, if a note is + referenced directly and is later removed or modified it causes confusion. + </div> + <div class="span3"> + <strong>Code collaboration or improvements</strong> This is not to suggest that + your code snippet is bad; this is simply not the place to show it off. You + should publish elsewhere (perhaps on your blog). + </div> +</div> +<div class="row-fluid"> + <div class="span3"> + <strong>Links to your website, blog, code, or a third-party website</strong> + On occasion we permit the posting of websites such as faqs.org or the MySQL + manual, but links to other sites will be removed, no matter how well-intended. + </div> + <div class="span3"> + <strong>Complaints that your notes keep getting deleted</strong> Most likely + you didn't bother to read this page and you violated one of these rules. + </div> + <div class="span3"> + <strong>Notes in languages other than English</strong> 不 gach duine понимает + el lenguaje जिसमें Sie sprechen. + </div> + <div class="span3"> + <strong>Your disdain for PHP and/or its maintainers</strong> Go learn FORTRAN instead. + </div> +</div> +<p>User notes may be edited or deleted for any reason, whether in the list above or not!</p> +</div> + +<div class="row-fluid"> + +<div class="span6"> <h3>Email address conversion</h3> <p> We have a simple conversion in place to convert the @ signs and dots in your @@ -223,7 +342,24 @@ else { as <tt>user at NOSPAM dot example dot com</tt>. If we remove your note we can only send an email if you use your real email address. </p> +</div> +<div class="span6"> +<h3>Formatting</h3> +<p> + Note that HTML tags are not allowed in the posts, but the note formatting + is preserved. URLs will be turned into clickable links, PHP code blocks + enclosed in the PHP tags <?php and ?> will + be source highlighted automatically. So always enclose PHP snippets in + these tags. <em>(Double-check that your note appears + as you want during the preview. That's why it is there!)</em> +</p> +</div> + +</div> + +<div class="row-fluid"> +<div class="span12"> <h3>Additional information</h3> <p> Please note that periodically the developers go through the notes and @@ -241,15 +377,8 @@ else { The SPAM challenge requires numbers to written out in English, so, an appropriate answer may be <em>nine</em> but not <em>9</em>. </p> -<h4>Formatting</h4> -<p> - Note that HTML tags are not allowed in the posts, but the note formatting - is preserved. URLs will be turned into clickable links, PHP code blocks - enclosed in the PHP tags <?php and ?> will - be source highlighted automatically. So always enclose PHP snippets in - these tags. <em>(Double-check that your note appears - as you want during the preview. That's why it is there!)</em> -</p> +</div> +</div> <?php } diff --git a/styles/theme-base.css b/styles/theme-base.css index 62c597c..20b455b 100755 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -3566,3 +3566,56 @@ aside.tips div.inner { /* }}} */ +/* {{{ Adjustments for add-note.php animations */ +#add-note-usernotes +{ + overflow: hidden; + position: relative; + height: 400px; +} + +#add-note-usernotes .shadow +{ + box-shadow: inset -10px 0 5px -5px rgba(0, 0, 0, 0.1); + width:3%; + height: 100%; + position:absolute; + float:right; + z-index:1; + left: 97%; +} + +#add-note-usernotes li +{ + margin-bottom: 1em; +} + +#add-note-usernotes #usernotes { + position: relative; + margin: 1em 0 1em 100px; +} + +#whatnottoenter strong +{ + display: block; + text-align: left; +} + +#whatnottoenter div, #add-note-usernotes li +{ + text-align: justify; +} + +#whatnottoenter div.row-fluid +{ + margin-bottom: 1em; +} + +#whatnottoenter strong:before{ + color: #333366; + content: '•'; + position: absolute; + font-size: 2em; + margin: -0.5em 0 0 -0.5em; +} +/* }}} */