[IMP] website: improve design/UX of SEO modal
This commit is contained in:
stefanorigano
@@ -23,10 +23,10 @@ ajax.loadXML('/website/static/src/xml/website.seo.xml', qweb);
|
||||
|
||||
function analyzeKeyword(htmlPage, keyword) {
|
||||
return htmlPage.isInTitle(keyword) ? {
|
||||
title: 'label label-primary',
|
||||
title: 'label label-success',
|
||||
description: "This keyword is used in the page title",
|
||||
} : htmlPage.isInDescription(keyword) ? {
|
||||
title: 'label label-info',
|
||||
title: 'label label-primary',
|
||||
description: "This keyword is used in the page description",
|
||||
} : htmlPage.isInBody(keyword) ? {
|
||||
title: 'label label-info',
|
||||
@@ -202,6 +202,7 @@ var KeywordList = Widget.extend({
|
||||
keyword.on('removed', self, function () {
|
||||
self.trigger('list-not-full');
|
||||
self.trigger('removed', word);
|
||||
self.trigger('content-updated', true);
|
||||
});
|
||||
keyword.on('selected', self, function (word, language) {
|
||||
self.trigger('selected', word, language);
|
||||
@@ -211,6 +212,7 @@ var KeywordList = Widget.extend({
|
||||
if (self.isFull()) {
|
||||
self.trigger('list-full');
|
||||
}
|
||||
self.trigger('content-updated');
|
||||
},
|
||||
});
|
||||
|
||||
@@ -392,10 +394,14 @@ var Configurator = Dialog.extend({
|
||||
this.keywordList.on('selected', self, function (word, language) {
|
||||
self.keywordList.add(word, language);
|
||||
});
|
||||
this.keywordList.appendTo(this.$('.js_seo_keywords_list'));
|
||||
this.keywordList.on('content-updated', self, function (removed) {
|
||||
self.updateTable(removed);
|
||||
});
|
||||
this.keywordList.insertAfter(this.$('.table thead'));
|
||||
this.disableUnsavableFields();
|
||||
this.renderPreview();
|
||||
this.getLanguages();
|
||||
this.updateTable();
|
||||
},
|
||||
getLanguages: function () {
|
||||
var self = this;
|
||||
@@ -453,7 +459,7 @@ var Configurator = Dialog.extend({
|
||||
var keyword = _.isString(word) ? word : $input.val();
|
||||
var language = $language.val().toLowerCase();
|
||||
this.keywordList.add(keyword, language);
|
||||
$input.val("");
|
||||
$input.val("").focus();
|
||||
},
|
||||
update: function () {
|
||||
var self = this;
|
||||
@@ -551,6 +557,12 @@ var Configurator = Dialog.extend({
|
||||
this.htmlPage.changeKeywords(this.keywordList.keywords());
|
||||
this._super.apply(this, arguments);
|
||||
},
|
||||
updateTable : function (removed) {
|
||||
var self = this,
|
||||
val = removed ? (this.$el.find('tbody > tr').length - 1) : (this.$el.find('tbody > tr').length);
|
||||
this.$('table').toggleClass('js_seo_has_content', val > 0 );
|
||||
this.$el.scrollTop(self.$el[0].scrollHeight);
|
||||
},
|
||||
});
|
||||
|
||||
website.TopBar.include({
|
||||
|
||||
@@ -223,60 +223,154 @@ body .modal {
|
||||
|
||||
// SEO CONFIGURATION
|
||||
&.oe_seo_configuration {
|
||||
li.oe_seo_preview_g {
|
||||
line-height: 1.2;
|
||||
font-size: small;
|
||||
font-family: arial, sans-serif;
|
||||
h3 {
|
||||
font-size: medium;
|
||||
#language-box {
|
||||
padding-right: 25px;
|
||||
background-color:white;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.table {
|
||||
td {
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
padding-right: 15px;
|
||||
border-width: 0;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.r {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
a {
|
||||
color: #1e0fbe;
|
||||
text-decoration: underline;
|
||||
text-transform: none;
|
||||
em {
|
||||
font-style: normal !important;
|
||||
|
||||
> tfoot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.js_seo_has_content {
|
||||
td {
|
||||
&:first-child {
|
||||
width: 55%;
|
||||
padding-right: 15px;
|
||||
border: 1px solid @o-we-color-text-light;
|
||||
text-align: right;
|
||||
background-color: @o-we-color-paper;
|
||||
|
||||
@media screen and (min-width: @screen-md-min) {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
visibility: visible;
|
||||
padding-left: 15px;
|
||||
|
||||
@media screen and (min-width: @screen-md-min) {
|
||||
padding-left: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.s {
|
||||
color: #444;
|
||||
max-width: 42em;
|
||||
}
|
||||
li.oe_seo_preview_g {
|
||||
&, .st {
|
||||
line-height: 1.24;
|
||||
|
||||
tbody {
|
||||
td {
|
||||
padding: 5px;
|
||||
.o-transition(padding, .3s);
|
||||
|
||||
&:first-child {
|
||||
border-width: 0 1px;
|
||||
|
||||
.label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 7px 35px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
|
||||
.oe_remove {
|
||||
.o-w-close-icon(10px, white, @o-we-color-danger, 2px);
|
||||
.o-position-absolute(5px, 5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
.o-animation(fadeInDownSmall, .3s);
|
||||
|
||||
&:first-child {
|
||||
td:first-child {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
td:first-child {
|
||||
padding-bottom: 10px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.kv, .slp {
|
||||
display: block;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.f {
|
||||
color: #666;
|
||||
margin-bottom: 1px;
|
||||
cite {
|
||||
color: #006621;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
|
||||
> tfoot {
|
||||
display: table-footer-group;
|
||||
|
||||
hr {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
td, td:first-child {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.dl-horizontal dt {
|
||||
min-width: 160px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
li.oe_seo_preview_g {
|
||||
list-style: none;
|
||||
font-family: arial, sans-serif;
|
||||
|
||||
.r {
|
||||
cursor: pointer;
|
||||
color:#1a0dab;
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.s {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #545454;
|
||||
.kv {
|
||||
color: #006621;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.st {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -12,55 +12,70 @@
|
||||
</t>
|
||||
|
||||
<div t-name="website.seo_configuration">
|
||||
<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 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>
|
||||
<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>
|
||||
<hr/>
|
||||
<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"/>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user