Rearchitect the browser to use routes more

app/subapps/browser/templates/browser_charm.handlebars

 <div class="charm yui3-g">
     <div class="content yui3-u-{{#if isFullscreen}}5-6{{else}}1{{/if}}">
         <div class="nav">
             <a href="/bws/sidebar/" class="back">{{#if isFullscreen}}Back{{else}}Close{{/if}}</a>

[jeff.pihach, 2013/04/15 18:21:21]

this url will need to be generated and then passed in with the hbs params to
work properly with both namespaces.

[rharding, 2013/04/15 19:25:11]

Yes, url generation will come in a follow up branch.

             <a href="" class="add">Add</a>
             <a href="" class="share">
                 <img src="/juju-ui/assets/images/share_icon.jpg" alt="Share" />
             </a>
         </div>
 
         <div class="heading yui3-g">
             <div class="yui3-u">
                 <img src="data:image/svg;base64,{{ icon }}" alt="{{ name }} icon">
             </div>
             <div class="charm-details yui3-u-1-2">
                 <h1>{{ name }}</h1>
-                <div class="providers">
-                    <img src="/juju-ui/assets/images/provider_icons/provider-lxc02.svg"
-                        alt="Provider name" />
-                    <img src="/juju-ui/assets/images/provider_icons/provider-openstack.svg"
-                        alt="Provider name" />
-                    <img src="/juju-ui/assets/images/provider_icons/provider-hp.svg"
-                        alt="Provider name" />
-                    <img src="/juju-ui/assets/images/provider_icons/provider-aws.svg"
-                        alt="Provider name" />
-                    <img src="/juju-ui/assets/images/provider_icons/provider-maas.svg"
-                        alt="Provider name" />
-                </div>
                 <dl>
                     <dt>Recent activity</dt>
                     <dd>
-                        {{ recent_download_count }}
+                        <strong>{{ recent_download_count }}</strong>
                         {{pluralize 'download' recent_download_count}},
-                        {{ recent_commit_count }}
+                        <strong>{{ recent_commit_count }}</strong>
                         {{pluralize 'commit' recent_commit_count}}
                     </dd>
                     <dt>Ubuntu series</dt>
                     <dd>{{ distro_series }}</dd>
                     <dt>Location</dt>
                     <dd>{{ url }}</dd>
                     <dt>Links</dt>
                     <dd>
                         <a href="#">Source</a>
                         <a href="{{ code_source.bugs_link }}">Bugs</a>
                     </dd>
                 </dl>
             </div>
         </div>
 
         <div class="changelog">
             <h3 class="section-title" data-state="closed">
                 Change log

[jeff.pihach, 2013/04/15 18:21:21]

isn't changelog one word?

[rharding, 2013/04/15 19:25:11]

I would say so, but we're going off the UX docs given to us which lists it as
two. We can bring up the point to UX.

                 {{#if recent_commits}}
                     <span class="expand">
                         <span class="more">
                             <img src="/juju-ui/assets/images/expand_icon.jpg"
                                 alt="Expand" />
                         </span>
                         <span class="less hidden">
                             <img src="/juju-ui/assets/images/contract_icon.jpg"
                                 alt="Contract" />
                             </span>
@@ skipping 21 matching lines @@
                         {{/prettyCommits.remaining}}
                     </ul>
                 </div>
             {{else}}
                 <p>No change history exists.</p>
             {{/if}}
         </div>
 
         <div class="summary">
             <h2>Summary</h2>
-            {{ summary }}
+            <p>{{ summary }}</p>
             <h2>Description</h2>
-            {{#if isFullscreen}}
-                {{ description }}
-            {{else}}
-                {{ truncate description 300 }}
-            {{/if}}
+            <p>
+                {{#if isFullscreen}}
+                    {{ description }}
+                {{else}}
+                    {{ truncate description 300 }}
+                {{/if}}
+            </p>
         </div>
 
         <div class="tabs">
             <ul>
                 <li><a href="#bws-readme" class="bws-readme">Readme</a></li>
                 <li><a href="#bws-interfaces" class="bws-interfaces">Interfaces</a></li>
                 <li><a href="#bws-configuration" class="bws-configuration">Configuration</a></li>
                 <li><a href="#bws-qa" class="bws-qa">Quality</a></li>
                 <li><a href="#bws-hooks" class="bws-hooks">Hooks</a></li>
             </ul>
             <div>
                 <div id="bws-readme">Readme</div>
                 <div id="bws-interfaces">
                     <p class="intro">
-                        Interfaces determine how this charm relates to other
-                        charms. A relationship between charms can only be made if
-                        they share a common interface. This charm requires certain
-                        interfaces to be provided by other charms. Similarly, this
-                        charm provides other interfaces that can be used by
-                        other charms.
-                    </p>
-                    <div class="yui3-g">
-                        <div class="interfaces-heading yui3-u-1">
-                            <h3>Requires</h3>
+                        {{#unless requires}}
+                            {{#if provides}}
+                                Interfaces determine how this charm relates to
+                                other charms. A relationship between charms can
+                                only be made if they share a common interface.
+                                This charm requires certain interfaces to be
+                                provided by other charms. Similarly, this charm
+                                provides other interfaces that can be used by
+                                other charms.
+                            {{else}}
+                                Interfaces determine how this charm relates to
+                                other charms. A relationship between charms can
+                                only be made if they share a common interface.
+                                </p>
+                                <p>This charm does not have any interfaces.</p>
+                            {{/if}}
+                        {{/unless}}
+                    </p>
+                    {{#if requires}}
+                        <div class="yui3-g">
+                            <div class="interfaces-heading yui3-u-1">
+                                <h3>Requiress</h3>
+                            </div>
                         </div>
-                    </div>
-                    {{#if requires}}
                         <ul class="interface-list">
                             {{#arrayObject requires}}
                                 <li class="interface-row yui3-g">
                                     <div class="interface yui3-u-1-3">
                                         <h4>{{value.interface}}</h4>
                                         <div>{{key}}</div>
                                     </div>
                                 </li>
                             {{/arrayObject}}
                         </ul>
-                    {{else}}
-                        <p>This charm does not require any interfaces.</p>
                     {{/if}}
-                    <div class="yui3-g">
-                        <div class="interfaces-heading yui3-u-1">
-                            <h3>Provides</h3>
+                    {{#if provides}}
+                        <div class="yui3-g">
+                            <div class="interfaces-heading yui3-u-1">
+                                <h3>Provides</h3>
+                            </div>
                         </div>
-                    </div>
-                    {{#if provides}}
                         <ul class="interface-list">
                             {{#arrayObject provides}}
                                 <li class="interface-row yui3-g">
                                     <div class="interface yui3-u-1-3">
                                         <h4>{{value.interface}}</h4>
                                         <div>{{key}}</div>
                                     </div>
                                 </li>
                             {{/arrayObject}}
                         </ul>
-                    {{else}}
-                        <p>This charm does not provide any interfaces.</p>
                     {{/if}}
                 </div>
                 <div id="bws-configuration">
+                    <p class="intro">
+                        These are the ways in which you can configure this·
+                        charm to best suit your deployment. You can change the·
+                        default configuration settings either before or after·
+                        you have deployed the charm, if necessary.
+                    </p>
                     {{#if options}}
                         <dl>
                             {{#arrayObject options}}
                                 <dt>
                                     <dfn>{{key}}</dfn>
                                     <em>{{value.type}}</em>
                                 </dt>
                                 <dd>
                                     <div>Default: {{value.default}}</div>
-                                    <div>{{value.description}}</div>
+                                    <p>{{value.description}}</p>
                                 </dd>
                             {{/arrayObject}}
                         </dl>
                     {{else}}
                       <p>This charm does not expose any configuration options.</p>
                     {{/if}}
                 </div>
                 <div id="bws-qa">Quality</div>
                 <div id="bws-hooks">
+                    <p class="intro">
+                        Hooks are the pieces of code that comprise the charm.·
+                        A particular hook responds to specific events that Juju
+                        gives the charm, e.g. when there’s a change in the·
+                        environment or an administrator has made a change to·
+                        its configuration. Hooks are of interest mainly to·
+                        charm authors and advanced users. Select a hook below·
+                        to view its code.
+                    </p>
                     <select>
                         <option>--</option>
                         {{#each files}}
                             <option value="{{ . }}">{{ . }}</option>
                         {{/each}}
                     </select>
                     <div class="filecontent">
                         Select a file from the list to view.
                     </div>
                 </div>
             </div>
         </div>
     </div>
     {{#if isFullscreen}}
         <div class="sidebar yui3-u-1-6">
             <h2>Useful links</h2>
             <ul class="vertical-links">
                 <li><a href="">Juju community</a></li>
                 <li><a href="">Online resources</a></li>
                 <li><a href="">Write your own Charm</a></li>
                 <li><a href="">Contribute to this Charm</a></li>
             </ul>
         </div>
     {{/if}}
 </div>