Merge pull request #111 from github/haacked/29-collapse-license-families

Group licenses together

_includes/license-overview.html

@@ -0,0 +1,49 @@
+<div class="license-family cf">
+  <div class="license-family-heading">
+    <h3 class="license-family-name"><a href="{{ page.permalink }}">{% if page.category %}{{ page.category }}{% else %}{{ page.title }}{% endif %}</a></h3>
+
+    <p class="license-family-description">{{ page.description }}</p>
+  </div>
+
+  <div class="license-details">
+    <div class="license-variations js-license-variations">
+      <!-- always show this div, even w/o variations, for proper spacing -->
+      {% if page.tab-slug %}
+      <ul class="nav-pills js-nav-pills">
+        {% for variation in site.pages %}
+          {% if variation.category and variation.category == page.category %}
+        <li{% if page.tab-slug == variation.tab-slug %} class="active"{% endif %}><a href="#{{ variation.tab-slug }}" data-selected-tab="variation-{{ variation.tab-slug }}">{{ variation.title }}</a></li>
+          {% endif %}
+        {% endfor %}
+      </ul>
+      {% endif %}
+    </div>
+    {% for variation in site.pages %}
+      {% if variation.category and variation.category == page.category %}
+    <div id="{{ variation.tab-slug }}" class="variation-tab variation-{{ variation.tab-slug }} js-variation-tab{% if page.tab-slug == variation.tab-slug %} active{% endif %}">
+      <table class='license-rules'>
+        <tr>
+        {% assign types = "required|permitted|forbidden" | split: "|" %}
+        {% for type in types %}
+          <th class="label">{{ type | capitalize }}</th>
+        {% endfor %}
+        </tr>
+        <tr>
+        {% for type in types %}
+          <td>
+            <ul class="license-{{ type }}">
+              {% for req in variation[type] %}
+                <li class="{{ req }}">{{ site.rules[type][req].label }}</li>
+              {% endfor %}
+            </ul>
+          </td>
+        {% endfor %}
+        </tr>
+      </table>
+      <p class="small"><a href="{{ variation.permalink }}">View full {{ variation.title }} license »</a></p>
+    </div>
+        {% endif %}
+    {% endfor %}
+  </div>
+</div>
+

css/application.css

