Permalink
Browse files

New editor layout.

  • Loading branch information...
1 parent 4e3eab3 commit 46a0cb5d93212fe16d2ad302a3fd5108f0dc57f8 Michael Aufreiter committed May 17, 2012
Showing with 151 additions and 21 deletions.
  1. +1 −1 _includes/styles/codemirror.css
  2. +1 −2 _includes/styles/reset.css
  3. +122 −3 _includes/styles/style.css
  4. +11 −7 _includes/templates/post._
  5. +16 −7 _includes/views/post.js
  6. +0 −1 index.html
@@ -1,7 +1,7 @@
.CodeMirror {
font-size: 1.4em;
line-height: 1.1em;
- font-family: 'Anonymous Pro', "Menlo", "Courier New";
+ font-family: "Menlo", "Courier New";
color: #6b6b6b;
}
@@ -4,8 +4,7 @@
v2.0 | 20110126
License: none (public domain)
---------------------------------------------*/
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+html, body, div, span, applet, object, iframe, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
View
@@ -395,12 +395,33 @@ ul.site li a {
padding: 0 5px;
margin: 10px 0;
}
+.document-menu-content a {
+ color: #eee;
+}
+
+.menu-item {
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+}
+
+.menu-item:hover {
+ background: #222;
+}
+
+.document-menu-content .menu-item.meta {
+ margin-right: 20px;
+}
.document-menu-content .filename input {
+ font-family: 'Anonymous Pro', "Menlo", "Courier New";
background: transparent;
border: none;
height: 40px;
- padding: 0;
+ font-size: 14px;
+ color: #eee;
+ width: 400px;
+ padding: 0 5px;
margin: 10px 0;
margin-left: 20px;
}
@@ -410,7 +431,32 @@ ul.site li a {
}
.document-menu-content .state {
- background: blue;
+ color: white;
+}
+
+.document-menu-content .save-state:hover {
+ background: #444;
+}
+
+.document-menu-content .state .save {
+ background: #1798cf;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ margin-left: 10px;
+ padding: 8px;
+}
+
+a.preview.active {
+ background: #000;
+}
+
+.document-menu-content .state .save.inactive {
+ text-shadow: none;
+ background:#eee;
+ color:#bbb;
+ border-color:#dfdfdf;
+ box-shadow: none;
}
.document .metadata {
@@ -435,7 +481,7 @@ ul.site li a {
margin: 0 auto;
}
.document .metadata #raw_metadata {
- height: 300px;
+ /*height: 300px;*/
background: #444;
color: #eee;
}
@@ -464,7 +510,80 @@ ul.site li a {
margin: 0 auto;
}
+.content-preview {
+ font-size: 17px;
+}
+/* ------------------------------------------
+ Personalities
+---------------------------------------------*/
+
+
+.personalities-wrapper {
+
+ width: 900px;
+ height: 260px;
+ margin: 0 auto;
+ /*position: relative;*/
+ /*margin: 0 auto 40px;*/
+ /*border: 1px solid #CCC;*/
+ -webkit-perspective: 800px;
+ -moz-perspective: 800px;
+ -ms-perspective: 800px;
+ -o-perspective: 800px;
+ perspective: 800px;
+}
+
+.personalities {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ -webkit-transition: -webkit-transform 1s;
+ -moz-transition: -moz-transform 1s;
+ -ms-transition: -ms-transform 1s;
+ -o-transition: -o-transform 1s;
+ transition: transform 1s;
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -ms-transform-style: preserve-3d;
+ -o-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+}
+
+.personalities.flipped {
+ -webkit-transform: rotateY( 180deg );
+ -moz-transform: rotateY( 180deg );
+ -ms-transform: rotateY( 180deg );
+ -o-transform: rotateY( 180deg );
+ transform: rotateY( 180deg );
+}
+
+.personalities > div {
+ display: block;
+ height: 100%;
+ width: 100%;
+
+ position: absolute;
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+ -o-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+
+.personalities .content {
+ background: #F0F0F0;
+}
+
+.personalities .content-preview {
+ background: #F0F0F0;
+ z-index: 2000;
+ -webkit-transform: rotateY( 180deg );
+ -moz-transform: rotateY( 180deg );
+ -ms-transform: rotateY( 180deg );
+ -o-transform: rotateY( 180deg );
+ transform: rotateY( 180deg );
+}
/* ------------------------------------------
Notifications
View
@@ -8,15 +8,17 @@
<input type="text" class="filename" value="this-is-a-filename.md"/>
</div>
- <div class="fr menu-item">
- <a class="toggle meta fl" href="#">Meta</a>
+
+ <div class="fr menu-item save-state">
<div class="state fl">
<input type="checkbox" id="post_published"<%= metadata.published ? ' checked="checked"' : ''%>/>
Published
<a class='save button inactive' href='#'>Save</a>
</div>
</div>
+ <a class="toggle meta fr menu-item" href="#">Metadata</a>
</div>
+
</div>
<div class='inner clearfix'>
@@ -26,11 +28,13 @@
<textarea id='raw_metadata' name='raw_metadata'><%= raw_metadata %></textarea>
</div>
</div>
- <div class='content'>
- <textarea id='code' name='code'><%= content %></textarea>
- </div>
- <div class='content-preview hidden'>
- <div class='post-content'></div>
+
+ <div class="personalities-wrapper">
+ <div class="personalities">
+ <div class="content"><textarea id='code' name='code'><%= content %></textarea></div>
+ <div class="content-preview"><div class='post-content'></div></div>
+ </div>
</div>
+
</div>
</div>
View
@@ -30,12 +30,12 @@ views.Post = Backbone.View.extend({
if (m.hasClass('active')) {
m
.removeClass('active')
- .html('Preview');
+ // .html('Preview');
this.edit();
} else {
m
.addClass('active')
- .html('Edit');
+ // .html('Edit');
this.preview();
}
},
@@ -104,22 +104,31 @@ views.Post = Backbone.View.extend({
}, 100);
},
+ // UpdateHeight
+ updateHeight: function() {
+ $('.personalities-wrapper').height(this.$('.content .CodeMirror').height());
+ },
+
edit: function() {
// Hide preview & show code
- this.$('.content-preview').hide();
- this.$('.content').show();
+ this.updateHeight();
+ $('.personalities').removeClass('flipped');
+ // this.$('.content-preview').hide();
+ // this.$('.content').show();
},
preview: function() {
// Show preview and hide code
- this.$('.content-preview').show();
+ this.updateHeight();
this.$('.post-content').html(this.converter.makeHtml(this.editor.getValue()));
- this.$('.content').hide();
+
+ $('.personalities').addClass('flipped');
+ // this.$('.content-preview').show();
+ // this.$('.content').hide();
},
render: function() {
var that = this;
-
$(this.el).html(templates.post(_.extend(this.model, { mode: this.mode })));
this.initEditor();
return this;
View
@@ -7,7 +7,6 @@
<title>Poole &middot; Serving Jekyll faithfully</title>
<link rel='shortcut icon' href='images/favicon.ico' type='image/x-icon' />
<link rel='stylesheet' href='app.css'>
- <link href='http://fonts.googleapis.com/css?family=Anonymous+Pro' rel='stylesheet' type='text/css'>
{% include templates.html %}
<script src='boot.js'></script>
</head>

0 comments on commit 46a0cb5

Please sign in to comment.