Changeset 5239

Timestamp:

04/04/2017 05:45:12 PM (5 years ago)

Author:

coffee2code

Message:

developer.wordpress.org: Improve organization of the user contributed note submission area.

• Move some writing-related prefatory text into list above comment textarea
• Leave remaining submit-related text below comment textarea, but formatted as a list
• Add button-like styles around the code buttons text
• Minor string tweaks
• Ensure autoscroll goes to top of prefatory text and not just to the textarea

Props DrewAPicture.
Fixes #1905.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer

Files:

• comments.php (modified) (1 diff)
• js/user-notes.js (modified) (1 diff)
• scss/main.scss (modified) (1 diff)
• stylesheets/main.css (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/comments.php

@@ -68 +68 @@
             'class_form'          => 'comment-form tab-container',
             'comment_field'       => DevHub_User_Submitted_Content::wp_editor_comments(),
-            'comment_notes_after' => DevHub_Note_Preview::comment_preview() .
-                '<p>' .
-                __( 'Notes should supplement code reference entries, for example examples, tips, explanations, use-cases, and best practices.', 'wporg' ) .
-                '</p><p>' .
-                __( 'Feedback can be to report errors or omissions with the documentation on this page. Such feedback will not be publicly posted.', 'wporg' ) . 
-                '</p><p>' .
-                __( 'Do not use this form for support requests, discussions, spam, bug reports, complaints, or self-promotion. Entries of this nature will be deleted.', 'wporg' ) .
-                '</p><p>' .
-                __( 'You can enter text and code. Use the php, js, or inline code buttons to wrap code snippets.', 'wporg' ) .
-                '</p><p>' .
-                __( 'In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key. In some cases the Esc key will need to be pressed twice before the Tab key will allow you to continue.', 'wporg' ) .
-                '</p><p class="user-notes-are-gpl">' .
-                sprintf( __( '<strong>NOTE:</strong> All contributions are licensed under <a href="%s">GFDL</a> and are moderated before appearing on the site.', 'wporg' ), 'https://gnu.org/licenses/fdl.html' ) .
-                '</p>',
+            'logged_in_as'        => '<p class="logged-in-as">'
+                . sprintf(
+                    /* translators: 1: user profile link, 2: accessibility text, 3: user name, 4: logout URL */
+                    __( '<a href="%1$s" aria-label="%2$s">Logged in as %3$s</a>. <a href="%4$s">Log out?</a>' ),
+                    'https://profiles.wordpress.org/' . esc_attr( wp_get_current_user()->user_nicename ),
+                    /* translators: %s: user name */
+                    esc_attr( sprintf( __( 'Logged in as %s. Edit your profile.' ), $user_identity ) ),
+                    $user_identity,
+                    wp_logout_url( apply_filters( 'the_permalink', get_permalink() ) )
+                )
+                . '</p><p><ul><li>'
+                . __( 'Notes should supplement code reference entries, for example examples, tips, explanations, use-cases, and best practices.', 'wporg' )
+                . '</li><li>'
+                . __( 'Feedback can be to report errors or omissions with the documentation on this page. Such feedback will not be publicly posted.', 'wporg' )
+                . '</li><li>'
+                /* translators: 1: php button, 2: js button, 3: inline code button */
+                . sprintf(
+                    __( 'You can enter text and code. Use the %1$s, %2$s, or %3$s buttons to wrap code snippets.', 'wporg' ),
+                    '<span class="text-button">php</span>',
+                    '<span class="text-button">js</span>',
+                    '<span class="text-button">' . __( 'inline code', 'wporg' ) . '</span>'
+                )
+                . '</li></ul></p>',
+            'comment_notes_after' => DevHub_Note_Preview::comment_preview()
+                . '<p>'
+                . __( 'Submission Notes:', 'wporg' ) 
+                . '<ul><li>'
+                . __( 'This form is not for support requests, discussions, spam, bug reports, complaints, or self-promotion. Entries of this nature will be deleted.', 'wporg' )
+                . '</li><li>'
+                . __( 'In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key. In some cases the Esc key will need to be pressed twice before the Tab key will allow you to continue.', 'wporg' )
+                . '</li><li class="user-notes-are-gpl">'
+                . sprintf(
+                    /* translators: 1: GFDL link */
+                    __( '<strong>NOTE:</strong> All contributions are licensed under %s and are moderated before appearing on the site.', 'wporg' ),
+                    '<a href="https://gnu.org/licenses/fdl.html">GFDL</a>'
+                )
+                . '</li></ul></p>',
             'label_submit'        => __( 'Add Note or Feedback', 'wporg' ),
             'must_log_in'         => '<p>' . sprintf(

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes.js

@@ -16 +16 @@
         $( '#add-user-note').hide();
 
-        var target = $( '#commentform #add-note-or-feedback' );
+        var target = $( '#commentform' );
         if ( target.length ) {
             var pos = target.offset();

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

@@ -1435 +1435 @@
             font-size: 1.6rem;
         }
+
+        .text-button {
+            background: #fff none repeat scroll 0 0;
+            border-color: #ccc #ccc #bbb;
+            border-radius: 3px;
+            border-style: solid;
+            border-width: 1px;
+            padding: 0 5px;
+        }
+
+        .comment-form ul {
+            margin-left: 1.5em;
+        }
     }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

@@ -1822 +1822 @@
 }
 
+.devhub-wrap.single-wp-parser-function .text-button, .devhub-wrap.single-wp-parser-method .text-button, .devhub-wrap.single-wp-parser-hook .text-button, .devhub-wrap.single-wp-parser-class .text-button {
+  background: #fff none repeat scroll 0 0;
+  border-color: #ccc #ccc #bbb;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  padding: 0 5px;
+}
+
+.devhub-wrap.single-wp-parser-function .comment-form ul, .devhub-wrap.single-wp-parser-method .comment-form ul, .devhub-wrap.single-wp-parser-hook .comment-form ul, .devhub-wrap.single-wp-parser-class .comment-form ul {
+  margin-left: 1.5em;
+}
+
 .devhub-wrap.single-post .comment-list,
 .devhub-wrap.single-post .comment-list ol {