Browse Source

Expand footer navigation mimicking the Bootstrap docs footer.

Adds

 * version information
 * links to the GitHub repository, issues and releases
 * links to the examples and options
 * a link to the 3.5.2 docs

to the footer as well as namespaced styles for the footer in general as well as all the above.
Florian Kissling 10 years ago
parent
commit
92052cb600
2 changed files with 55 additions and 11 deletions
  1. 18 10
      docs/_includes/footer.html
  2. 37 1
      docs/_includes/head.html

+ 18 - 10
docs/_includes/footer.html

@@ -1,11 +1,19 @@
-<footer>
-  Select2 is licensed under the
-  <a href="https://github.com/select2/select2/blob/master/LICENSE.md">
-    MIT license.
-  </a>
-  The documentation is licensed under
-  <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0.</a>
-  Maintained by
-  <a href="https://github.com/kevin-brown">Kevin Brown</a> and
-  <a href="https://github.com/ivaynberg">Igor Vaynberg</a>.
+<footer class="s2-docs-footer" role="contentinfo">
+  <div class="container">
+    <p>
+      Select2 is licensed under <a href="https://github.com/select2/select2/blob/master/LICENSE.md">MIT</a>, documentation under <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
+    </p>
+    <p>
+      Maintained by <a href="https://github.com/kevin-brown">Kevin Brown</a> and <a href="https://github.com/ivaynberg">Igor Vaynberg</a>.
+    </p>
+    <ul class="s2-docs-footer-links">
+      <li>Currently v4.0.0-rc.2</li>
+      <li><a href="https://github.com/select2/select2">GitHub</a></li>
+      <li><a href="./examples.html">Examples</a></li>
+      <li><a href="./options.html">Options</a></li>
+      <li><a href="http://select2.github.io/select2/">v3.5.2 docs</a></li>
+      <li><a href="https://github.com/select2/select2/issues">Issues</a></li>
+      <li><a href="https://github.com/select2/select2/releases">Releases</a></li>
+    </ul>
+  </div>
 </footer>
 </footer>

+ 37 - 1
docs/_includes/head.html

@@ -21,8 +21,44 @@
 
 
 <style type="text/css">
 <style type="text/css">
   body { font-size: 16px; }
   body { font-size: 16px; }
-  footer { background-color: #eee; margin-top: 1em; padding: 1em; text-align: center; }
+
+  /* Footer */
+  .s2-docs-footer {
+    border-top: 1px solid #E5E5E5;
+    color: #767676;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    margin-top: 100px;
+    text-align: center;
+  }
+  .s2-docs-footer-links {
+    padding-left: 0;
+    margin-top: 20px;
+  }
+  .s2-docs-footer-links li {
+    display: inline;
+    padding: 0 2px;
+  }
+  .s2-docs-footer-links li:after {
+    content: "·";
+    padding-left: 8px;
+  }
+  .s2-docs-footer-links li:first-child {
+    padding-left: 0;
+  }
+  .s2-docs-footer-links li:last-child:after {
+    content: "";
+    padding-left: 0;
+  }
+  @media (min-width: 768px) {
+    .s2-docs-footer p {
+      margin-bottom: 0;
+    }
+  }
+
   .navbar-inverse .navbar-brand { color: #fff; }
   .navbar-inverse .navbar-brand { color: #fff; }
+
+  /* anchor.js */
   .anchorjs-link {
   .anchorjs-link {
     float: left;
     float: left;
     width: 1em;
     width: 1em;