Use styled HTML for documentation widgets

[#55151702]

_includes/widget_template.html

@@ -1,27 +1,29 @@
 <script type="text/html" id="project-documentation-widget-template">
-    <h3><%= name %></h3>
-    <table>
-        <thead>
-            <tr>
-                <th>Release</th>
-                <th>Documentation</th>
-            </tr>
-        </thead>
-        <tbody>
-            <% _.each(releases, function(release) { %>
-            <tr>
-                <td>
-                    <%= release.fullName %>
-                    <i class="<%= release.statusIconClass() %>"></i>
-                </td>
-                <td>
-                    <a href='<%= release.refDocUrl %>'>Reference</a>
-                    <a href='<%= release.apiDocUrl %>'>API</a>
-                </td>
-            </tr>
-            <% }); %>
-        </tbody>
-    </table>
+    <div class="right-pane-widget--container no-top-border project-documentation--container">
+        <div class="item-dropdown-widget">
+            <div class="item-dropdown--title"><%= name %></div>
+            <div class="item--dropdown">
+                <div class="item--body">
+                    <div class="item--body-title">
+                        <div class="item--left-column">Release</div>
+                        <div class="item--right-column">Documentation</div>
+                    </div>
+                    <% _.each(releases, function(release) { %>
+                    <div class="item--body--version">
+                        <div class="item--left-column">
+                            <p><%= release.fullName %></p>
+                            <div class="icon <%= release.statusIconClass() %>"></div>
+                        </div>
+                        <div class="item--right-column">
+                            <a href='<%= release.refDocUrl %>' class="docs-link reference-link">Reference</a>
+                            <a href='<%= release.apiDocUrl %>' class="docs-link api-link">API</a>
+                        </div>
+                    </div>
+                    <% }); %>
+                </div>
+            </div>
+        </div>
+    </div>
 </script>
 
 <script type="text/html" id="project-quickstart-selector-template">

index-common.html

@@ -113,48 +113,8 @@ title: Your Project Name Here
       </div>
     </div>
     <div class="span4">
-      <div class="right-pane-widget--container no-top-border project-documentation--container">
-        <div class="item-dropdown-widget">
-          <div class="item-dropdown--title">Spring Data JPA Documentation</div>
-          <div class="item--dropdown">
-            <div class="item--body">
-              <div class="item--body-title">
-                <div class="item--left-column">Release</div>
-                <div class="item--right-column">Documentation</div>
-              </div>
-              <div class="item--body--version">
-                <div class="item--left-column">
-                  <p>1.4.0.RC1</p>
-                  <div class="icon icon-pre-release"></div>
-                </div>
-                <div class="item--right-column">
-                  <a href="#" class="docs-link reference-link">Reference</a>
-                  <a href="#" class="docs-link api-link">API</a>
-                </div>
-              </div>
-              <div class="item--body--version">
-                <div class="item--left-column">
-                  <p>1.3.4</p>
-                  <div class="icon icon-current-version"></div>
-                </div>
-                <div class="item--right-column">
-                  <a href="#" class="docs-link reference-link">Reference</a>
-                  <a href="#" class="docs-link api-link">API</a>
-                </div>
-              </div>
-              <div class="item--body--version">
-                <div class="item--left-column">
-                  <p>1.2.1</p>
-                </div>
-                <div class="item--right-column">
-                  <a href="#" class="docs-link reference-link">Reference</a>
-                  <a href="#" class="docs-link api-link">API</a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+        {% include documentation.html %}
+
       <div class="right-pane-widget--container no-top-border">
         <div class="project-sub-link--wrapper">
           <div class="project-sub-link"></div>