[IMP] better layout for documentation
[odoo/odoo.git] / addons / website_forum_doc / views / website_doc.xml
index 7c00e50..b0fbb15 100644 (file)
         </template>
 
         <!-- Page Index -->
+        <template id="toc" name="Documentation Index">
+            <t t-set="level" t-value="level+1"/>
+            <t t-foreach="titles" t-as="title">
+                <div t-attf-class="h#{str(level) + (level&lt;3 and ' page-header' or '')}">
+                    <t t-esc="title.name"/>
+                    <small t-if="len(title.post_ids)">
+                        <t t-esc="len(title.post_ids)"/>
+                        <t t-if="len(title.post_ids)==1">essay</t>
+                        <t t-if="len(title.post_ids)&gt;1">essays</t>
+                    </small>
+                </div>
+
+                <ul t-if="title.post_ids" class="mt32">
+                    <li t-foreach="title.post_ids" t-as="post">
+                        <a t-attf-href="/forum/how-to/#{slug(title)}/#{slug(post)}" t-field="post.name"/>
+                    </li>
+                </ul>
+
+                <t t-set="titles" t-value="title.child_ids"/>
+                <t t-call="website_forum_doc.toc"/>
+            </t>
+        </template>
+
+        <template id="breadcrumb" name="Documentation Breadcrumb">
+            <t t-if="toc.parent_id">
+                <t t-call="website_forum_doc.breadcrumb">
+                    <t t-set="toc" t-value="toc.parent_id"/>
+                </t>
+            </t>
+            <li t-if="toc">
+                <a t-attf-href="/forum/how-to/#{ slug(toc) }" t-field="toc.name"/>
+            </li>
+        </template>
+
         <template id="documentation" name="Documentation Index">
             <t t-call="website.layout">
-                <t t-set="head">
-                    <link rel='stylesheet' href='/website_forum_doc/static/src/css/website_doc.css'/>
-                    <script type="text/javascript" src="/website_forum_doc/static/src/js/website_doc.js"/>
-                </t>
-                <div class="container mt16 document">
-                    <div class="col-md-3 mt32 css_noprint bs-sidebar menu-tree">
-                        <t t-call="website_doc.side_panel"><t t-set="documentation" t-value="documentaion_toc"/></t>
+                <section class="container mt16" t-if="toc">
+                    <div class="row">
+                        <div class="col-md-9">
+                            <ol class="breadcrumb mb0">
+                                <t t-call="website_forum_doc.breadcrumb">
+                                    <t t-set="toc" t-value="toc.parent_id"/>
+                                </t>
+                                <li class="active">
+                                    <span t-field="toc.name"/>
+                                </li>
+                            </ol>
+                        </div>
+                        <div class="col-md-3 text-right">
+                            Search:
+                        </div>
                     </div>
-                    <div class="col-md-9 mt32 document_page">
-                        <strong><h2 t-esc="topic.name" class="text-center"/></strong>
-                        <div t-foreach="topic.post_ids" t-as="post">
-                            <h2><p class="faq-question" t-esc="post.name"/></h2>
-                            <div t-if="post.pertinent_answer_id">
-                                <p><t t-raw="post.pertinent_answer_id.content"/></p>
+                </section>
+                <section class="container">
+                    <t t-set="level" t-value="toc and 1 or 0"/>
+                    <h1 class="page-header" t-if="toc">
+                        <t t-esc="toc.name"/>
+                    </h1>
+                    <t t-set="titles" t-value="sections"/>
+                    <t t-call="website_forum_doc.toc"/>
+                </section>
+                <div class="oe_structure"/>
+            </t>
+        </template>
+
+        <template id="documentation_post" name="Documentation Question">
+            <t t-call="website.layout">
+                <section class="container mt16" t-if="toc">
+                    <div class="row">
+                        <div class="col-sm-8">
+                            <ol class="breadcrumb mb0">
+                                <t t-call="website_forum_doc.breadcrumb">
+                                    <t t-set="toc" t-value="toc.parent_id"/>
+                                </t>
+                                <li>
+                                    <a t-attf-href="/forum/how-to/#{ slug(toc) }" t-field="toc.name"/>
+                                </li>
+                            </ol>
+                        </div>
+                        <div class="col-sm-4 text-right" t-if="forum">
+                            <form class="navbar-form navbar-right mt0" role="search" t-attf-action="/forum/#{ slug(forum) }" method="get">
+                                <div class="form-group">
+                                    <input type="search" class="form-control"
+                                        name="search" placeholder="Search..."
+                                        t-att-value="search or ''"/>
+                                    <button type="submit" class="btn btn-default">Search</button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="container">
+                    <div class="row">
+                        <div class="col-sm-9">
+                            <h1 class="page-header" t-field="post.name"/>
+                            <blockquote t-if="bool(post.content)">
+                                <t t-raw="post.content"/>
+                            </blockquote>
+
+                            <t t-if="post.child_ids">
+                                <t t-raw="post.child_ids[0].content"/>
+                            </t>
+                            <div t-if="len(toc.post_ids)&gt;1">
+                                <h2 class="page-header">Related topics</h2>
+                                <ul>
+                                    <t t-foreach="toc.post_ids" t-as="topic">
+                                        <li t-if="post.id != topic.id">
+                                            <a t-attf-href="/forum/how-to/#{slug(toc)}/#{slug(topic)}" t-field="post.name"/>
+                                        </li>
+                                    </t>
+                                </ul>
                             </div>
-                            <div class="pull-right">
-                                <a t-attf-href="/forum/#{ slug(post.forum_id) }/question/#{ slug(post) }">Read More About This..</a>
+                        </div><div class="col-sm-3">
+                            <div class="panel panel-default mt48" id="about_doc">
+                                <div class="panel-heading">
+                                    <h3 class="panel-title">Need more info?</h3>
+                                </div>
+                                <div class="panel-body">
+                                    <div class="text-muted">
+                                        This documentation page has been extracted
+                                        from the Q&amp;A section where you can
+                                        discuss it and get feedback.
+                                    </div>
+                                    &amp;nbsp; <a t-attf-href="/forum/#{slug(forum)}/question/#{slug(post)}" class="fa fa-arrow-right mt16"> Related question</a>
+                                </div>
                             </div>
                         </div>
                     </div>
-                    <div class="oe_structure"/>
-                </div>
+                </section>
+                <div class="oe_structure mt16 mb16"/>
             </t>
         </template>
-        
-        <!--MENU LIST-->
-        <template id="side_panel">
-            <ul class="nav nav-pills nav-stacked">
-                <t t-foreach="documentation" t-as="toc">
-                    <li t-attf-class="tree_toggler #{ topic==toc and 'active' or ''}">
-                        <a t-attf-href="/forum/how-to/#{ slug(toc) }" t-if="not toc.child_ids">
-                            <t t-esc="toc.name"/>
-                        </a>
-                        <a t-attf-href="" t-if="toc.child_ids">
-                            <t t-esc="toc.name"/>
-                        </a>
-                        <t t-if="toc.child_ids">
-                            <t t-call="website_doc.side_panel"><t t-set="documentation" t-value="toc.child_ids"/></t>
-                        </t>
-                    </li>
-                </t>
-            </ul>
-        </template>
-        
+
+
         <!--TOC ON FORUM POST-->
         <template id="forum_question_right_column" inherit_id="website_forum.header" name="Table of Content">
             <xpath expr="//script[@src='/website_forum/static/src/js/website_forum.js']" position="after">