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

[4466] help page ported to bootstrap
This commit is contained in:
Jonne Haß 2014-07-01 14:15:24 +02:00
commit 311d7e3bcc
7 changed files with 101 additions and 67 deletions

View file

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

View file

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

View file

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

View file

@ -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 */ /* responsive */
@media (max-width: 767px) { @media (max-width: 767px) {
body { body {

View file

@ -1,69 +1,77 @@
<div id="section_header"> <div class="bootstrap_header_padding"></div>
<h2 class="help_header">Help</h2>
</div> <div class="container">
<div class="span-5">
<div id='faq_nav'> <div id="section_header">
<ul> <h2 class="help_header">{{ title_header }}</h2>
<li>
<a href="#" class="section-unselected faq-link-getting-help" data-section="getting_help" data-items="">{{ title_getting_help }}</a>
<span class="section-selected">{{ title_getting_help }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="account_and_data_management" data-items="move_pods download_data close_account data_visible_to_podmin data_other_podmins">{{ title_account_and_data_management }}</a>
<span class="section-selected">{{ title_account_and_data_management }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="aspects" data-items="what_is_an_aspect who_sees_post restrict_posts_i_see contacts_know_aspect contacts_visible remove_notification rename_aspect change_aspect_of_post post_multiple_aspects person_multiple_aspects delete_aspect">{{ title_aspects }}</a>
<span class="section-selected">{{ title_aspects }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="mentions" data-items="what_is_a_mention how_to_mention mention_in_comment see_mentions">{{ title_mentions }}</a>
<span class="section-selected">{{ title_mentions }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="pods" data-items="what_is_a_pod find_people use_search_box">{{ title_pods }}</a>
<span class="section-selected">{{ title_pods }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link-posts-and-posting" data-section="posts_and_posting" data-items="hide_posts format_text insert_images">{{ title_posts_and_posting }}</a>
<span class="section-selected">{{ title_posts_and_posting }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="private_posts" data-items="who_sees_post can_comment can_reshare see_comment">{{ title_private_posts }}</a>
<span class="section-selected">{{ title_private_posts }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="private_profiles" data-items="who_sees_profile whats_in_profile who_sees_updates">{{ title_private_profiles }}</a>
<span class="section-selected">{{ title_private_profiles }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="public_posts" data-items="who_sees_post find_public_post can_comment_reshare_like see_comment_reshare_like deselect_aspect_posting">{{ title_public_posts }}</a>
<span class="section-selected">{{ title_public_posts }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="public_profiles" data-items="who_sees_profile whats_in_profile who_sees_updates what_do_tags_do">{{ title_public_profiles }}</a>
<span class="section-selected">{{ title_public_profiles }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="resharing_posts" data-items="reshare_public_post_aspects reshare_private_post_aspects">{{ title_resharing_posts }}</a>
<span class="section-selected">{{ title_resharing_posts }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link-sharing" data-section="sharing" data-items="">{{ title_sharing }}</a>
<span class="section-selected">{{ title_sharing }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="tags" data-items="what_are_tags_for tags_in_comments followed_tags people_tag_page filter_tags">{{ title_tags }}</a>
<span class="section-selected">{{ title_tags }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="miscellaneous" data-items="back_to_top photo_albums subscribe_feed diaspora_app">{{ title_miscellaneous }}</a>
<span class="section-selected">{{ title_miscellaneous }}</span>
</li>
</ul>
</div> </div>
</div>
<div class="span-19 last" id=faq> <div class="row-fluid">
<div class="span3">
<div id='faq_nav'>
<ul>
<li>
<a href="#" class="section-unselected faq-link-getting-help" data-section="getting_help" data-items="">{{ title_getting_help }}</a>
<span class="section-selected">{{ title_getting_help }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="account_and_data_management" data-items="move_pods download_data close_account data_visible_to_podmin data_other_podmins">{{ title_account_and_data_management }}</a>
<span class="section-selected">{{ title_account_and_data_management }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="aspects" data-items="what_is_an_aspect who_sees_post restrict_posts_i_see contacts_know_aspect contacts_visible remove_notification rename_aspect change_aspect_of_post post_multiple_aspects person_multiple_aspects delete_aspect">{{ title_aspects }}</a>
<span class="section-selected">{{ title_aspects }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="mentions" data-items="what_is_a_mention how_to_mention mention_in_comment see_mentions">{{ title_mentions }}</a>
<span class="section-selected">{{ title_mentions }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="pods" data-items="what_is_a_pod find_people use_search_box">{{ title_pods }}</a>
<span class="section-selected">{{ title_pods }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link-posts-and-posting" data-section="posts_and_posting" data-items="hide_posts format_text insert_images">{{ title_posts_and_posting }}</a>
<span class="section-selected">{{ title_posts_and_posting }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="private_posts" data-items="who_sees_post can_comment can_reshare see_comment">{{ title_private_posts }}</a>
<span class="section-selected">{{ title_private_posts }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="private_profiles" data-items="who_sees_profile whats_in_profile who_sees_updates">{{ title_private_profiles }}</a>
<span class="section-selected">{{ title_private_profiles }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="public_posts" data-items="who_sees_post find_public_post can_comment_reshare_like see_comment_reshare_like deselect_aspect_posting">{{ title_public_posts }}</a>
<span class="section-selected">{{ title_public_posts }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="public_profiles" data-items="who_sees_profile whats_in_profile who_sees_updates what_do_tags_do">{{ title_public_profiles }}</a>
<span class="section-selected">{{ title_public_profiles }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="resharing_posts" data-items="reshare_public_post_aspects reshare_private_post_aspects">{{ title_resharing_posts }}</a>
<span class="section-selected">{{ title_resharing_posts }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link-sharing" data-section="sharing" data-items="">{{ title_sharing }}</a>
<span class="section-selected">{{ title_sharing }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="tags" data-items="what_are_tags_for tags_in_comments followed_tags people_tag_page filter_tags">{{ title_tags }}</a>
<span class="section-selected">{{ title_tags }}</span>
</li>
<li>
<a href="#" class="section-unselected faq-link" data-section="miscellaneous" data-items="back_to_top photo_albums subscribe_feed diaspora_app">{{ title_miscellaneous }}</a>
<span class="section-selected">{{ title_miscellaneous }}</span>
</li>
</ul>
</div>
</div>
<div class="span9 last" id=faq>
</div>
</div>
</div> </div>

View file

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

View file

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