diff --git a/addons/website/static/src/js/website.seo.js b/addons/website/static/src/js/website.seo.js index a05fc4a5883..93b434a5f44 100644 --- a/addons/website/static/src/js/website.seo.js +++ b/addons/website/static/src/js/website.seo.js @@ -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({ diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less index 4d2fab0d217..d437233e4e7 100644 --- a/addons/website/static/src/less/website.ui.components.less +++ b/addons/website/static/src/less/website.ui.components.less @@ -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; + } + } + } } } 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 @@
+
+
+
+
+ +
+ +
+
+
+ +
+