From e524e5b542dc059756fc28f22bae133cfbd0bd7b Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Mon, 20 Oct 2014 14:22:34 -0600
Subject: [PATCH 01/14] Adding explaination for other sections

---
 src/partials/doap-entry.jade | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/partials/doap-entry.jade b/src/partials/doap-entry.jade
index 3a9c1c6..11958b1 100644
--- a/src/partials/doap-entry.jade
+++ b/src/partials/doap-entry.jade
@@ -151,6 +151,9 @@ form#doap-form(data-abide="ajax")
               a.next.button(href="#") Next Page >>
         section#panel-3.content(role="tabpanel", aria-hidden="true")
           .small-12.columns
+            .row
+              p
+                | Use this page to provide details of recent releases. There's no need to provide every single release for the project. For example, you could provide the latest GA release, the latest early-access release from an upcoming GA release and maybe the latest GA release that is available in a current product. If don't have any recent releases, or do not wish to add releases, there is nothing to fill out.
             #insert-version-container.container
             .row
               a#addVersion.button(href="#") Add Another Version
@@ -159,6 +162,9 @@ form#doap-form(data-abide="ajax")
               a.next.button(href="#") Next Page >>
         section#panel-4.content(role="tabpanel", aria-hidden="true")
           .small-12.columns
+            .row
+              p
+                | Use this page to provide details of specifications the project implements or uses. For example, a JSR number if the project implements it, or an OSIS or IEEE specification used in the project. If don't have any specifications being used or implemented, or do not wish to add them, there is nothing to fill out.
             #insert-spec-container.container
             .row
               a#addSpec.button(href="#") Add Another Spec
@@ -167,6 +173,9 @@ form#doap-form(data-abide="ajax")
               a.next.button(href="#") Next Page >>
         section#panel-5.content(role="tabpanel", aria-hidden="true")
           .small-12.columns
+            .row
+              p
+                | Use this page to add any social media services your project uses. If your project doesn't use social media, or you do not wish to add them, there is nothing to fill out.
             #insert-account-container.container
             .row
               a#addOnlineAccount.button(herf="#") Add Another Online Account

From dde9e6d6d28d4ba9de0ea4cc3df1790b5ff10e11 Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Mon, 20 Oct 2014 15:44:18 -0600
Subject: [PATCH 02/14] Switching layout to be standard for other tabs

Versions, Specs and Social Media tabs all look like people. This should
create a consistent UX for people.
---
 src/form.jade                |  6 -----
 src/partials/accounts.jade   | 41 +++++++++++++++++++++++++++++++
 src/partials/doap-entry.jade | 47 +++++-------------------------------
 src/partials/people.jade     | 28 +++++++++++++++++++++
 src/partials/specs.jade      | 42 ++++++++++++++++++++++++++++++++
 src/partials/versions.jade   | 18 ++++++++++++++
 src/scripts/doap-form.js     | 28 +--------------------
 src/scripts/startup.js       |  4 +--
 src/styles/app.scss          |  2 +-
 src/templates/account.mst    | 14 -----------
 src/templates/spec.mst       | 16 ------------
 src/templates/version.mst    | 17 -------------
 12 files changed, 138 insertions(+), 125 deletions(-)
 create mode 100644 src/partials/accounts.jade
 create mode 100644 src/partials/people.jade
 create mode 100644 src/partials/specs.jade
 create mode 100644 src/partials/versions.jade
 delete mode 100644 src/templates/account.mst
 delete mode 100644 src/templates/spec.mst
 delete mode 100644 src/templates/version.mst

diff --git a/src/form.jade b/src/form.jade
index fb9d4ef..14ad6a4 100644
--- a/src/form.jade
+++ b/src/form.jade
@@ -9,12 +9,6 @@ html(lang="en")
     include partials/doap-entry.jade
     script(id="rdf_template" type="text/html")
       include templates/rdf.mst
