Use nav-tabs for ToS

app/assets/stylesheets/application.scss

@@ -31,6 +31,9 @@
 @import 'new_styles/registration';
 @import 'new_styles/forms';
 
+/* terms */
+@import 'terms';
+
 /* profile and settings pages */
 @import 'new_styles/settings';
 

app/assets/stylesheets/terms.scss

@@ -0,0 +1,3 @@
+#terms {
+ .nav-tabs { margin-top: 40px; }
+}

app/views/terms/default.haml

@@ -16,23 +16,26 @@
 / CC BY-SA 3.0 Creative Commons license.
 / If you modify or copy this file, please do not remove this license text.
 
-%div{class: "container", style: "margin-top: 50px;"}
-  %div{class: "row"}
-    %div{class: "col-md-3"}
-      %h3
+.container#terms
+  %div{role: "tabpanel"}
+    .row
+      .col-md-8.col-md-offset-2
+        %ul.nav.nav-tabs.nav-justified{role: "tablist"}
+          %li.active{role: "presentation"}
+            %a{href: "#tos", role: "tab", aria: {controls: "tos"}, data: {toggle: "tab"}}
               Terms of Service
-      %h4
-        %a{href: "/terms#privacy"}
+          %li{role: "presentation"}
+            %a{href: "#privacy", role: "tab", aria: {controls: "privacy"}, data: {toggle: "tab"}}
               Privacy Policy
-    %div{class: "col-md-9", style: "margin-top: 20px;"}
-      %p
-        Last Updated: 17th August, 2014
 
-      %hr
-
-      %a{name: "terms"}
+    .row
+      .col-md-8.col-md-offset-2.tab-content
+        .tab-pane.active#tos{role: "tabpanel"}
+          .page-header
             %h1
               #{AppConfig.settings.pod_name} - Terms of Service
+              %small
+                Last Updated: 17th August, 2014
 
           %p
             Here are the important things you need to know about accessing and using the <strong>#{AppConfig.settings.pod_name}</strong> (#{AppConfig.environment.url}) website and service (collectively, "Service"). These are our terms of service ("Terms"). Please read them carefully.
@@ -61,7 +64,7 @@
             Privacy Policy
 
           %p
-        For information about how we collect and use information about users of the Service, please check out our <a href="/terms#privacy">privacy policy</a>.
+            For information about how we collect and use information about users of the Service, please check out our <a href="#privacy" aria-controls="privacy" data-toggle="tab">privacy policy</a>.
 
           %h2
             Third-Party Services
@@ -202,10 +205,9 @@
 
             %p
               Questions or comments about the Service may be directed to us at the email address <a href="mailto:#{AppConfig.admins.podmin_email}">#{AppConfig.admins.podmin_email}</a>.
-      %a{name: "privacy"}
-
-      %hr
 
+        .tab-pane#privacy{role: "tabpanel"}
+          .page-header
             %h1
               #{AppConfig.settings.pod_name} - Privacy Policy