odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

Mobile preview + SEO: Bootstrap 3 

bzr revid: ddm@openerp.com-20130830112124-ht5wnngxa8fwlrdh
This commit is contained in:
ddm 2013-08-30 13:21:24 +02:00
parent 75f8fe3d1b
commit 3db7d635c0
5 changed files with 120 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
addons/website/static/src/css/editor.css
View File

@ -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;
}

92
addons/website/static/src/css/editor.sass
View File

@ -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

11
addons/website/static/src/js/website.mobile.js
View File

@ -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();
},
});
})();

25
addons/website/static/src/js/website.seo.js
View File

@ -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();
},
});
})();

111
addons/website/static/src/xml/website.xml
View File

@ -39,60 +39,76 @@
</t>
<t t-name="website.mobile_preview">
<div id="mobile-preview" class="modal hide fade oe_mobile_preview" tabindex="-1" role="dialog" aria-labelledby="mobile-preview-title" aria-hidden="true">
<div class="modal-header oe_mobile_preview_header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="mobile-preview-title" class="oe_mobile_preview_title modal-title">Mobile preview</h3>
</div>
<div class="modal-body">
<div class="oe_mobile_preview">
<iframe id="mobile-viewport" class="oe_mobile_viewport" src="?mobile-preview=true"></iframe>
<div class="modal fade oe_mobile_preview" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button title="Close" type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Mobile preview</h3>
</div>
<div class="modal-body">
<div>
<iframe id="mobile-viewport" class="oe_mobile_viewport" src="?mobile-preview=true"></iframe>
</div>
</div>
</div>
</div>
</div>
</t>
<t t-name="website.seo_configuration">
<div class="modal hide fade oe_seo_configuration" tabindex="-1" role="dialog" aria-labelledby="js_seo_page_url" aria-hidden="true">
<div class="modal-header">
<button title="Close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2>Promote <small class="js_seo_page_url"></small></h2>
<h4>Get your page efficiently referenced in Google to attract more visitors with relevant content.</h4>
</div>
<div class="modal-body">
<div class="js_seo_tips" />
<h3 class="page-header">1. Define keywords <small>describing your page content</small></h3>
<div class="control-group form-horizontal oe_seo_keywords_area">
<label class="control-label" for="seo_page_keywords">Keyword</label>
<div class="controls">
<div class="input-append">
<input type="text" name="seo_page_keywords" data-provide="typeahead" autocomplete="off" maxlength="20" size="24" placeholder=""/>
<button data-action="add" class="btn" type="button">Add</button>
</div>
<div class="container oe_seo_keywords_list js_seo_keywords_list">
<div class="modal fade oe_seo_configuration" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button title="Close" type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Promote <small class="js_seo_page_url"></small></h2>
<h4>Get your page efficiently referenced in Google to attract more visitors.</h4>
</div>
<div class="modal-body">
<div class="js_seo_tips" />
<section>
<h3 class="page-header">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-lg-2 control-label">Keyword</label>
<div class="col-lg-8">
<div class="input-group">
<input type="text" name="seo_page_keywords" class="form-control" maxlength="20" size="24"/>
<span class="input-group-btn">
<button data-action="add" class="btn btn-default" type="button">Add</button>
</span>
</div>
</div>
</div>
</div>
<div class="container oe_seo_keywords_list js_seo_keywords_list">
<!-- filled in JS -->
</div>
</div>
</section>
<section>
<h3 class="page-header">2. Choose a title and description <small>containing keywords relevant to what people are searching on the web</small></h3>
<div class="form-horizontal" role="form">
<div class="form-group">
<label for="seo_page_title" class="col-lg-2 control-label">Title</label>
<div class="col-lg-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-lg-2 control-label">Description</label>
<div class="col-lg-8">
<textarea name="seo_page_description" class="form-control" rows="3" cols="70" size="160"/>
</div>
</div>
</div>
</section>
<hr/>
<section>
<button type="button" data-action="update" class="btn btn-primary">Apply changes</button> or <a data-action="discard" data-dismiss="modal" href="#">Discard</a>
</section>
</div>
</div>
<h3 class="page-header">2. Choose a title and description <small>containing keywords relevant to what people are searching on the web</small></h3>
<div class="control-group form-horizontal">
<label class="control-label" for="seo_page_title">Title</label>
<div class="controls">
<input type="text" name="seo_page_title" maxlength="70" size="70"/>
</div>
</div>
<div class="control-group form-horizontal">
<label class="control-label" for="seo_page_description">Description</label>
<div class="controls">
<textarea name="seo_page_description" rows="3" cols="70" size="160"/>
</div>
</div>
<hr/>
<a data-action="update" href="#" class="btn btn-primary">Update page</a>
</div>
</div>
</t>
@ -105,7 +121,10 @@
</t>
<t t-name="website.seo_keyword">
<div class="oe_seo_keyword"><a href="#" class="oe_remove" data-action="remove-keyword"><i class="icon-trash"/></a> <span class="label js_seo_keyword"><t t-raw="widget.keyword"/></span></div>
<div class="oe_seo_keyword">
<a href="#" class="oe_remove" data-action="remove-keyword"><i class="icon-trash"/></a>
<span class="label label-default js_seo_keyword"><t t-raw="widget.keyword"/></span>
</div>
</t>
<t t-name="website.carousel">