Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

restyled editor page #19

Merged
merged 6 commits into from

2 participants

@Pomax
Owner

three two layout with header, split plane content, footer.

still needs an IE javascript hack to get the height right for the split panes

@toolness toolness merged commit 5ec7a4c into mozilla:gh-pages
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 24, 2012
  1. restyled editor page

    Mike Kamermans authored
  2. made things work on IE, Chrome and Firefox

    Mike Kamermans authored
  3. IE specific CSS filter

    Mike Kamermans authored
  4. @Pomax
  5. @Pomax

    upstream gh-page sync

    Pomax authored
  6. @Pomax
This page is out of date. Refresh to see the latest.
View
1  .gitignore
@@ -1 +0,0 @@
-docs
View
BIN  demo/editor/02original.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
12 demo/editor/blank.html
@@ -1,3 +1,9 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>Blank Page</title>
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Blank Page</title>
+ </head>
+ <body>
+ </body>
+</html>
View
BIN  demo/editor/codemirror-gutter.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
233 demo/editor/editor.css
@@ -0,0 +1,233 @@
+html, body {
+ height: 100%;
+ width: 100%;
+ margin: 0px;
+ padding: 0px;
+}
+
+iframe {
+ border: none;
+ height: 100%;
+ width: 100%;
+}
+
+#header {
+ position: fixed;
+ z-index: 2;
+ top: 0;
+
+ background-color: rgb(160,120,220);
+ color: rgb(255,255,210);
+ text-align: center;
+
+ height: 4em; /* NOTE: this value MUST agree with [#html-editor, #live-render].margin-bottom */
+ width: 100%;
+ margin: 0px;
+ padding: 0px;
+}
+
+
+#footer {
+ position: fixed;
+ bottom: 0;
+
+ background-color: rgb(0,130,255);
+ color: white;
+
+ height: 2em; /* NOTE: this value MUST agree with [#split-page, #html-editor, #live-render].bottom */
+ width: 100%;
+ margin: 0px;
+ padding: 0px;
+}
+
+#split-pane {
+ display: block;
+ position: fixed;
+ z-index: 1;
+ top: 0px;
+ width: 100%;
+}
+
+#split-page, #html-editor, #live-render {
+ bottom: 2em; /* NOTE: this value MUST agree with [#footer].height */
+}
+
+#html-editor, #live-render {
+ display: inline-block;
+ position: fixed;
+ top: 0px;
+ margin-top: 4em; /* NOTE: this value MUST agree with [#header].height */
+
+ width: 50%;
+ overflow: hidden;
+}
+
+#html-editor {
+ background-color: white;
+ overflow: auto;
+ background: url("codemirror-gutter.png") repeat-y, url("02original.gif") repeat;
+}
+
+#html-editor textarea,
+.CodeMirror-scroll.cm-s-jsbin {
+ height: 100%;
+ overflow: hidden;
+}
+
+#live-render {
+ border-left: 1px solid black;
+ margin-left: -1px;
+ background-color: white;
+ right: 0;
+}
+
+/* ------------------- */
+
+/*
+.error, .preview {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ width: 50%;
+ height: 100%;
+ border: none;
+}
+
+.preview {
+ border-left: 1px solid black;
+}
+
+
+.error {
+ background: rgba(128, 0, 0, 0.75);
+ color: white;
+ padding: 10px;
+ overflow: auto;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+*/
+
+.error em[data-highlight] {
+ font-style: normal;
+ cursor: pointer;
+}
+
+.error em.highlight-1, .CodeMirror span.highlight-1 {
+ color: black;
+ background: yellow;
+}
+
+.error em.highlight-2, .CodeMirror span.highlight-2 {
+ color: white;
+ background: gray;
+}
+
+.CodeMirror span.cursor-help-highlight {
+ background: rgba(0, 0, 0, 0.1);
+}
+
+.suggestions a {
+ color: inherit;
+}
+
+.suggestions li p {
+ font-size: smaller;
+}
+
+code {
+ font-family: Menlo, Monaco, consolas, monospace;
+ font-size: smaller;
+}
+
+.help a {
+ color: inherit;
+}
+
+.help a.learn-more {
+ display: inline-block;
+ text-decoration: none;
+ padding: 1px 2px 1px 2px;
+ margin: 0px 2px 0px 2px;
+ font-size: smaller;
+ background: lightgray;
+ color: #222222;
+}
+
+.help a.learn-more:hover {
+ background: white;
+ color: black;
+}
+
+#publish-box {
+ float: right;
+ position: relative;
+ top: 1em;
+ margin-right: 1em;
+}
+
+#publish, #publish-dialog {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+#publish {
+ display: inline-block;
+ font-size: small;
+ padding: 4px 4px 2px 4px;
+ background: white;
+ color: #333;
+ cursor: pointer;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+
+ margin-left: 4em;
+ font-family: 'Modern Antiqua', Verdana, sans-serif;
+}
+
+#publish-text {
+ display: inline-block;
+ font-family: 'Modern Antiqua', Georgia, sans-serif;
+}
+
+#publish:hover {
+ background: rgb(0,130,255);
+ color: white;
+}
+
+#publish-dialog {
+ position: absolute;
+ width: 600px;
+ height: 300px;
+ top: 50%;
+ left: 50%;
+ margin-top: -150px;
+ margin-left: -300px;
+ padding: 10px;
+ z-index: 1000000;
+ background-color: rgba(0, 0, 100, 0.75);
+ color: white;
+ text-align: center;
+ -webkit-border-radius: 1em;
+ -moz-border-radius: 1em;
+ border-radius: 1em;
+}
+
+#publish-dialog a {
+ color: inherit;
+}
+
+
+/* ------------------- */
+
+h1 {
+ display: inline-block;
+ position: relative;
+ top: -0.5em;
+ font-family: 'Mystery Quest', Verdana, sans-serif;
+ font-size: 220%;
+ font-weight: 400;
+ text-align: center;
+}
View
295 demo/editor/index.html 100644 → 100755
@@ -1,199 +1,112 @@
<!DOCTYPE html>
-<meta charset="utf-8">
-<base target="_blank">
-<title>Two-Paned Editor</title>
-<link rel="stylesheet" href="../codemirror2/lib/codemirror.css">
-<link rel="stylesheet" href="../jsbin-codemirror-theme.css">
-<style>
-html, body {
- height: 100%;
- margin: 0px;
- padding: 0px;
-}
-
-.html {
- position: absolute;
- top: 0px;
- left: 0px;
- bottom: 0px;
- width: 50%;
-}
-
-.CodeMirror, .CodeMirror-scroll {
- height: 100%;
-}
-
-.error, .preview {
- position: absolute;
- top: 0px;
- right: 0px;
- bottom: 0px;
- width: 50%;
- height: 100%;
- border: none;
-}
-
-.preview {
- border-left: 1px solid black;
-}
-
-.error {
- background: rgba(128, 0, 0, 0.75);
- color: white;
- padding: 10px;
- overflow: auto;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.error em[data-highlight] {
- font-style: normal;
- cursor: pointer;
-}
-
-.error em.highlight-1, .CodeMirror span.highlight-1 {
- color: black;
- background: yellow;
-}
-
-.error em.highlight-2, .CodeMirror span.highlight-2 {
- color: white;
- background: gray;
-}
-
-.CodeMirror span.cursor-help-highlight {
- background: rgba(0, 0, 0, 0.1);
-}
-
-.suggestions a {
- color: inherit;
-}
-
-.suggestions li p {
- font-size: smaller;
-}
-
-code {
- font-family: Menlo, Monaco, consolas, monospace;
- font-size: smaller;
-}
-
-.help {
- position: absolute;
- right: 0px;
- bottom: 0px;
- max-width: 50%;
- padding: 10px;
- background-color: rgba(0, 0, 0, 0.5);
- color: white;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: small;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
+<html>
+ <head>
+ <meta charset="utf-8">
+ <base target="_blank">
+ <title>Two-Paned Editor</title>
+ <link rel="stylesheet" href="../codemirror2/lib/codemirror.css">
+ <link rel="stylesheet" href="../jsbin-codemirror-theme.css">
+ <link rel="stylesheet" href="editor.css">
+
+ <link href='http://fonts.googleapis.com/css?family=Mystery+Quest' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Modern+Antiqua' rel='stylesheet' type='text/css'>
+ </html>
+ <body>
+
+ <!-- header -->
+ <div id="header">
+ <h1 class="title">Web Page Maker - remix the web!</h1>
+ <div id="publish-box">
+ <div id="publish">Publish</div>
+ <div id="publish-text">← Click here when you're done remixing!</div>
+ </div>
+ </div>
+
+ <!-- modal overlay -->
+ <div id="publish-dialog" style="display: none">
+ <h1>Hold on a sec.</h1>
+ <p>We are publishing your thing.</p>
+ <div class="done">
+ <p>Ok, we are done.</p>
+ <p>View your thing at <a class="view" href="" target="_blank"></a>.</p>
+ <p>Remix your thing at <a class="remix" href="" target="_blank"></a>.</p>
+ <p><a class="close" href="#">Go back to the editor</a>.</p>
+ </div>
+ </div>
+
+ <!-- our main content -->
+ <div id="split-pane">
+ <div id="html-editor">
+ <textarea class="html"></textarea> <!-- html editor part -->
+ </div>
+
+ <div id="live-render">
+ <iframe src="blank.html" class="preview"></iframe> <!-- website view -->
+ </div>
+ </div>
+
+ <!-- footer -->
+ <div id="footer">
+ <div class="error" class="hidden"></div>
+ <div class="help" class="hidden"></div>
+ </div>
+
+ <!-- (invisible) template for help -->
+ <div id="templates" style="display: none">
+ <div class="selector-help">This is a CSS selector.
+ It describes the kinds of HTML elements that a CSS
+ rule's style will be applied to.</div>
+ <a class="learn-more" href="">more…</a>
+ <div class="error-msgs"></div>
+ <div class="suggestions">
+ <p>Following are some suggestions that may help.
+ Click on one for more detailed information.</p>
+ <ul>
+ <li>
+ <code><a href=""></a></code>
+ <p></p>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </body>
-.help a {
- color: inherit;
-}
-
-.help a.learn-more {
- display: inline-block;
- text-decoration: none;
- padding: 1px 2px 1px 2px;
- margin: 0px 2px 0px 2px;
- font-size: smaller;
- background: lightgray;
- color: #222222;
-}
-
-.help a.learn-more:hover {
- background: white;
- color: black;
-}
-
-#publish, #publish-dialog {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-#publish {
- font-size: small;
- padding: 4px;
- background: rgba(255, 255, 0, 0.5);
- position: absolute;
- left: 0px;
- bottom: 0px;
- z-index: 100000;
- cursor: pointer;
-}
-
-#publish:hover {
- background: green;
- color: white;
-}
-
-#publish-dialog {
- position: absolute;
- top: 0px;
- right: 0px;
- left: 0px;
- bottom: 0px;
- padding: 10px;
- z-index: 1000000;
- background-color: rgba(0, 0, 0, 0.75);
- color: white;
-}
-
-#publish-dialog a {
- color: inherit;
-}
-</style>
-<textarea class="html"></textarea>
<script type="text/html" id="initial-html">
<style>
+ body {
+ background-color: white;
+ color: #333;
+ padding-top: 1em;
+ }
+ h1 {
+ color: #333;
+ font-family: Georgia;
+ text-align: center;
+ text-shadow: 2px 2px 3px #CCC;
+ }
p {
- color: blue;
+ text-align: justify;
+ text-shadow: 2px 2px 3px #999;
}
</style>
-<p>Tinker with me.</p>
+
+<h1>Let's remix the web! It's easy!</h1>
+
+<p>Remixing the web is easier than you think. A bit of styling
+ here, an image replacement there, and suddenly a page can
+ look completely different! Give it a try with some of our
+ templates, or load your favourite site and let's get mixin'.</p>
</script>
-<div id="publish">Publish</div>
-<div id="publish-dialog" style="display: none">
- <h1>Hold on a sec.</h1>
- <p>We are publishing your thing.</p>
- <div class="done">
- <p>Ok, we are done.</p>
- <p>View your thing at <a class="view" href="" target="_blank"></a>.</p>
- <p>Remix your thing at <a class="remix" href="" target="_blank"></a>.</p>
- <p><a class="close" href="#">Go back to the editor</a>.</p>
- </div>
-</div>
-<iframe class="preview" src="blank.html"></iframe>
-<div class="error" style="display: none"></div>
-<div class="help" style="display: none"></div>
-<div id="templates" style="display: none">
- <div class="selector-help">This is a CSS selector. It describes the kinds of HTML elements that a CSS rule's style will be applied to.</div>
- <a class="learn-more" href="">more&hellip;</a>
- <div class="error-msgs"></div>
- <div class="suggestions">
- <p>Following are some suggestions that may help. Click on one for more detailed information.</p>
- <ul>
- <li>
- <code><a href=""></a></code>
- <p></p>
- </li>
- </ul>
- </div>
-</div>
-<script src="../jquery.min.js"></script>
-<script src="../underscore.min.js"></script>
-<script src="../codemirror2/lib/codemirror.js"></script>
-<script src="../codemirror2/mode/xml/xml.js"></script>
-<script src="../codemirror2/mode/javascript/javascript.js"></script>
-<script src="../codemirror2/mode/css/css.js"></script>
-<script src="../codemirror2/mode/htmlmixed/htmlmixed.js"></script>
-<script src="../../slowparse.js"></script>
-<script src="hacktionary-data.js"></script>
-<script src="editor.js"></script>
-<script src="publish.js"></script>
+
+ <script src="../jquery.min.js"></script>
+ <script src="../underscore.min.js"></script>
+ <script src="../codemirror2/lib/codemirror.js"></script>
+ <script src="../codemirror2/mode/xml/xml.js"></script>
+ <script src="../codemirror2/mode/javascript/javascript.js"></script>
+ <script src="../codemirror2/mode/css/css.js"></script>
+ <script src="../codemirror2/mode/htmlmixed/htmlmixed.js"></script>
+ <script src="../../slowparse.js"></script>
+ <script src="hacktionary-data.js"></script>
+ <script src="editor.js"></script>
+ <script src="publish.js"></script>
+</html>
View
6 slowparse.js
@@ -458,9 +458,9 @@ var Slowparse = (function() {
"dominant-baseline","drop-initial-after-adjust",
"drop-initial-after-align","drop-initial-before-adjust",
"drop-initial-before-align","drop-initial-size","drop-initial-value",
- "elevation","empty-cells","fit","fit-position","flex-align","flex-flow",
- "flex-line-pack","flex-order","flex-pack","float","float-offset","font",
- "font-family","font-size","font-size-adjust","font-stretch",
+ "elevation","empty-cells","filter","fit","fit-position","flex-align",
+ "flex-flow","flex-line-pack","flex-order","flex-pack","float","float-offset",
+ "font","font-family","font-size","font-size-adjust","font-stretch",
"font-style","font-variant","font-weight","grid-columns","grid-rows",
"hanging-punctuation","height","hyphenate-after","hyphenate-before",
"hyphenate-character","hyphenate-lines","hyphenate-resource","hyphens",
Something went wrong with that request. Please try again.