-    script(id="version_template" type="text/html")
-      include templates/version.mst
-    script(id="spec_template" type="text/html")
-      include templates/spec.mst
-    script(id="account_template" type="text/html")
-      include templates/account.mst
     script(src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js")
     script(src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js")
     script(src="scripts/all.js")
diff --git a/src/partials/accounts.jade b/src/partials/accounts.jade
new file mode 100644
index 0000000..fad2e04
--- /dev/null
+++ b/src/partials/accounts.jade
@@ -0,0 +1,41 @@
+.small-6.columns
+  label Service URL
+    small Required
+    input(type="url", name="serviceHomepage", placeholder="http://twitter.com", required="")
+  label Account Name
+    small Required
+    input(type="text", name="accountName", required="")
+  a#addAccount.button(href="#") Add Account
+.small-6.columns
+  label Accounts Added
+    select.accounts-container#accounts-container(name="accounts-container", multiple="")
+  button#removeAccount.remove.button(type="button") Remove
+// -
+  .small-6columns
+    .input-container
+      label First Name
+        small required
+        input#first-name(type="text", name="first-name", placeholder="First Name")
+    .input-container
+      label Last Name
+        small required
+        input#last-name(type="text", name="last-name", placeholder="Last Name")
+    .input-container
+      label JBoss Community Account
+        input#community-account(type="text", name="community-account", placeholder="JBoss Community Account Username")
+    .input-container
+      label Role within the project (must have at least one Lead)
+        small required
+        select#role(name="role")
+          option(value="") Select one
+          option(value="lead") Lead
+          option(value="documenter") Documenter
+          option(value="tester") Tester
+          option(value="developer") Developer
+          option(value="helper") Helper
+          option(value="translator") Translator
+    a#addPerson.button(href="#") Add This Person
+  .small-6.columns
+    label(for="people-container") People Added
+  select.people-container#people-container(name="people-container", multiple="")
+  button#removePerson.button(type="button") Remove
diff --git a/src/partials/doap-entry.jade b/src/partials/doap-entry.jade
index 11958b1..61baab3 100644
--- a/src/partials/doap-entry.jade
+++ b/src/partials/doap-entry.jade
@@ -118,34 +118,7 @@ form#doap-form(data-abide="ajax")
             .small-3.columns.small-centered.end.centered
               a.next.button(href="#") Next Page >>
         section#panel-2.content(role="tabpanel", aria-hidden="true")
-          .small-6.columns
-            .input-container
-              label First Name
-                small required
-                input#first-name(type="text", name="first-name", placeholder="First Name")
-            .input-container
-              label Last Name
-                small required
-                input#last-name(type="text", name="last-name", placeholder="Last Name")
-            .input-container
-              label JBoss Community Account
-                input#community-account(type="text", name="community-account", placeholder="JBoss Community Account Username")
-            .input-container
-              label Role within the project (must have at least one Lead)
-                small required
-                select#role(name="role")
-                  option(value="") Select one
-                  option(value="lead") Lead
-                  option(value="documenter") Documenter
-                  option(value="tester") Tester
-                  option(value="developer") Developer
-                  option(value="helper") Helper
-                  option(value="translator") Translator
-            a#addPerson.button(href="#") Add This Person
-          .small-6.columns
-            label(for="people-container") People Added
-            select.people-container#people-container(name="people-container", multiple="")
-            button#removePerson.button(type="button") Remove
+          include people.jade
           .row
             .small-3.columns.small-centered.end.centered
               a.next.button(href="#") Next Page >>
@@ -154,31 +127,23 @@ form#doap-form(data-abide="ajax")
             .row
               p
                 | Use this page to provide details of recent releases. There's no need to provide every single release for the project. For example, you could provide the latest GA release, the latest early-access release from an upcoming GA release and maybe the latest GA release that is available in a current product. If don't have any recent releases, or do not wish to add releases, there is nothing to fill out.
-            #insert-version-container.container
-            .row
-              a#addVersion.button(href="#") Add Another Version
+          include versions.jade
           .row
             .small-3.columns.small-centered.end.centered
               a.next.button(href="#") Next Page >>
         section#panel-4.content(role="tabpanel", aria-hidden="true")
           .small-12.columns
-            .row
               p
                 | Use this page to provide details of specifications the project implements or uses. For example, a JSR number if the project implements it, or an OSIS or IEEE specification used in the project. If don't have any specifications being used or implemented, or do not wish to add them, there is nothing to fill out.
-            #insert-spec-container.container
-            .row
-              a#addSpec.button(href="#") Add Another Spec
-          .row
-            .small-3.columns.small-centered.end.centered
-              a.next.button(href="#") Next Page >>
+          include specs.jade
+          .small-3.columns.small-centered.end.centered
+            a.next.button(href="#") Next Page >>
         section#panel-5.content(role="tabpanel", aria-hidden="true")
           .small-12.columns
             .row
               p
                 | Use this page to add any social media services your project uses. If your project doesn't use social media, or you do not wish to add them, there is nothing to fill out.
-            #insert-account-container.container
-            .row
-              a#addOnlineAccount.button(herf="#") Add Another Online Account
+          include accounts.jade
           .row
             .small-3.columns.small-centered.end.centered
               button#submit-button.button(type="submit") Generate DOAP
diff --git a/src/partials/people.jade b/src/partials/people.jade
new file mode 100644
index 0000000..65dc4dc
--- /dev/null
+++ b/src/partials/people.jade
@@ -0,0 +1,28 @@
+.small-6.columns
+  .input-container
+    label First Name
+      small required
+      input#first-name(type="text", name="first-name", placeholder="First Name")
+  .input-container
+    label Last Name
+      small required
+      input#last-name(type="text", name="last-name", placeholder="Last Name")
+  .input-container
+    label JBoss Community Account
+      input#community-account(type="text", name="community-account", placeholder="JBoss Community Account Username")
+  .input-container
+    label Role within the project (must have at least one Lead)
+      small required
+      select#role(name="role")
+        option(value="") Select one
+        option(value="lead") Lead
+        option(value="documenter") Documenter
+        option(value="tester") Tester
+        option(value="developer") Developer
+        option(value="helper") Helper
+        option(value="translator") Translator
+  a#addPerson.add.button(href="#") Add This Person
+.small-6.columns
+  label People Added
+    select.people-container#people-container(name="people-container", multiple="")
+  button#removePerson.remove.button(type="button") Remove
diff --git a/src/partials/specs.jade b/src/partials/specs.jade
new file mode 100644
index 0000000..b19344a
--- /dev/null
+++ b/src/partials/specs.jade
@@ -0,0 +1,42 @@
+.small-6.columns
+  label Name
+    small Required
+    input(type="text", name="specName", placeholder="Spec Name", required="")
+  label Description
+    textarea(name="specDecs")
+  label URL
+    input(type="url", name="seeAlsoURL")
+  a#addSpec.add.button(href="#") Add This Spec
+.small-6.columns
+  label Specs Added
+    select.specs-container#specs-container(name="specs-container", multiple="")
+  button#removeSpec.remove.button(type="button") Remove
+//-
+  .small6.columns
+    .input-container
+      label First Name
+        small required
+        input#first-name(type="text", name="first-name", placeholder="First Name")
+    .input-container
+      label Last Name
+        small required
+        input#last-name(type="text", name="last-name", placeholder="Last Name")
+    .input-container
+      label JBoss Community Account
+        input#community-account(type="text", name="community-account", placeholder="JBoss Community Account Username")
+    .input-container
+      label Role within the project (must have at least one Lead)
+        small required
+        select#role(name="role")
+          option(value="") Select one
+          option(value="lead") Lead
+          option(value="documenter") Documenter
+          option(value="tester") Tester
+          option(value="developer") Developer
+          option(value="helper") Helper
+          option(value="translator") Translator
+    a#addPerson.button(href="#") Add This Person
+  .small-6.columns
+    label(for="people-container") People Added
+    select.people-container#people-container(name="people-container", multiple="")
+    button#removePerson.button(type="button") Remove
diff --git a/src/partials/versions.jade b/src/partials/versions.jade
new file mode 100644
index 0000000..e079903
--- /dev/null
+++ b/src/partials/versions.jade
@@ -0,0 +1,18 @@
+.small-6.columns
+  .input-container
+    label Release Name
+      input(type="text", name="releaseName", placeholder="Name")
+  .input-container
+    label Revision Number
+      small Required
+      input(type="text", name="revision", required="")
+  .input-container
+    label Created Date
+      small Required
+      input(type="date", name="created", required="", placeholder="YYYY-MM-DD")
+  a#addVersion.add.button(href="#") Add This Version
+.small-6.columns
+  label Versions Added
+    select.versions-container#versions-container(name="versions-container", multiple="")
+  button#removeVersion.remove.button(type="button") Remove
+
diff --git a/src/scripts/doap-form.js b/src/scripts/doap-form.js
index 66f80ff..3643d2b 100644
--- a/src/scripts/doap-form.js
+++ b/src/scripts/doap-form.js
@@ -1,24 +1,3 @@
-// Event listener to add a new version
-$('#addVersion').on('click', function(event) {
-  event.preventDefault();
-  $('#insert-version-container').append($('#version_template').text());
-  bindEventForRemoveButtons();
-});
-
-// Event listener to add a new spec
-$('#addSpec').on('click', function(event) {
-  event.preventDefault();
-  $('#insert-spec-container').append($('#spec_template').text());
-  bindEventForRemoveButtons();
-});
-
-// Event listener to add a new spec
-$('#addOnlineAccount').on('click', function(event) {
-  event.preventDefault();
-  $('#insert-account-container').append($('#account_template').text());
-  bindEventForRemoveButtons();
-}); 
-
 $('#addPerson').on('click', function(event) {
   var firstName = $('#first-name'),
       lastName = $('#last-name'),
@@ -60,6 +39,7 @@ $('#addPerson').on('click', function(event) {
   }
 });
 
+// TODO: generify this
 $('#removePerson').on('click', function(event) {
   event.preventDefault();
   $('#people-container :selected').each(function() {this.remove();});
@@ -208,9 +188,3 @@ $('#repositorytype').on('change', function(event) {
   } 
 });
 
-function bindEventForRemoveButtons() {
-  $('.remove-item').on('click', function(event) {
-    $(event.target).parent().remove();
-  });
-}
-
diff --git a/src/scripts/startup.js b/src/scripts/startup.js
index 6b47928..b17997f 100644
--- a/src/scripts/startup.js
+++ b/src/scripts/startup.js
@@ -2,9 +2,6 @@ $(document).foundation();
 hljs.initHighlightingOnLoad();
 
 // Give them one to fill in
-$('#addVersion').trigger('click');
-$('#addSpec').trigger('click');
-$('#addOnlineAccount').trigger('click');
 $('a.next.button').on('click', function(event) {
   event.preventDefault();
   event.stopPropagation();
@@ -12,3 +9,4 @@ $('a.next.button').on('click', function(event) {
   var nextTab = $('li.tab-title.active').next();
   Foundation.libs.tab.toggle_active_tab(nextTab);
 });
+
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 56337ca..63d9c7a 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -23,7 +23,7 @@ button[type="submit"] {
   }
 }
 
-.people-container {
+.people-container, .accounts-container, .specs-container, .versions-container {
   height: 16rem;
 }
 
diff --git a/src/templates/account.mst b/src/templates/account.mst
deleted file mode 100644
index 8993437..0000000
--- a/src/templates/account.mst
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="row">
-  <fieldset>
-    <legend>Account</legend>
-    <label for="serviceHomepage">Service URL
-      <small>Required</small>
-      <input type="url" name="serviceHomepage" placeholder="http://twitter.com" required>
-    </label>
-    <label for="accountName">Account Name
-      <small>Required</small>
-      <input type="text" name="accountName" required>
-    </label>
-    <a class="button remove-item right" href="#">Remove</a>
-  </fieldset>
-</div>
diff --git a/src/templates/spec.mst b/src/templates/spec.mst
deleted file mode 100644
index 94cd11d..0000000
--- a/src/templates/spec.mst
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="row">
-  <fieldset>
-    <legend>Specification</legend>
-    <label for="specName">Name
-      <small>Required</small>
-      <input type="text" name="specName" placeholder="Spec Name" required>
-    </label>
-    <label for="specDesc">Description
-      <textarea name="specDecs"></textarea>
-    </label>
-    <label for="seeAlsoURL">URL
-      <input type="url" name="seeAlsoURL">
-    </label>
-    <a class="button remove-item right" href="#">Remove</a>
-  </fieldset>
-</div>
diff --git a/src/templates/version.mst b/src/templates/version.mst
deleted file mode 100644
index 9e343c8..0000000
--- a/src/templates/version.mst
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="row">
-  <fieldset>
-    <legend>Version</legend>
-    <label>Release Name
-      <input type="text" name="releaseName" placeholder="Name">
-    </label>
-    <label for="version">Revision Number
-      <small>Required</small>
-      <input type="text" name="revision" required>
-    </label>
-    <label for="created">Created Date
-      <small>Required</small>
-      <input type="date" name="created" required placeholder="YYYY-MM-DD">
-    </label>
-    <a class="button remove-item right" href="#">Remove</a>
-  </fieldset>
-</div>

From df20259c3292e21c1297b00904ea0efd66309034 Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Mon, 20 Oct 2014 15:45:07 -0600
Subject: [PATCH 03/14] Fixing error handling

---
 gulpfile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gulpfile.js b/gulpfile.js
index 4e9b2d6..8a0277c 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -17,7 +17,7 @@ var gulp           = require('gulp'),
     jade           = require('gulp-jade');
 
 function errorLog(error) {
-  console.error.bind(error);
+  console.log(error);
   this.emit('end');
 }
 

From b03039d18bcfbd8b95ba72273bc15775333a089d Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Tue, 21 Oct 2014 10:04:14 -0600
Subject: [PATCH 04/14] Adding versions to the container

---
 src/partials/versions.jade |  6 +--
 src/scripts/doap-form.js   | 76 +++++++++++++++++---------------------
 src/scripts/util.js        | 23 ++++++++++++
 3 files changed, 59 insertions(+), 46 deletions(-)
 create mode 100644 src/scripts/util.js

diff --git a/src/partials/versions.jade b/src/partials/versions.jade
index e079903..fd7bffb 100644
--- a/src/partials/versions.jade
+++ b/src/partials/versions.jade
@@ -1,15 +1,15 @@
 .small-6.columns
   .input-container
     label Release Name
-      input(type="text", name="releaseName", placeholder="Name")
+      input#version-release-name(type="text", name="release-name", placeholder="Name")
   .input-container
     label Revision Number
       small Required
-      input(type="text", name="revision", required="")
+      input#version-revision(type="text", name="revision", required="")
   .input-container
     label Created Date
       small Required
-      input(type="date", name="created", required="", placeholder="YYYY-MM-DD")
+      input#version-created(type="date", name="created", required="", placeholder="YYYY-MM-DD")
   a#addVersion.add.button(href="#") Add This Version
 .small-6.columns
   label Versions Added
diff --git a/src/scripts/doap-form.js b/src/scripts/doap-form.js
index 3643d2b..5517852 100644
--- a/src/scripts/doap-form.js
+++ b/src/scripts/doap-form.js
@@ -13,36 +13,36 @@ $('#addPerson').on('click', function(event) {
         '" data-community="' + communityAccount.val() + '">' + firstName.val() + ' ' + lastName.val() + '</option>');
 
     // Clear the values
-    $.each([firstName, lastName, communityAccount, role], function(entry) {
-      this.val('');
-      this.removeAttr('data-invalid');
-      this.removeAttr('aria-invalid');
-      this.removeClass('error');
-      this.parent().removeClass('error');
-    });
+    $.each([firstName, lastName, communityAccount, role], clearField);
   } else {
-    if (firstName.val().length === 0) {
-      firstName.attr('data-invalid', '');
-      firstName.attr('aria-invalid', true);
-      firstName.parent().addClass("error");
-    } 
-    if (lastName.val().length === 0) {
-      lastName.attr('data-invalid', '');
-      lastName.attr('aria-invalid', true);
-      lastName.parent().addClass("error");
-    } 
-    if (role.val().length === 0) {
-      role.attr('data-invalid', '');
-      role.attr('aria-invalid', true);
-      role.parent().addClass("error");
-    }
+    $.each([firstName, lastName, role], invalidateField);
   }
 });
 
-// TODO: generify this
-$('#removePerson').on('click', function(event) {
+$('#addVersion').on('click', function(event) {
+  var releaseName = $('#version-release-name'),
+      revision = $('#version-revision'),
+      created = $('#version-created');
+
   event.preventDefault();
-  $('#people-container :selected').each(function() {this.remove();});
+
+  if (revision.val().length !== 0 && created.val().length !== 0) {
+    // Add to the selection
+    $('#versions-container').append('<option data-release-name="' + releaseName.val() + 
+        '" data-revision="' + revision.val() +'" data-created="' + created.val() + 
+        '">' + revision.val() + ' ' + releaseName.val() + '</option>');
+
+    // Clear the values
+    $.each([releaseName, revision, created], clearField);
+  } else {
+    $.each([revision, created], invalidateField);
+  }
+});
+
+$('.remove.button').on('click', function(event) {
+  event.preventDefault();
+  event.stopImmediatePropagation();
+  $(event.target).siblings().children().find(':selected').each(function() {this.remove();});
 });
 
 // Event listener to the submit button to generate the DOAP content based 
@@ -110,6 +110,7 @@ var build_doap = function(event) {
     } 
   });
 
+  // TODO: do this for versions, specs, accounts
   // Adding people
   $("#people-container > option").each(function() {
     var elm = $(this),
@@ -125,15 +126,12 @@ var build_doap = function(event) {
       o[role].push(person);
   });
 
-  if (o.releases.length === 1 && Object.keys(o.releases[0]).length === 0) {
-    o.releases = [];
-  }
-  if (o.specs.length === 1 && Object.keys(o.specs[0]).length === 0) {
-    o.specs = [];
-  }
-  if (o.accounts.length === 1 && Object.keys(o.accounts[0]).length === 0) {
-    o.accounts = [];
-  }
+  $.each(['releases', 'specs', 'accounts'], function() {
+    if (o[this].length === 1 && Object.keys(o[this][0]).length === 0) {
+      o[this] = [];
+    }
+  });
+
   var downloadButton = $('#download-button'),
       template = $('#rdf_template').text(),
       doapModal = $('#doap-modal'),
@@ -146,15 +144,7 @@ var build_doap = function(event) {
   return false;
 }; 
 
-$('#doap-form').on('submit valid valid.fndtn.abide', build_doap);
-
-// Utility function to check the existance of all needles with the haystack
-function containsAll(needles, haystack) {
-  for(var i = 0 , len = needles.length; i < len; i++){
-    if($.inArray(needles[i], haystack) === -1) return false;
-  }
-  return true;
-}
+$('#doap-form').on('submit valid valid.fndtn.abide', build_doap); 
 
 $('#repositorytype').on('change', function(event) {
   // Hide everything so we don't get the wrong items if they change
diff --git a/src/scripts/util.js b/src/scripts/util.js
new file mode 100644
index 0000000..8e05df3
--- /dev/null
+++ b/src/scripts/util.js
@@ -0,0 +1,23 @@
+// Utility function to check the existance of all needles with the haystack
+function containsAll(needles, haystack) {
+  for(var i = 0 , len = needles.length; i < len; i++){
+    if($.inArray(needles[i], haystack) === -1) return false;
+  }
+  return true;
+}
+
+function clearField(index,value) {
+  value.val('');
+  value.removeAttr('data-invalid');
+  value.removeAttr('aria-invalid');
+  value.removeClass('error');
+  value.parent().removeClass('error');
+}
+
+function invalidateField(index,field) {
+  if (field.val().length === 0) {
+    field.attr('data-invalid', '');
+    field.attr('aria-invalid', true);
+    field.parent().addClass("error");
+  } 
+}

From 66009b986ecc8b48d95b538fdb52e16363903389 Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Tue, 21 Oct 2014 10:10:46 -0600
Subject: [PATCH 05/14] Adding specs to their container

---
 src/partials/specs.jade  | 36 ++++--------------------------------
 src/scripts/doap-form.js | 20 ++++++++++++++++++++
 2 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/src/partials/specs.jade b/src/partials/specs.jade
index b19344a..77a4efc 100644
--- a/src/partials/specs.jade
+++ b/src/partials/specs.jade
@@ -1,42 +1,14 @@
 .small-6.columns
   label Name
     small Required
-    input(type="text", name="specName", placeholder="Spec Name", required="")
+    input#spec-name(type="text", name="specName", placeholder="Spec Name", required="")
   label Description
-    textarea(name="specDecs")
+    textarea#spec-decs(name="specDecs")
   label URL
-    input(type="url", name="seeAlsoURL")
+    input#spec-url(type="url", name="seeAlsoURL")
   a#addSpec.add.button(href="#") Add This Spec
 .small-6.columns
   label Specs Added
     select.specs-container#specs-container(name="specs-container", multiple="")
   button#removeSpec.remove.button(type="button") Remove
-//-
-  .small6.columns
-    .input-container
-      label First Name
-        small required
-        input#first-name(type="text", name="first-name", placeholder="First Name")
-    .input-container
-      label Last Name
-        small required
-        input#last-name(type="text", name="last-name", placeholder="Last Name")
-    .input-container
-      label JBoss Community Account
-        input#community-account(type="text", name="community-account", placeholder="JBoss Community Account Username")
-    .input-container
-      label Role within the project (must have at least one Lead)
-        small required
-        select#role(name="role")
-          option(value="") Select one
-          option(value="lead") Lead
-          option(value="documenter") Documenter
-          option(value="tester") Tester
-          option(value="developer") Developer
-          option(value="helper") Helper
-          option(value="translator") Translator
-    a#addPerson.button(href="#") Add This Person
-  .small-6.columns
-    label(for="people-container") People Added
-    select.people-container#people-container(name="people-container", multiple="")
-    button#removePerson.button(type="button") Remove
+
diff --git a/src/scripts/doap-form.js b/src/scripts/doap-form.js
index 5517852..8a7b06b 100644
--- a/src/scripts/doap-form.js
+++ b/src/scripts/doap-form.js
@@ -39,6 +39,26 @@ $('#addVersion').on('click', function(event) {
   }
 });
 
+$('#addSpec').on('click', function(event) {
+  var specName = $('#spec-name'),
+      specDesc = $('#spec-desc'),
+      specUrl = $('#spec-url');
+
+  event.preventDefault();
+
+  if (specName.val().length !== 0) {
+    // Add to the selection
+    $('#specs-container').append('<option data-spec-name="' + specName.val() + 
+        '" data-spec-desc="' + specDesc.val() +'" data-spec-url="' + specUrl.val() + 
+        '">' + specName.val() + '</option>');
+
+    // Clear the values
+    $.each([specName, specDesc, specUrl], clearField);
+  } else {
+    $.each([specName], invalidateField);
+  }
+});
+
 $('.remove.button').on('click', function(event) {
   event.preventDefault();
   event.stopImmediatePropagation();

From 066ad4863aa5d374f13c87035e2eacc0ea113954 Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Tue, 21 Oct 2014 10:35:09 -0600
Subject: [PATCH 06/14] Adding social media accounts to container

---
 src/partials/accounts.jade | 36 ++++--------------------------------
 src/scripts/doap-form.js   | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/src/partials/accounts.jade b/src/partials/accounts.jade
index fad2e04..6b24b78 100644
--- a/src/partials/accounts.jade
+++ b/src/partials/accounts.jade
@@ -1,41 +1,13 @@
 .small-6.columns
   label Service URL
     small Required
-    input(type="url", name="serviceHomepage", placeholder="http://twitter.com", required="")
+    input#account-homepage(type="url", name="serviceHomepage", placeholder="http://twitter.com", required="")
   label Account Name
     small Required
-    input(type="text", name="accountName", required="")
-  a#addAccount.button(href="#") Add Account
+    input#account-name(type="text", name="accountName", required="")
+  a#addAccount.add.button(href="#") Add Account
 .small-6.columns
   label Accounts Added
     select.accounts-container#accounts-container(name="accounts-container", multiple="")
   button#removeAccount.remove.button(type="button") Remove
-// -
-  .small-6columns
-    .input-container
-      label First Name
-        small required
-        input#first-name(type="text", name="first-name", placeholder="First Name")
-    .input-container
-      label Last Name
-        small required
-        input#last-name(type="text", name="last-name", placeholder="Last Name")
-    .input-container
-      label JBoss Community Account
-        input#community-account(type="text", name="community-account", placeholder="JBoss Community Account Username")
-    .input-container
-      label Role within the project (must have at least one Lead)
-        small required
-        select#role(name="role")
-          option(value="") Select one
-          option(value="lead") Lead
-          option(value="documenter") Documenter
-          option(value="tester") Tester
-          option(value="developer") Developer
-          option(value="helper") Helper
-          option(value="translator") Translator
-    a#addPerson.button(href="#") Add This Person
-  .small-6.columns
-    label(for="people-container") People Added
-  select.people-container#people-container(name="people-container", multiple="")
-  button#removePerson.button(type="button") Remove
+
diff --git a/src/scripts/doap-form.js b/src/scripts/doap-form.js
index 8a7b06b..ff9cf30 100644
--- a/src/scripts/doap-form.js
+++ b/src/scripts/doap-form.js
@@ -59,6 +59,25 @@ $('#addSpec').on('click', function(event) {
   }
 });
 
+$('#addAccount').on('click', function(event) {
+  var accountName = $('#account-name'),
+      accountHomepage = $('#account-homepage');
+
+  event.preventDefault();
+
+  if (accountName.val().length !== 0 && accountHomepage.val().length !== 0) {
+    // Add to the selection
+    $('#accounts-container').append('<option data-account-name="' + accountName.val() + 
+        '" data-account-homepage="' + accountHomepage.val() + '">' + accountName.val() + 
+        ' ' + accountHomepage.val() + '</option>');
+
+    // Clear the values
+    $.each([accountName, accountHomepage], clearField);
+  } else {
+    $.each([accountName, accountHomepage], invalidateField);
+  }
+});
+
 $('.remove.button').on('click', function(event) {
   event.preventDefault();
   event.stopImmediatePropagation();

From 18095aceae48c53570395a5c43232c391e88f518 Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Tue, 21 Oct 2014 10:44:37 -0600
Subject: [PATCH 07/14] Adding versions back to rdf generation

---
 src/scripts/doap-form.js | 50 ++++++++++++----------------------------
 1 file changed, 15 insertions(+), 35 deletions(-)

diff --git a/src/scripts/doap-form.js b/src/scripts/doap-form.js
index ff9cf30..4c891d4 100644
--- a/src/scripts/doap-form.js
+++ b/src/scripts/doap-form.js
@@ -87,7 +87,7 @@ $('.remove.button').on('click', function(event) {
 // Event listener to the submit button to generate the DOAP content based 
 // on the form.  
 var build_doap = function(event) {
-  var o = {'releases':[{}], 'specs':[{}], 'accounts':[{}]},
+  var o = {'releases':[], 'specs':[], 'accounts':[]},
       release_names = ['releaseName', 'revision', 'created'],
       spec_names = ['specName', 'specDecs', 'seeAlsoURL'],
       account_names = ['accountName', 'serviceHomepage'],
@@ -103,40 +103,9 @@ var build_doap = function(event) {
       // check to see if it's a spec, online account or version, then create an
       // object for it and push the object to an array for
       // use in the templates
-      if (release_names.indexOf(this.name) !== -1) {
-        var release = o.releases[o.releases.length - 1];
-        if (containsAll(release_names, Object.keys(release))) {
-            release = {};
-            o.releases.push(release);
-        }
-
-        if (this.value) {
-          release[this.name] = this.value;
-        }
-      } else if (spec_names.indexOf(this.name) !== -1) { 
-        var spec = o.specs[o.specs.length - 1];
-        if (containsAll(spec_names, Object.keys(spec))) {
-          if (this.value) {
-            spec = {};
-            o.specs.push(spec);
-          }
-        }
-        if (this.value) {
-          spec[this.name] = this.value;
-        }
-      } else if (account_names.indexOf(this.name) !== -1) {
-        var account = o.accounts[o.accounts.length - 1];
-        if (containsAll(account_names, Object.keys(account))) {
-          if (this.value) {
-            account = {};
-            o.accounts.push(account);
-          }
-        }
-        if (this.value) {
-          account[this.name] = this.value;
-        }
-      } else if (people_names.indexOf(this.name) !== -1) {
-        // people will be handled differently
+      if (people_names.indexOf(this.name) !== -1 || account_names.indexOf(this.name) !== -1 ||
+          spec_names.indexOf(this.name) !== -1 || release_names.indexOf(this.name) !== -1) {
+        // people, accounts, specs, releases will be handled differently
       } else {
         if (this.value) {
           if ("language".indexOf(this.name) !== -1) {
@@ -165,6 +134,17 @@ var build_doap = function(event) {
       o[role].push(person);
   });
 
+  // Adding Versions
+  $("#versions-container > option").each(function() {
+    var elm = $(this);
+
+      var person = { releaseName : elm.data("release-name"), 
+                     created : elm.data("created"), 
+                     revision : elm.data("revision")
+      };
+      o.releases.push(person);
+  });
+
   $.each(['releases', 'specs', 'accounts'], function() {
     if (o[this].length === 1 && Object.keys(o[this][0]).length === 0) {
       o[this] = [];

From 6ebd9b29123d76af873bcdefc434b00b4e656376 Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Tue, 21 Oct 2014 10:52:51 -0600
Subject: [PATCH 08/14] Adding Specs to RDF

---
 src/partials/specs.jade  |  2 +-
 src/scripts/doap-form.js | 19 +++++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/partials/specs.jade b/src/partials/specs.jade
index 77a4efc..71cb24f 100644
--- a/src/partials/specs.jade
+++ b/src/partials/specs.jade
@@ -3,7 +3,7 @@
     small Required
     input#spec-name(type="text", name="specName", placeholder="Spec Name", required="")
   label Description
-    textarea#spec-decs(name="specDecs")
+    textarea#spec-desc(name="specDecs")
   label URL
     input#spec-url(type="url", name="seeAlsoURL")
   a#addSpec.add.button(href="#") Add This Spec
diff --git a/src/scripts/doap-form.js b/src/scripts/doap-form.js
index 4c891d4..be9fe4f 100644
--- a/src/scripts/doap-form.js
+++ b/src/scripts/doap-form.js
@@ -138,11 +138,22 @@ var build_doap = function(event) {
   $("#versions-container > option").each(function() {
     var elm = $(this);
 
-      var person = { releaseName : elm.data("release-name"), 
-                     created : elm.data("created"), 
-                     revision : elm.data("revision")
+    var version = { releaseName : elm.data("release-name"), 
+                    created : elm.data("created"), 
+                    revision : elm.data("revision")
       };
-      o.releases.push(person);
+      o.releases.push(version);
+  });
+
+  // Adding Specs
+  $("#specs-container > option").each(function() {
+    var elm = $(this);
+
+    var spec = { specName : elm.data("spec-name"), 
+                 specDesc : elm.data("spec-desc"), 
+                 seeAlsoURL : elm.data("spec-url")
+      };
+      o.specs.push(spec);
   });
 
   $.each(['releases', 'specs', 'accounts'], function() {

From a70d99c3cc91fd38d4330dc969182b152ccb125b Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Tue, 21 Oct 2014 11:16:34 -0600
Subject: [PATCH 09/14] Not generating xml if it doesn't contain values

For example, if there is no "seeAlso" for a spec, we're not creating
that element.
---
 src/templates/rdf.mst | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/templates/rdf.mst b/src/templates/rdf.mst
index d0b21ff..26e7d48 100644
--- a/src/templates/rdf.mst
+++ b/src/templates/rdf.mst
@@ -119,7 +119,7 @@
     {{#releases}}
     <release>
       <Version>
-        <name>{{{releaseName}}}</name>
+        {{#releaseName}}<name>{{{releaseName}}}</name>{{#releaseName}}
         <revision>{{{revision}}}</revision>
         <created>{{{created}}}</created>
       </Version>
@@ -146,8 +146,8 @@
     <implements>
       <Specification>
         <name>{{{specName}}}</name>
-        <description>{{{specDesc}}}</description>
-        <rdfs:seeAlso rdf:resource="{{{seeAlsoURL}}}" />
+        {{#specDesc}}<description>{{{specDesc}}}</description>{{/specDesc}}
+        {{#seeAlsoURL}}<rdfs:seeAlso rdf:resource="{{{seeAlsoURL}}}" />{{/seeAlsoURL}}
       </Specification>
     </implements>
     {{/specs}}

From c9a266c6c4eb6e2b2dbd1a075656c8f8bfac09ef Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Tue, 21 Oct 2014 11:21:12 -0600
Subject: [PATCH 10/14] Adding social media accounts

---
 src/scripts/doap-form.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/scripts/doap-form.js b/src/scripts/doap-form.js
index be9fe4f..77071c3 100644
--- a/src/scripts/doap-form.js
+++ b/src/scripts/doap-form.js
@@ -156,6 +156,16 @@ var build_doap = function(event) {
       o.specs.push(spec);
   });
 
+  // Adding Accounts
+  $("#accounts-container > option").each(function() {
+    var elm = $(this);
+
+    var account = { accountName : elm.data("account-name"), 
+                 serviceHomepage : elm.data("account-homepage") 
+      };
+      o.accounts.push(account);
+  });
+
   $.each(['releases', 'specs', 'accounts'], function() {
     if (o[this].length === 1 && Object.keys(o[this][0]).length === 0) {
       o[this] = [];

From f53486b6586bd48f9d2b305a89d624878d4d1a9a Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Tue, 21 Oct 2014 11:21:31 -0600
Subject: [PATCH 11/14] Fixing bad mustache template

---
 src/templates/rdf.mst | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/rdf.mst b/src/templates/rdf.mst
index 26e7d48..6e50982 100644
--- a/src/templates/rdf.mst
+++ b/src/templates/rdf.mst
@@ -119,7 +119,7 @@
     {{#releases}}
     <release>
       <Version>
-        {{#releaseName}}<name>{{{releaseName}}}</name>{{#releaseName}}
+        {{#releaseName}}<name>{{{releaseName}}}</name>{{/releaseName}}
         <revision>{{{revision}}}</revision>
         <created>{{{created}}}</created>
       </Version>

From 9d6e56cb063795e11bb0e0ff3c141f14f44c7851 Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Tue, 21 Oct 2014 11:24:42 -0600
Subject: [PATCH 12/14] Switching service url (secial media) to drop down

---
 src/partials/accounts.jade | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/partials/accounts.jade b/src/partials/accounts.jade
index 6b24b78..c0a3f30 100644
--- a/src/partials/accounts.jade
+++ b/src/partials/accounts.jade
@@ -1,7 +1,12 @@
 .small-6.columns
-  label Service URL
+  label Service
     small Required
-    input#account-homepage(type="url", name="serviceHomepage", placeholder="http://twitter.com", required="")
+    select#account-homepage
+      option(value="") Select One
+      option(value="https://www.twitter.com") Twitter
+      option(value="https://plus.google.com") Google Plus
+      option(value="https://www.facebook.com") FaceBook
+      option(value="https://www.linkedin.com") LinkedIn
   label Account Name
     small Required
     input#account-name(type="text", name="accountName", required="")

From 95469892f2775b756e74d47d5f7134f503a810d0 Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Tue, 21 Oct 2014 12:01:13 -0600
Subject: [PATCH 13/14] Using our own tabbing && lowercasing "Required"

tabindex should now be correct
---
 src/partials/accounts.jade   |  4 ++--
 src/partials/doap-entry.jade | 31 ++++++++++++++++---------------
 src/partials/specs.jade      |  2 +-
 src/partials/versions.jade   |  4 ++--
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/partials/accounts.jade b/src/partials/accounts.jade
index c0a3f30..3935e37 100644
--- a/src/partials/accounts.jade
+++ b/src/partials/accounts.jade
@@ -1,6 +1,6 @@
 .small-6.columns
   label Service
-    small Required
+    small required
     select#account-homepage
       option(value="") Select One
       option(value="https://www.twitter.com") Twitter
@@ -8,7 +8,7 @@
       option(value="https://www.facebook.com") FaceBook
       option(value="https://www.linkedin.com") LinkedIn
   label Account Name
-    small Required
+    small required
     input#account-name(type="text", name="accountName", required="")
   a#addAccount.add.button(href="#") Add Account
 .small-6.columns
diff --git a/src/partials/doap-entry.jade b/src/partials/doap-entry.jade
index 61baab3..9064ab3 100644
--- a/src/partials/doap-entry.jade
+++ b/src/partials/doap-entry.jade
@@ -2,19 +2,19 @@ form#doap-form(data-abide="ajax")
   .large-12.columns
     .row
       h1 DOAP Generator
-      ul.tabs(data-tab="", role="tablist")
+      ul.tabs(role="tablist")
         li.tab-title.active(role="presentational")
-          a(href="#panel-1", role="tab" aria-selected="true", controls="panel-1") Project
+          a(href="#project-panel", role="tabbutton" aria-selected="true") Project
         li.tab-title(role="presentational")
-          a(href="#panel-2", role="tab" aria-selected="false", controls="panel-2") People
+          a(href="#people-panel", role="tabbutton" aria-selected="false") People
         li.tab-title(role="presentational")
-          a(href="#panel-3", role="tab" aria-selected="false", controls="panel-3") Versions
+          a(href="#versions-panel", role="tabbutton" aria-selected="false") Versions
         li.tab-title(role="presentational")
-          a(href="#panel-4", role="tab" aria-selected="false", controls="panel-4") Specs
+          a(href="#specs-panel", role="tabbutton" aria-selected="false") Specs
         li.tab-title(role="presentational")
-          a(href="#panel-5", role="tab" aria-selected="false", controls="panel-5") Social Media
+          a(href="#social-media-panel", role="tabbutton" aria-selected="false") Social Media
       .tabs-content
-        section#panel-1.content.active(role="tabpanel", aria-hidden="false")
+        section#project-panel.content.active(role="tabpanel", aria-hidden="false")
           .small-12.columns
             .input-container
               label(for="name") Project Name
@@ -116,13 +116,13 @@ form#doap-form(data-abide="ajax")
                   option(value="Perl") Perl
           .row
             .small-3.columns.small-centered.end.centered
-              a.next.button(href="#") Next Page >>
-        section#panel-2.content(role="tabpanel", aria-hidden="true")
+              a.next.button(href="#people-panel", role="tabbutton") Next Page >>
+        section#people-panel.content(role="tabpanel", aria-hidden="true")
           include people.jade
           .row
             .small-3.columns.small-centered.end.centered
-              a.next.button(href="#") Next Page >>
-        section#panel-3.content(role="tabpanel", aria-hidden="true")
+              a.next.button(href="#versions-panel", role="tabbutton") Next Page >>
+        section#versions-panel.content(role="tabpanel", aria-hidden="true")
           .small-12.columns
             .row
               p
@@ -130,15 +130,16 @@ form#doap-form(data-abide="ajax")
           include versions.jade
           .row
             .small-3.columns.small-centered.end.centered
-              a.next.button(href="#") Next Page >>
-        section#panel-4.content(role="tabpanel", aria-hidden="true")
+              a.next.button(href="#specs-panel", role="tabbutton") Next Page >>
+        section#specs-panel.content(role="tabpanel", aria-hidden="true")
           .small-12.columns
+            .row
               p
                 | Use this page to provide details of specifications the project implements or uses. For example, a JSR number if the project implements it, or an OSIS or IEEE specification used in the project. If don't have any specifications being used or implemented, or do not wish to add them, there is nothing to fill out.
           include specs.jade
           .small-3.columns.small-centered.end.centered
-            a.next.button(href="#") Next Page >>
-        section#panel-5.content(role="tabpanel", aria-hidden="true")
+            a.next.button(href="#social-media-panel", role="tabbutton") Next Page >>
+        section#social-media-panel.content(role="tabpanel", aria-hidden="true")
           .small-12.columns
             .row
               p
diff --git a/src/partials/specs.jade b/src/partials/specs.jade
index 71cb24f..0e369a5 100644
--- a/src/partials/specs.jade
+++ b/src/partials/specs.jade
@@ -1,6 +1,6 @@
 .small-6.columns
   label Name
-    small Required
+    small required
     input#spec-name(type="text", name="specName", placeholder="Spec Name", required="")
   label Description
     textarea#spec-desc(name="specDecs")
diff --git a/src/partials/versions.jade b/src/partials/versions.jade
index fd7bffb..5b83864 100644
--- a/src/partials/versions.jade
+++ b/src/partials/versions.jade
@@ -4,11 +4,11 @@
       input#version-release-name(type="text", name="release-name", placeholder="Name")
   .input-container
     label Revision Number
-      small Required
+      small required
       input#version-revision(type="text", name="revision", required="")
   .input-container
     label Created Date
-      small Required
+      small required
       input#version-created(type="date", name="created", required="", placeholder="YYYY-MM-DD")
   a#addVersion.add.button(href="#") Add This Version
 .small-6.columns

From 434542fc708ad2eea36777bf1e021937a44c48eb Mon Sep 17 00:00:00 2001
From: LightGuard <lightguard.jp@gmail.com>
Date: Tue, 21 Oct 2014 12:14:42 -0600
Subject: [PATCH 14/14] Our own tabbing, z-index fix && required styling

Tabs all work correctly now
The bottom button isn't above other things
Required stands out a bit more
---
 src/partials/doap-entry.jade | 13 +++++++------
 src/scripts/doap-form.js     | 24 ++++++++++++++++++++++++
 src/styles/app.scss          | 11 +++++++++++
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/partials/doap-entry.jade b/src/partials/doap-entry.jade
index 9064ab3..0352d03 100644
--- a/src/partials/doap-entry.jade
+++ b/src/partials/doap-entry.jade
@@ -115,12 +115,12 @@ form#doap-form(data-abide="ajax")
                   option(value="Clojure") Clojure
                   option(value="Perl") Perl
           .row
-            .small-3.columns.small-centered.end.centered
+            .small-6.small-offset-5.columns.end
               a.next.button(href="#people-panel", role="tabbutton") Next Page >>
         section#people-panel.content(role="tabpanel", aria-hidden="true")
           include people.jade
           .row
-            .small-3.columns.small-centered.end.centered
+            .small-6.small-offset-5.columns.end
               a.next.button(href="#versions-panel", role="tabbutton") Next Page >>
         section#versions-panel.content(role="tabpanel", aria-hidden="true")
           .small-12.columns
@@ -129,7 +129,7 @@ form#doap-form(data-abide="ajax")
                 | Use this page to provide details of recent releases. There's no need to provide every single release for the project. For example, you could provide the latest GA release, the latest early-access release from an upcoming GA release and maybe the latest GA release that is available in a current product. If don't have any recent releases, or do not wish to add releases, there is nothing to fill out.
           include versions.jade
           .row
-            .small-3.columns.small-centered.end.centered
+            .small-6.small-offset-5.columns.end
               a.next.button(href="#specs-panel", role="tabbutton") Next Page >>
         section#specs-panel.content(role="tabpanel", aria-hidden="true")
           .small-12.columns
@@ -137,8 +137,9 @@ form#doap-form(data-abide="ajax")
               p
                 | Use this page to provide details of specifications the project implements or uses. For example, a JSR number if the project implements it, or an OSIS or IEEE specification used in the project. If don't have any specifications being used or implemented, or do not wish to add them, there is nothing to fill out.
           include specs.jade
-          .small-3.columns.small-centered.end.centered
-            a.next.button(href="#social-media-panel", role="tabbutton") Next Page >>
+          .row
+            .small-6.small-offset-5.columns.end
+              a.next.button(href="#social-media-panel", role="tabbutton") Next Page >>
         section#social-media-panel.content(role="tabpanel", aria-hidden="true")
           .small-12.columns
             .row
@@ -146,7 +147,7 @@ form#doap-form(data-abide="ajax")
                 | Use this page to add any social media services your project uses. If your project doesn't use social media, or you do not wish to add them, there is nothing to fill out.
           include accounts.jade
           .row
-            .small-3.columns.small-centered.end.centered
+            .small-5.small-offset-5.columns.end
               button#submit-button.button(type="submit") Generate DOAP
 #doap-modal.reveal-modal(data-reveal="")
   a#download-button.button(href="#") Download
diff --git a/src/scripts/doap-form.js b/src/scripts/doap-form.js
index 77071c3..6a613e3 100644
--- a/src/scripts/doap-form.js
+++ b/src/scripts/doap-form.js
@@ -1,3 +1,27 @@
+$('a[role=tabbutton]').on('click', function(event) {
+  event.stopImmediatePropagation();
+  event.preventDefault();
+
+  var tabButton = $('.tabs > li > a[href=' + $(event.target).attr('href') + ']'),
+      currentTab = $('section[role=tabpanel].active'),
+      newTab = $(tabButton.attr('href'));
+
+  $('.tab-title > a').each(function() {
+    $(this).attr('aria-selected', false);
+    $(this).parent().removeClass('active');
+  });
+  tabButton.attr('aria-selected', true);
+  tabButton.parent().addClass('active');
+
+  // Hide current tab
+  currentTab.removeClass('active');
+  currentTab.attr('aria-hidden', true);
+  
+  // show new tab
+  newTab.addClass('active');
+  currentTab.attr('aria-hidden', false);
+});
+
 $('#addPerson').on('click', function(event) {
   var firstName = $('#first-name'),
       lastName = $('#last-name'),
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 63d9c7a..8c0d8ed 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -23,6 +23,17 @@ button[type="submit"] {
   }
 }
 
+.button, button {
+  z-index: 10;
+}
+
+label small, .error > label > small {
+  font-weight: 700;
+  //color: red;
+  font-size: 75%;
+  margin-left: 1em;
+}
+
 .people-container, .accounts-container, .specs-container, .versions-container {
   height: 16rem;
 }