[IMP] website: improve design/UX of SEO modal

1 files changed, 66 insertions, 61 deletions

diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index 57f3cc76a31..807a9e5711c 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -12,55 +12,70 @@
     </t>
 
     <div t-name="website.seo_configuration">
-        <div class="js_seo_tips" />
-        <section class="js_seo_keywords_list">
-            <h3 class="page-header mt16">1. Define Keywords <small>describing your page content</small></h3>
-            <div class="form-horizontal" role="form">
-                <div class="form-group">
-                    <label for="seo_page_keywords" class="col-sm-3 control-label">Add keyword:</label>
-                    <div class="col-sm-4">
-                        <div>
-                          <input type="text" name="seo_page_keywords" class="form-control" maxlength="30"/>
+        <section class="row">
+            <div class="col-md-6">
+                <div class="form-horizontal mt16" role="form">
+                    <div class="form-group">
+                        <label for="seo_page_title" class="col-xs-3 control-label">Page title</label>
+                        <div class="col-xs-9">
+                            <input type="text" name="seo_page_title" class="form-control" maxlength="70" size="70"/>
                         </div>
                     </div>
-                </div>
-                <div class="row mt8">
-                    <label for="seo_page_language" class="col-sm-3 control-label">Language:</label>
-                    <div>
-                        <div class="col-sm-4">
-                            <select name="seo_page_language" id="language-box" class="form-control"/>
+                    <div class="form-group">
+                        <label for="seo_page_description" class="col-xs-3 control-label">Description</label>
+                        <div class="col-xs-9">
+                            <textarea name="seo_page_description" class="form-control" style="max-width: 100%;height:145px;max-height:145px" t-att-maxlength="widget.maxDescriptionSize"/>
                         </div>
                     </div>
                 </div>
-                <div class="row mt8">
-                    <div class="col-md-10 text-center">
-                        <button data-action="add" class="btn btn-default" type="button">Add</button>
-                    </div>
-                </div>
             </div>
-            <span class="text-muted">Most searched topics related to your keywords, ordered by importance:</span>
-            <!-- filled in JS -->
-        </section>
-        <section>
-            <h3 class="page-header">2. Reference Your Page <small>using above suggested keywords</small></h3>
-            <div class="form-horizontal mt16" role="form">
-                <div class="form-group">
-                    <label for="seo_page_title" class="col-sm-2 control-label">Title</label>
-                    <div class="col-sm-8">
-                        <input type="text" name="seo_page_title" class="form-control" maxlength="70" size="70"/>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="seo_page_description" class="col-sm-2 control-label">Description</label>
-                    <div class="col-sm-8">
-                        <textarea name="seo_page_description" class="form-control" rows="3" cols="70" t-att-maxlength="widget.maxDescriptionSize"/>
+            <div class="col-md-6">
+                <h5 class="mt16">Preview <small>how your page will be listed on Google</small></h5>
+                <div class="well">
+                    <div class="panel mb0">
+                        <div class="panel-body">
+                            <div class="js_seo_preview"/>
+                        </div>
                     </div>
                 </div>
             </div>
         </section>
-        <section>
-            <h3 class="page-header">3. Preview <small>how your page will be listed on Google</small></h3>
-            <div class="js_seo_preview"></div>
+        <hr/>
+        <div class="js_seo_tips" />
+        <section class="js_seo_keywords_list">
+            <h4 class="mt16">Define Keywords <small>describing your page content</small></h4>
+            <table class="table table-responsive">
+                <thead>
+                    <tr>
+                        <td>
+                            <div class="form-inline" role="form">
+                                <div class="input-group">
+                                    <input type="text" style="min-width:170px" name="seo_page_keywords" class="form-control" placeholder="Keyword" maxlength="30"/>
+                                    <span class="input-group-btn">
+                                        <select name="seo_page_language" id="language-box" class="btn form-control"/>
+                                    </span>
+                                    <span class="input-group-btn">
+                                        <button data-action="add" class="btn btn-success" type="button">Add</button>
+                                    </span>
+                                </div>
+                            </div>
+                        </td>
+                        <td>Suggested<br/><small class="text-muted">Most searched topics related to your keywords, ordered by importance:</small></td>
+                    </tr>
+                </thead>
+                <tfoot>
+                    <tr>
+                        <td/>
+                        <td><hr/>
+                            <small class="text-muted">Legend:</small>
+                            <span class="label label-default">Not used</span>
+                            <span class="label label-success">In title</span>
+                            <span class="label label-primary">In description</span>
+                            <span class="label label-info">In page's content</span>
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
         </section>
     </div>
 
@@ -71,9 +86,9 @@
     </t>
 
     <t t-name="website.seo_list">
-        <div>
+        <tbody>
             <!-- filled in JS -->
-        </div>
+        </tbody>
     </t>
 
     <t t-name="website.seo_tip">
@@ -83,16 +98,16 @@
     </t>
 
     <t t-name="website.seo_keyword">
-        <dl class="dl-horizontal mt8 mb8">
-            <dt>
+        <tr>
+            <td>
                 <span t-attf-title="#{ widget.tooltip() }" t-attf-class="oe_seo_keyword #{ widget.highlight() } js_seo_keyword" t-att-data-keyword="widget.keyword">
-                    <t t-raw="widget.keyword"/> <a href="#" class="oe_remove" data-action="remove-keyword">x</a>
+                    <t t-raw="widget.keyword"/> <a href="#" class="oe_remove" data-action="remove-keyword"/>
                 </span>
-            </dt>
-            <dd class="js_seo_keyword_suggestion">
+            </td>
+            <td class="js_seo_keyword_suggestion">
                 <!-- filled in JS -->
-            </dd>
-        </dl>
+            </td>
+        </tr>
     </t>
 
     <t t-name="website.seo_suggestion">
@@ -113,20 +128,10 @@
     <t t-name="website.seo_preview">
         <li class="oe_seo_preview_g">
             <div class="rc">
-                <span class="altcts"></span>
-                <h3 class="r">
-                    <a t-att-href="url">
-                        <em><t t-esc="widget.title"/></em>
-                    </a>
-                </h3>
+                <div class="r"><t t-esc="widget.title"/></div>
                 <div class="s">
-                    <div>
-                        <div class="f kv" style="white-space:nowrap">
-                            <cite><t t-esc="widget.url"/></cite>
-                        </div>
-                        <div class="f slp"></div>
-                        <span class="st"><t t-esc="widget.description"/></span>
-                    </div>
+                    <div class="kv"><t t-esc="widget.url"/></div>
+                    <div class="st"><t t-esc="widget.description"/></div>
                 </div>
             </div>
         </li>