Changed html structure and css for sections

Formatter/AbstractFormatter.php

@@ -137,12 +137,13 @@ abstract class AbstractFormatter implements FormatterInterface
                     if($section) {
                         $processedCollection[$section][$path][] = $this->processAnnotation($annotation);
                     } else {
-                        $processedCollection['others'][$path][] = $this->processAnnotation($annotation);
+                        $processedCollection['_others'][$path][] = $this->processAnnotation($annotation);
                     }
                 }
             }
         }
 
+            ksort($processedCollection);
         return $processedCollection;
     }
 }

Resources/public/css/screen.css

@@ -169,7 +169,16 @@ table tbody tr:last-child td {
   font-size: 0.9em;
 }
 
+#section {
+  border: 1px solid #ddd;
+  background: #f8f8f8;
+  padding: 5px 20px;
+  margin-bottom: 15px;
+}
+
 li.resource {
+  width: 100%;
+  margin-bottom: 10px;
   border-bottom: 1px solid #dddddd;
 }
 li.resource:last-child {
@@ -226,7 +235,7 @@ li.operation {
   clear: both;
   overflow: hidden;
   display: block;
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
   padding: 0 0 0 0;
 }
 li.operation div.heading {

Resources/views/resources.html.twig

@@ -2,13 +2,14 @@
 
 {% block content %}
     {% for section, sections in resources  %}
-        {% if section != 'others' %}
+        {% if section != '_others' %}
+            <div id="section">
             <h1>{{ section }}</h1>
         {% endif %}
         {% for resource, methods in sections %}
             <li class="resource">
                 <div class="heading">
-                    {% if section == 'others' and resource == 'others' %}
+                    {% if section == '_others' and resource != 'others' %}
                         <h2>{{ resource }}</h2>
                     {% endif %}
                     {% if resource != 'others' %}
@@ -26,5 +27,8 @@
                 </ul>
             </li>
         {% endfor %}
+        {% if section != '_others' %}
+            </div>
+            {% endif %}
     {% endfor %}
 {% endblock content %}