modify class view to align font styles and better screen reader use closes #702

Author: lmccart

Gruntfile.js

@@ -408,6 +408,7 @@ module.exports = function(grunt) {
     'update-version',
     'exec',
     'clean',
+    'requirejs:yuidoc_theme',
     'requirejs',
     'copy',
     'assemble',

src/assets/css/main.css

@@ -441,6 +441,14 @@ div.reference-subgroup {
   margin: 1em 0 0 0;
 }
 
+#item ul {
+  margin-top: 0.5em;
+}
+
+#item li {
+  margin-bottom: 1em;
+}
+
 .description {
   clear: both;
   display: block;
@@ -455,7 +463,8 @@ div.reference-subgroup {
 
 .paramname {
   display: inline-block;
-  width: 33%;
+  min-width: 25%;
+  margin-right: 1%;
   font-size: 1.2em;
 }
 
@@ -467,7 +476,7 @@ div.reference-subgroup {
 .paramtype {
   display: inline-block;
   font-size: 1.2em;
-  width: 66%;
+  width: 73%;
   vertical-align: top;
 }
 
@@ -2267,6 +2276,9 @@ footer {
   footer {
     font-size: 0.5em;
   }
+  .paramtype {
+    width: 96%;
+  }
 }
 
 @media (max-width:400px) {

src/templates/pages/reference/assets/js/reference.js

@@ -1,32 +1,32 @@
 
 <% if (typeof constructor !== 'undefined') { %>
 <div class="constructor">
-  <!--<h2>Constructor</h2>--> 
   <%=constructor%>
 </div>
 <% } %>
 
-<% var fields = _.filter(things, function(item) { return item.itemtype === 'property' && item.access !== 'private' }); %>
+<% let fields = _.filter(things, function(item) { return item.itemtype === 'property' && item.access !== 'private' }); %>
 <% if (fields.length > 0) { %>
-  <h4>Fields</h4>
-  <p>
-    <% _.each(fields, function(item) { %>
-      <a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %> ><%=item.name%></a>: <%= item.description %>
-      <br>
-    <% }); %>
-  </p>
+  <h3 id='reference-fields'>Fields</h3>
+  <ul aria-labelledby='reference-fields'>
+  <% _.each(fields, function(item) { %>
+    <li>
+      <div class='paramname'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%></a></div>
+      <div class='paramtype'><%= item.description %></div>
+    </li>
+  <% }); %>
+  </ul>
 <% } %>
 
-<% var methods = _.filter(things, function(item) { return item.itemtype === 'method' && item.access !== 'private' }); %>
+<% let methods = _.filter(things, function(item) { return item.itemtype === 'method' && item.access !== 'private' }); %>
 <% if (methods.length > 0) { %>
-  <h4>Methods</h4>
-  <p>
-    <table>
+  <h3 id='reference-methods'>Methods</h3>
+  <ul aria-labelledby='reference-methods'>
     <% _.each(methods, function(item) { %>
-      <tr>
-      <td><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%><% if (item.itemtype === 'method') { %>()<%}%></a></td><td><div class="method_description"><%= item.description %></div></td>
-      </tr>
+      <li>
+        <div class='paramname'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%><% if (item.itemtype === 'method') { %>()<%}%></a></div>
+        <div class='paramtype'><%= item.description %></div>
+      </li>
     <% }); %>
-    </table>
-  </p>
+  </ul>
 <% } %>