diff --git a/core/client/assets/sass/modules/global.scss b/core/client/assets/sass/modules/global.scss
index 6e18b5e10a..3b0aabf3d0 100644
--- a/core/client/assets/sass/modules/global.scss
+++ b/core/client/assets/sass/modules/global.scss
@@ -914,15 +914,13 @@ body.blur > *:not(#modal-container) {
%modal, .modal {
@include box-sizing(border-box);
- position: fixed;
- top: 10%;
- left: 50%;
+ max-height: calc(100%-80px);
width: 450px;
padding: 0px;
- margin-left: -225px;
background: #FFFFFF;
border: 6px solid rgba(0,0,0,0.5);
border-radius: $rounded;
+ overflow:auto;
&.fadeIn {
@include animation(fadeIn 0.3s linear 1);
diff --git a/core/client/tpl/modal.hbs b/core/client/tpl/modal.hbs
index 59c5afb14e..752428d253 100644
--- a/core/client/tpl/modal.hbs
+++ b/core/client/tpl/modal.hbs
@@ -1,6 +1,5 @@
\ No newline at end of file
diff --git a/core/client/tpl/modals/markdown.hbs b/core/client/tpl/modals/markdown.hbs
new file mode 100644
index 0000000000..2d51ee07e3
--- /dev/null
+++ b/core/client/tpl/modals/markdown.hbs
@@ -0,0 +1 @@
+For now reference: Markdown Documentation
\ No newline at end of file
diff --git a/core/client/views/base.js b/core/client/views/base.js
index a991ad4ae8..e0a0fb7897 100644
--- a/core/client/views/base.js
+++ b/core/client/views/base.js
@@ -129,4 +129,67 @@
}
});
+ /**
+ * This is the view to generate the markup for the individual
+ * modal. Will be included into #modals.
+ *
+ *
+ *
+ * Types can be
+ * - (empty)
+ *
+ */
+ Ghost.Views.Modal = Ghost.View.extend({
+ el: '#modal-container',
+ templateName: 'modal',
+ className: 'js-bb-modal',
+ initialize: function () {
+ this.render();
+ },
+ template: function (data) {
+ return JST[this.templateName](data);
+ },
+ events: {
+ 'click .close': 'removeItem'
+ },
+ render: function () {
+ this.$el.html(this.template(this.model));
+ this.$(".modal-content").html(this.addSubview(new Ghost.Views.Modal.ContentView({model: this.model})).render().el);
+ this.$el.children(".js-modal").center();
+ this.$el.addClass("active");
+ if (document.body.style.webkitFilter !== undefined) { // Detect webkit filters
+ $("body").addClass("blur");
+ } else {
+ this.$el.addClass("dark");
+ }
+ return this;
+ },
+ removeItem: function (e) {
+ e.preventDefault();
+ $(e.currentTarget).closest('.js-modal').fadeOut(300, function () {
+ $(this).remove();
+ $("#modal-container").removeClass('active dark');
+ if (document.body.style.filter !== undefined) {
+ $("body").removeClass("blur");
+ }
+ });
+ }
+ });
+
+ /**
+ * Modal Content
+ * @type {*}
+ */
+ Ghost.Views.Modal.ContentView = Ghost.View.extend({
+
+ template: function (data) {
+ return JST['modals/' + this.model.content.template](data);
+ },
+
+ render: function () {
+ this.$el.html(this.template(this.model));
+ return this;
+ }
+
+ });
}());
diff --git a/core/client/views/editor.js b/core/client/views/editor.js
index b295900c49..283cc70937 100644
--- a/core/client/views/editor.js
+++ b/core/client/views/editor.js
@@ -260,6 +260,10 @@
},
+ events: {
+ 'click .markdown-help': 'showHelp'
+ },
+
syncScroll: _.debounce(function (e) {
var $codeViewport = $(e.target),
$previewViewport = $('.entry-preview-content'),
@@ -276,6 +280,18 @@
$previewViewport.scrollTop(previewPostition);
}, 50),
+ showHelp: function () {
+ this.addSubview(new Ghost.Views.Modal({
+ model: {
+ title: 'Markdown Help',
+ content: {
+ template: 'markdown'
+ },
+ animation: 'fadeIn'
+ }
+ }));
+ },
+
// This updates the editor preview panel.
// Currently gets called on every key press.
// Also trigger word count update