Merge pull request #5050 from pablocubico/feature/4466-port-help-page-to-bootstrap

[4466] help page ported to bootstrap

app/assets/javascripts/app/views/help_view.js

@@ -26,6 +26,7 @@ app.views.Help = app.views.StaticContentView.extend({
     };
 
     this.data = {
+      title_header: Diaspora.I18n.t( 'title_header' ),
       title_getting_help: Diaspora.I18n.t( 'getting_help.title' ),
       title_account_and_data_management: Diaspora.I18n.t( 'account_and_data_management.title' ),
       title_aspects: Diaspora.I18n.t( 'aspects.title' ),

app/assets/stylesheets/help.css.scss

@@ -1,3 +1,9 @@
+h2.help_header {
+  border-bottom: 1px solid black;
+  padding-bottom: 5px;
+  margin-bottom: 15px;
+}
+
 ul#help_nav {
   display: inline;
   padding: 0;
@@ -23,13 +29,18 @@ ul#help_nav {
     font-weight: 700;
   }
   ul {
+    list-style: none;
     padding: 0;
+    margin: 0;
     li {
       font-weight: 700;
       margin-bottom: 10px;
       a {
         font-weight: normal;
       }
+      .section-selected {
+        font-weight: bold;
+      }
     }
   }
 }
@@ -55,7 +66,10 @@ ul#help_nav {
     background-color: rgb(242, 242, 242);
     margin-bottom: 10px;
     @include border-radius(4px);
-    a.toggle { text-decoration: none; }
+    a.toggle {
+      text-decoration: none; 
+      color: black;
+    }
     h4 { 
       text-align: left;
       font-weight: 700;
@@ -74,7 +88,7 @@ ul#help_nav {
       }
     }
     .answer {
-      @include border-bottom-radius(4px);
+      @include border-radius(0px, 0px, 4px, 4px);
       background-color: white;
       padding: 10px 20px;
     }

app/assets/stylesheets/new-templates.css.scss

@@ -42,3 +42,6 @@
 
 /* notifications */
 @import 'notifications';
+
+/* help */
+@import 'help';

app/assets/stylesheets/new_styles/_base.scss

@@ -146,6 +146,11 @@ $bring-dark-accent-forward-color: #DDD;
   }
 }
 
+/* padder helper to push content below the header, to be removed when porting to bootstrap is complete */
+.bootstrap_header_padding {
+  padding-top: 40px;
+}
+
 /* responsive */
 @media (max-width: 767px) {
   body {

app/assets/templates/help_tpl.jst.hbs

@@ -1,8 +1,14 @@
 
+<div class="bootstrap_header_padding"></div>
+
+<div class="container">
+
   <div id="section_header">
-  <h2 class="help_header">Help</h2>
+    <h2 class="help_header">{{ title_header }}</h2>
   </div>
-<div class="span-5">
+
+  <div class="row-fluid">
+    <div class="span3">
       <div id='faq_nav'>
         <ul>
           <li>
@@ -65,5 +71,7 @@
       </div>
     </div>
 
-<div class="span-19 last" id=faq>
+    <div class="span9 last" id=faq>
+    </div>
+  </div>
 </div>

app/controllers/help_controller.rb

@@ -1,2 +1,4 @@
 class HelpController < ApplicationController
+	before_filter -> { @css_framework = :bootstrap }
+	layout ->(c) { request.format == :mobile ? "application" : "with_header_with_footer" }
 end

config/locales/diaspora/en.yml

@@ -374,6 +374,7 @@ en:
       birthday_with_year: "%B %d %Y"
 
   help:
+    title_header: "Help"
     tutorials: "tutorials"
     tutorial: "tutorial"
     irc: "IRC"