@@ -123,8 +123,10 @@ h1 {
 
 h2 {
   color: #443a33;
-  font-family: Chivo, "Helvetica Neue", Helvetica, Arial, serif;
+  opacity: 0.8;
-  font-size: 18px;
+  font-family: 'Chivo', 'Helvetica Neue', Helvetica, Arial, serif;
+  font-size: 24px;
+/*  font-size: 18px; */
   font-weight: 900;
   line-height: 1.1;
   margin-top: 24px;
@@ -181,6 +183,7 @@ strong {
   line-height: 70px;
   margin-bottom: 45px;
   vertical-align: middle;
+  opacity: 1;
 }
 .home h2 span {
   color: #e9e6e2;
@@ -226,15 +229,53 @@ strong {
   margin-top: 20px;
 }
 
+.license-family {
+  clear: both;
+  margin-bottom: 50px;
+}
+
+.license-family-heading {
+  float: left;
+  width: 35%;
+}
+
+.license-details {
+  float: left;
+  width: 55%;
+  padding-left: 20px;
+}
+
+.license-variations {
+  height: 31px;
+  padding-top: 23px;
+  margin-left: -10px;
+}
+
+.license-family-name {
+  font-family: 'Chivo', 'Helvetica Neue', Helvetica, Arial, serif;
+  font-size: 28px;
+  font-weight: 900;
+  line-height: 1.1;
+}
+
+.license-family-description {
+  color: #5c5855;
+}
+
 .license-rules {
+  border-bottom: solid 1px #d9d7d2;
   font-size: 13px;
   line-height: 1.3;
-  margin-bottom: 40px;
+  margin-bottom: 12px;
   width: 100%;
 }
+.license-rules th,
+.license-rules td {
+  width: 33%;
+}
 .license-rules th {
-  border-bottom: solid 1px #d9d7d2;
+  font-size: 15px;
-  padding: 5px 10px 12px 10px;
+  padding: 5px 10px 5px 0;
   vertical-align: bottom;
 }
 .license-rules th.summary {
@@ -254,29 +295,19 @@ strong {
 .license-rules .name small a {
   font-size: 16px;
 }
-.license-rules .summary {
-  color: #5c5855;
-}
 .license-rules td {
-  border-bottom: solid 1px #e9e6e2;
+  padding: 4px 0 12px 0;
-  padding: 4px 10px;
+  vertical-align: top;
 }
 .license-rules .label {
-  border-right: solid 1px #d9d7d2;
   font-weight: bold;
 }
 .license-rules li {
   background-position: 0 1px;
   background-repeat: no-repeat;
   background-size: 12px 12px;
-  float: left;
-  display: -moz-inline-stack;
-  display: inline-block;
-  vertical-align: middle;
-  *vertical-align: auto;
-  zoom: 1;
-  *display: inline;
   margin-right: 15px;
+  margin-bottom: 5px;
   padding-left: 16px;
 }
 .license-rules li:hover {
@@ -291,9 +322,6 @@ strong {
 .license-forbidden li {
   background-image: url(../images/red-dot@2x.png);
 }
-.license-rules tr:nth-child(2n) td {
-  background-color: rgba(0, 0, 0, 0.02);
-}
 
 .license-rules-sidebar li {
   float: none;
@@ -395,6 +423,34 @@ strong {
   margin-left: 2em;
 }
 
+.nav-pills > li {
+  float: left;
+  display: block;
+  margin-right: 10px;
+}
+
+.nav-pills > li > a {
+  padding: 5px 10px;
+  border-radius: 3px;
+}
+
+.nav-pills > li.active > a {
+  background-color: #149ad4;
+  color: #f7f4ef;
+}
+
+.variation-tab {
+  display: none;
+}
+
+.variation-tab.active {
+  display: block;
+}
+
+.small {
+  font-size: 90%;
+}
+
 /* Qtip styles */
 .qtip-required {
   background-color: #d0ebf6 ! important;

javascripts/app.coffee

@@ -36,6 +36,7 @@ class Choosealicense
   constructor: ->
     @initTooltips()
     @initClipboard()
+    @initLicenseVariationNav()
 
   # Init tooltip action
   initTooltips: ->
@@ -92,5 +93,18 @@ class Choosealicense
   clipboardComplete: (client, args) ->
     @innerText = "Copied!"
 
+  # Initializes pill navigation for license variations
+  initLicenseVariationNav: ->
+    $(".js-nav-pills a").click (e) ->
+      selectedTab = $(this).data('selected-tab')
+      nav = $(this).closest('.js-nav-pills')
+      nav.find('li').removeClass('active')
+      nav.closest('.js-license-variations').siblings('.js-variation-tab').removeClass('active')
+
+      $(this).parent('li').addClass('active')
+      $('.' + selectedTab).addClass('active')
+
+      e.preventDefault()
+
 $ ->
   new Choosealicense()

javascripts/app.js

@@ -40,6 +40,7 @@
     function Choosealicense() {
       this.initTooltips();
       this.initClipboard();
+      this.initLicenseVariationNav();
     }
 
     Choosealicense.prototype.initTooltips = function() {
@@ -106,6 +107,19 @@
       return this.innerText = "Copied!";
     };
 
+    Choosealicense.prototype.initLicenseVariationNav = function() {
+      return $(".js-nav-pills a").click(function(e) {
+        var nav, selectedTab;
+        selectedTab = $(this).data('selected-tab');
+        nav = $(this).closest('.js-nav-pills');
+        nav.find('li').removeClass('active');
+        nav.closest('.js-license-variations').siblings('.js-variation-tab').removeClass('active');
+        $(this).parent('li').addClass('active');
+        $('.' + selectedTab).addClass('active');
+        return e.preventDefault();
+      });
+    };
+
     return Choosealicense;
 
   })();

licenses.html

@@ -4,34 +4,14 @@ permalink: licenses/
 class: license-types
 ---
 
-<h1>Featured</h1>
+<h1>Licenses</h1>
+
+<h2>Featured Licenses</h2>
 
 {% for page in site.pages %}
   {% if page.layout == "license" %}
     {% if page.featured %}
-    <table class="license-rules">
+      {% include license-overview.html %}
-      <tr>
-        <th class="name">
-          <a href="{{ page.permalink }}">{{ page.title }}</a>
-        </th>
-        <th class="summary">
-         {{ page.description }} <a href="{{ page.permalink }}">View full license »</a>
-        </th>
-      </tr>
-      {% assign types = "required|permitted|forbidden" | split: "|" %}
-      {% for type in types %}
-      <tr>
-        <td class="label">{{ type | capitalize }}</td>
-        <td>
-          <ul class="license-{{ type }}">
-            {% for req in page[type] %}
-              <li class="{{ req }}">{{ site.rules[type][req].label }}</li>
-            {% endfor %}
-          </ul>
-        </td>
-      </tr>
-      {% endfor %}
-    </table>
     {% endif %}
   {% endif %}
 {% endfor %}
@@ -44,30 +24,8 @@ class: license-types
 
 {% for page in site.pages %}
   {% if page.layout == "license" %}
-    {% if page.featured != true %}
+    {% if page.featured != true and page.hide-from-license-list != true %}
-    <table class="license-rules">
+      {% include license-overview.html %}
-      <tr>
-        <th class="name">
-          <a href="{{ page.permalink }}">{{ page.title }}</a>
-        </th>
-        <th class="summary">
-         {{ page.description }} <a href="{{ page.permalink }}">View full license »</a>
-        </th>
-      </tr>
-      {% assign types = "required|permitted|forbidden" | split: "|" %}
-      {% for type in types %}
-      <tr>
-        <td class="label">{{ type | capitalize }}</td>
-        <td>
-          <ul class="license-{{ type }}">
-            {% for req in page[type] %}
-              <li class="{{ req }}">{{ site.rules[type][req].label }}</li>
-            {% endfor %}
-          </ul>
-        </td>
-      </tr>
-      {% endfor %}
-    </table>
     {% endif %}
   {% endif %}
 {% endfor %}

licenses/agpl.txt

@@ -1,5 +1,8 @@
 ---
 title: Affero GPL
+category: GPL
+tab-slug: agpl
+hide-from-license-list: true
 layout: license
 permalink: /licenses/agpl/
 source: http://www.gnu.org/licenses/agpl-3.0.txt

licenses/apache.txt

@@ -1,5 +1,6 @@
 ---
 title: Apache v2 License
+category: Apache
 layout: license
 permalink: /licenses/apache/
 

licenses/artistic.txt

@@ -1,6 +1,7 @@
 ---
 layout: license
 title: Artistic License 2.0
+category: Artistic
 permalink: /licenses/artistic/
 source: http://www.perlfoundation.org/attachment/legal/artistic-2_0.txt
 

licenses/bsd-3-clause.txt

@@ -1,6 +1,9 @@
 ---
 layout: license
 title: BSD (3-Clause) License
+category: BSD
+tab-slug: bsd-3
+hide-from-license-list: true
 permalink: /licenses/bsd-3-clause/
 
 how: Create a text file (typically named LICENSE or LICENSE.txt) in the root of your source code and copy the text of the license into the file. Replace [year] with the current year and [fullname] with the name (or names) of the copyright holders. Replace {organization} with the organization, if any, that sponsors this work.

licenses/bsd.txt

@@ -1,6 +1,9 @@
 ---
 layout: license
 title: BSD 2-Clause license
+category: BSD
+tab-slug: bsd
+hide-from-license-list: false
 permalink: /licenses/bsd/
 
 description: A permissive license that comes in two variants, the <a href="/licenses/bsd">BSD 2-Clause</a> and <a href="/licenses/bsd-3-clause">BSD 3-Clause</a>. Both have very minute differences to the MIT license.

licenses/cc0.txt

@@ -1,8 +1,11 @@
 ---
 layout: license
+title: CC0 1.0 Universal
+category: Public Domain Dedication
+tab-slug: cc0
 permalink: /licenses/cc0/
 class: license-types
-title: Public Domain Dedication (CC0)
+hide-from-license-list: true
 filename: LICENSE
 
 source: http://creativecommons.org/publicdomain/zero/1.0/

licenses/eclipse.txt

@@ -1,6 +1,7 @@
 ---
 layout: license
 title: Eclipse Public License v1.0
+category: Eclipse
 permalink: /licenses/eclipse/
 
 description: This commercially-friendly copyleft license provides the ability to commercially license binaries; a modern royalty-free patent license grant; and the ability for linked works to use other licenses, including commercial ones.

licenses/gpl-v2.txt

@@ -1,9 +1,14 @@
 ---
 title: GPL v2
+category: GPL
+tab-slug: gpl-v2
+hide-from-license-list: false
 layout: license
 permalink: /licenses/gpl-v2/
 source: http://www.gnu.org/licenses/gpl-2.0.txt
 
+description: GPL is the most widely used free software license and has a strong copyleft requirement. When distributing derived works, the source code of the work must be made available under the same license. There are multiple variants of the GPL each with different requirements.
+
 featured: true
 
 how: Create a text file (typically named LICENSE or LICENSE.txt) in the root of your source code and copy the text of the license into the file.

licenses/gpl-v3.txt

@@ -1,11 +1,12 @@
 ---
 title: GPL v3
+category: GPL
+tab-slug: gpl-v3
+hide-from-license-list: true
 layout: license
 permalink: /licenses/gpl-v3/
 source: http://www.gnu.org/licenses/gpl-3.0.txt
 
-description: GPL is the most widely used free software license and has a strong copyleft requirement. When distributing derived works, the source code of the work must be made available under the same license.
-
 how: Create a text file (typically named LICENSE or LICENSE.txt) in the root of your source code and copy the text of the license into the file.
 
 note: The Free Software Foundation recommends taking the additional step of adding a boilerplate notice to the top of each file. The boilerplate can be found at the end of the license.

licenses/lgpl-v2.1.txt

@@ -1,10 +1,12 @@
 ---
 layout: license
 title: LGPL v2.1
+category: LGPL
+tab-slug: lgpl-v2.1
 permalink: /licenses/lgpl-v2.1/
 source: http://www.gnu.org/licenses/lgpl-2.1.txt
 
-description: Primarily used for software libraries, LGPL requires that derived works be licensed under the same license, but works that only link to it do not fall under this restriction.
+description: Primarily used for software libraries, LGPL requires that derived works be licensed under the same license, but works that only link to it do not fall under this restriction. There are two commonly used versions of the LGPL.
 
 how: Create a text file (typically named LICENSE or LICENSE.txt) in the root of your source code and copy the text of the license into the file.
 

licenses/lgpl-v3.txt

@@ -1,6 +1,9 @@
 ---
 layout: license
 title: LGPL v3
+category: LGPL
+tab-slug: lgpl-v3
+hide-from-license-list: true
 permalink: /licenses/lgpl-v3/
 source: http://www.gnu.org/licenses/lgpl-3.0.txt
 

licenses/mit.txt

@@ -1,6 +1,7 @@
 ---
 layout: license
 title: MIT License
+category: MIT
 permalink: /licenses/mit/
 source: http://opensource.org/licenses/MIT
 

licenses/mozilla.txt

@@ -1,6 +1,7 @@
 ---
 layout: license
 title: Mozilla Public License Version 2.0
+category: Mozilla
 permalink: /licenses/mozilla/
 source: http://www.mozilla.org/MPL/2.0/
 

licenses/no-license.html

@@ -1,6 +1,7 @@
 ---
 layout: license
 permalink: /licenses/no-license/
+category: No License
 class: license-types
 title: No License
 

licenses/unlicense.txt

@@ -1,8 +1,10 @@
 ---
 layout: license
+title: The Unlicense
+category: Public Domain Dedication
+tab-slug: unlicense
 permalink: /licenses/unlicense/
 class: license-types
-title: Public Domain Dedication (Unlicense)
 filename: UNLICENSE
 
 source: http://unlicense.org/UNLICENSE