Fix flag docs, fix scroll to behavior

Author: jlukic

server/documents/collections/table.html.eco

@@ -30,45 +30,27 @@ themes      : ['Default', 'Basic', 'Classic', 'GitHub']
     </div>
     <table class="ui celled table">
       <thead>
-        <th>Header</th>
-        <th>Header</th>
-        <th>Header</th>
+        <th>Name</th>
+        <th>Age</th>
+        <th>Job</th>
       </thead>
       <tbody>
         <tr>
-          <td>
-            <div class="ui ribbon label">First</div>
-          </td>
-          <td>Cell</td>
-          <td>Cell</td>
+          <td data-label="Name">James</td>
+          <td data-label="Age">24</td>
+          <td data-label="Job">Engineer</td>
         </tr>
         <tr>
-          <td>Cell</td>
-          <td>Cell</td>
-          <td>Cell</td>
+          <td data-label="Name">Jill</td>
+          <td data-label="Age">26</td>
+          <td data-label="Job">Engineer</td>
         </tr>
         <tr>
-          <td>Cell</td>
-          <td>Cell</td>
-          <td>Cell</td>
+          <td data-label="Name">Elyse</td>
+          <td data-label="Age">24</td>
+          <td data-label="Job">Designer</td>
         </tr>
       </tbody>
-      <tfoot>
-        <th colspan="3">
-          <div class="ui right floated pagination menu">
-            <a class="icon item">
-              <i class="left chevron icon"></i>
-            </a>
-            <a class="item">1</a>
-            <a class="item">2</a>
-            <a class="item">3</a>
-            <a class="item">4</a>
-            <a class="icon item">
-              <i class="right chevron icon"></i>
-            </a>
-          </div>
-        </th>
-      </tfoot>
     </table>
   </div>
 
@@ -116,6 +98,22 @@ themes      : ['Default', 'Basic', 'Classic', 'GitHub']
           <td>Creatine is the reference compound for power improvement, with numbers from one meta-analysis to assess potency</td>
         </tr>
       </tbody>
+      <tfoot>
+        <th colspan="5">
+          <div class="ui right floated pagination menu">
+            <a class="icon item">
+              <i class="left chevron icon"></i>
+            </a>
+            <a class="item">1</a>
+            <a class="item">2</a>
+            <a class="item">3</a>
+            <a class="item">4</a>
+            <a class="icon item">
+              <i class="right chevron icon"></i>
+            </a>
+          </div>
+        </th>
+      </tfoot>
     </table>
   </div>
   <div class="another example">

server/documents/elements/flag.html.eco

@@ -495,7 +495,7 @@ type        : 'UI Element'
       <tr>
         <td><i class="united kingdom flag"></i></td>
         <td>United Kingdom</td>
-        <td>gb</td>
+        <td>gb uk</td>
         <td class="disabled"></td>
       </tr>
       <tr>

server/documents/hotfix.html

@@ -7,35 +7,29 @@
 type       : 'Library'
 ---
 
-<div class="ui container">
-
-<div class="ui button dropdown">
-  <span class="text">Choose Category</span>
-  <i class="dropdown icon"></i>
-  <div class="menu">
-    <div class="item">
-      <span class="text">Category 1</span>
-    </div>
+<div class="ui menu">
+  <div class="right menu">
     <div class="item">
-      <i class="dropdown icon"></i>
-      <span class="text">Category 2</span>
-      <div class="menu">
-        <div class="item">Item 2A</div>
-        <div class="item">Item 2B</div>
-        <div class="item">Item 2C</div>
-      </div>
-    </div>
-    <div class="item">
-      <i class="dropdown icon"></i>
-      <span class="text">Category 3</span>
-      <div class="menu">
-        <div class="item">Item 3A</div>
-        <div class="item">Item 3B</div>
-        <div class="item">Item 3C</div>
+      <div class="ui floating icon labeled button dropdown">
+        <i class="filter icon"></i>
+        <span class="text">Dropdown</span>
+        <div class="menu">
+          <div class="header">
+            <i class="filter icon"></i> Dropdown
+          </div>
+          <div class="item">
+            Loooooooooooooong item 1
+          </div>
+          <div class="item">
+            Item 2
+          </div>
+          <div class="item">
+            Item 3
+          </div>
+        </div>
       </div>
     </div>
   </div>
-</div>
 
 </div>
 <script>

server/files/javascript/docs.js

@@ -493,9 +493,10 @@ semantic.ready = function() {
         .addClass('active')
       ;
       $('html, body')
+        .stop()
         .animate({
           scrollTop: position
-        }, 500)
+        }, duration || 500)
       ;
       location.hash = '#' + id;
       event.stopImmediatePropagation();
@@ -1451,6 +1452,22 @@ semantic.ready = function() {
     detectAdBlock.onDetected(handler.showBeg);
   }
 
+  if(window.location.hash) {
+    var
+      $element = $(window.location.hash),
+      position = $element.offset().top + 10
+    ;
+    $element
+      .addClass('active')
+    ;
+    $('html, body')
+      .stop()
+      .animate({
+        scrollTop: position
+      }, 500)
+    ;
+  }
+
   handler.getMetadata();
 
 };