From 3db7d635c00ea31454ad2d96872318b8cc36ad57 Mon Sep 17 00:00:00 2001 From: ddm Date: Fri, 30 Aug 2013 13:21:24 +0200 Subject: [PATCH] Mobile preview + SEO: Bootstrap 3 bzr revid: ddm@openerp.com-20130830112124-ht5wnngxa8fwlrdh --- addons/website/static/src/css/editor.css | 50 +++----- addons/website/static/src/css/editor.sass | 92 ++++++--------- .../website/static/src/js/website.mobile.js | 11 +- addons/website/static/src/js/website.seo.js | 25 +--- addons/website/static/src/xml/website.xml | 111 ++++++++++-------- 5 files changed, 120 insertions(+), 169 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 15a7c6aeb6e..fadad2f7d9e 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -229,14 +229,8 @@ left: 0px; } -/* ---- MODAL DIALOGS ---- */ -.oe_stop_scrolling { - height: 100%; - overflow: hidden; -} - /* ---- MOBILE PREVIEW ---- */ -.oe_mobile_preview.modal { +.oe_mobile_preview.modal .modal-content { height: 660px; background-color: black; border: 2px solid; @@ -249,54 +243,40 @@ right: 0; max-width: 330px; } -.oe_mobile_preview.modal .modal-header { +.oe_mobile_preview.modal .modal-content .modal-header { background-color: black; border-bottom: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; } -.oe_mobile_preview.modal .modal-header .oe_mobile_preview_title { +.oe_mobile_preview.modal .modal-content .modal-header .modal-title { color: #1a1a1a; } -.oe_mobile_preview.modal .modal-body { +.oe_mobile_preview.modal .modal-content .modal-header .close { + color: lightgrey; + opacity: 1; +} +.oe_mobile_preview.modal .modal-content .modal-header .close:hover { + color: #e00101; + opacity: 1; +} +.oe_mobile_preview.modal .modal-content .modal-body { background-color: black; max-height: 600px; padding: 0; margin: 0; } -.oe_mobile_preview.modal .modal-footer { - background-color: black; -} - -.oe_mobile_viewport { +.oe_mobile_preview.modal .modal-content .modal-body .oe_mobile_viewport { width: 320px; height: 568px; padding: 5px; border: none; } - -.oe_mobile_preview_header .close { - color: lightgrey; - opacity: 1; -} -.oe_mobile_preview_header .close:hover { - color: #e00101; - opacity: 1; +.oe_mobile_preview.modal .modal-content .modal-footer { + background-color: black; } /* ---- SEO TOOLS ---- */ -.oe_seo_configuration.modal { - width: 100%; - left: 0; - margin-left: 0; - top: 0 !important; - margin-top: 0 !important; - height: 100%; -} -.oe_seo_configuration .modal-body { - max-height: 100%; - height: 100%; -} .oe_seo_configuration ul { list-style: none; } diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index d74fb57234b..dadf36a7cd4 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -200,72 +200,54 @@ .oe_handle.nw,.oe_handle.w,.oe_handle.sw left: 0px -/* ---- MODAL DIALOGS ---- */ - -.oe_stop_scrolling - height: 100% - overflow: hidden - /* ---- MOBILE PREVIEW ---- */ $mobile_preview_background: #000000 $mobile_preview_border: #1A1A1A $icon_close: #E00101 -.oe_mobile_preview.modal - height: 660px - background-color: $mobile_preview_background - border: 2px solid - border-radius: 10px - border-color: $mobile_preview_border - margin: auto - top: 0 - left: 0 - bottom: 0 - right: 0 - max-width: 330px - .modal-header +.oe_mobile_preview + &.modal .modal-content + height: 660px background-color: $mobile_preview_background - border-bottom: 0 - border-top-left-radius: 10px - border-top-right-radius: 10px - .oe_mobile_preview_title - color: $mobile_preview_border - .modal-body - background-color: $mobile_preview_background - max-height: 600px - padding: 0 - margin: 0 - .modal-footer - background-color: $mobile_preview_background - -.oe_mobile_viewport - width: 320px - height: 568px - padding: 5px - border: none - -.oe_mobile_preview_header - .close - color: lightgrey - opacity: 1 - .close:hover - color: $icon_close - opacity: 1 + border: 2px solid + border-radius: 10px + border-color: $mobile_preview_border + margin: auto + top: 0 + left: 0 + bottom: 0 + right: 0 + max-width: 330px + .modal-header + background-color: $mobile_preview_background + border-bottom: 0 + border-top-left-radius: 10px + border-top-right-radius: 10px + .modal-title + color: $mobile_preview_border + .close + color: lightgrey + opacity: 1 + .close:hover + color: $icon_close + opacity: 1 + .modal-body + background-color: $mobile_preview_background + max-height: 600px + padding: 0 + margin: 0 + .oe_mobile_viewport + width: 320px + height: 568px + padding: 5px + border: none + .modal-footer + background-color: $mobile_preview_background /* ---- SEO TOOLS ---- */ $remove_color: $icon_close .oe_seo_configuration - &.modal - width: 100% - left: 0 - margin-left: 0 - top: 0!important - margin-top: 0!important - height: 100% - .modal-body - max-height: 100% - height: 100% ul list-style: none .oe_remove diff --git a/addons/website/static/src/js/website.mobile.js b/addons/website/static/src/js/website.mobile.js index 125021362f4..63bc81872ef 100644 --- a/addons/website/static/src/js/website.mobile.js +++ b/addons/website/static/src/js/website.mobile.js @@ -14,20 +14,11 @@ website.MobilePreview = openerp.Widget.extend({ template: 'website.mobile_preview', events: { - 'hidden': 'close' + 'hidden': 'destroy' }, start: function () { - $(document.body).addClass('oe_stop_scrolling'); document.getElementById("mobile-viewport").src = window.location.href + "?mobile-preview=true"; this.$el.modal(); - this.$el.removeClass('hide'); - this.$el.find('.oe_mobile_preview_header button').click(function() { - $('body').removeClass('oe_stop_scrolling'); - }); - }, - close: function () { - $(document.body).removeClass('oe_stop_scrolling'); - this.destroy(); }, }); })(); diff --git a/addons/website/static/src/js/website.seo.js b/addons/website/static/src/js/website.seo.js index 5564e8eac98..c4cecd43b2c 100644 --- a/addons/website/static/src/js/website.seo.js +++ b/addons/website/static/src/js/website.seo.js @@ -25,7 +25,7 @@ init: function (parent, options) { this._super(parent); this.message = options.message; - // info, error or success + // success, info, warning or danger this.type = options.type; }, }); @@ -97,19 +97,9 @@ start: function () { var pageParser = new website.seo.PageParser(); - var currentKeywords = this.keywords; this.$el.find('.js_seo_page_url').text(pageParser.url()); this.$el.find('input[name=seo_page_title]').val(pageParser.title()); - this.$el.find('input[name=seo_page_keywords]').typeahead({ - items: 4, - source: function () { - var suggestions = pageParser.keywordSuggestions(); - var alreadyChosen = currentKeywords(); - return _.difference(suggestions, alreadyChosen); - }, - }); this.checkBestPractices(pageParser); - $(document.body).addClass('oe_stop_scrolling'); this.$el.modal(); }, checkBestPractices: function (parser) { @@ -117,7 +107,7 @@ if (pageParser.headers()['h1'].length > 1) { new website.seo.Tip(this, { message: "You have more than one <h1> tag on the page.", - type: 'error' + type: 'danger' }).appendTo(this.$el.find('.js_seo_tips')); } }, @@ -165,24 +155,13 @@ keyword: word, onDelete: enableNewKeywords }).appendTo(this.$el.find('.js_seo_keywords_list')); - this.scrollDown(); } if (this.isKeywordListFull()) { disableNewKeywords(); } }, - scrollDown: function () { - var $body = this.$el.find('.modal-body'); - $body.animate({ - scrollTop: $body[0].scrollHeight - }, 500); - }, update: function () { // TODO: Persist changes }, - destroy: function () { - $(document.body).removeClass('oe_stop_scrolling'); - this._super(); - }, }); })(); diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml index f550f8cb372..431d567ea50 100644 --- a/addons/website/static/src/xml/website.xml +++ b/addons/website/static/src/xml/website.xml @@ -39,60 +39,76 @@ -