From 8f6823676ab8b43e1718c8a8631376c0e9db3f77 Mon Sep 17 00:00:00 2001 From: Matthew Scragg Date: Thu, 25 Sep 2014 18:17:38 -0500 Subject: [PATCH] make editor page responsive to smaller screens --- realms/static/css/style.css | 142 +++++++++++++++++++++++++++++++- realms/static/js/editor.js | 15 ++++ realms/templates/layout.html | 14 ++-- realms/templates/wiki/edit.html | 45 ++++++---- setup.py | 2 +- 5 files changed, 191 insertions(+), 27 deletions(-) diff --git a/realms/static/css/style.css b/realms/static/css/style.css index ea37b84..73478f7 100644 --- a/realms/static/css/style.css +++ b/realms/static/css/style.css @@ -10,6 +10,11 @@ background: #242628; } +.navbar-collapse.in .nav, .navbar-collapse.in, .navbar-collapse.collapsing { + z-index: 1000; + position: relative; +} + .navbar-toggle { margin-top: 8px; margin-bottom: 8px; @@ -28,6 +33,10 @@ color: #FFF !important; } +.navbar .fa { + margin-right: 5px; +} + .navbar .nav li { font-size: 1em; position: relative; @@ -59,6 +68,7 @@ margin:0; } +/* #preview { overflow: auto; position: absolute; @@ -96,7 +106,7 @@ font-size: 1.1em; line-height: 1.3em; } - +*/ .ace_gutter-cell { font-size: 1em; line-height: 1em; @@ -136,8 +146,6 @@ color: #aaa9a2; background-color: #000; border: 1px solid #000; - /* background-image: -webkit-linear-gradient(top, #fff 0%,#fff 25%,rgba(255,255,255,0.9) 100%); */ - /* background-image: linear-gradient(to bottom,#fff 0%,#fff 25%,rgba(255,255,255,0.9) 100%); */ font-size: 10px; } @@ -185,4 +193,130 @@ a.label { .diff { font-size: 14px !important; margin-bottom: 10px; -} \ No newline at end of file +} + +.entry-markdown.active { + z-index: 2; +} + +.entry-markdown, .entry-preview { + width: 50%; + padding: 15px; + position: absolute; + bottom: 0; + top: 40px; + background: #FFF; + box-shadow: rgba(0,0,0,0.05) 0 1px 5px; +} + +.entry-markdown { + left: 0; + border-right: #edece4 2px solid; +} + +.entry-preview { + right: 0; + border-left: #edece4 2px solid; +} + +.entry-preview-content { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 40px 10px 10px 10px; + overflow: auto; + //word-break: break-word; + cursor: default; +} + +.ace_editor { + height: auto; + position: absolute !important; + top: 0; + left: 0; + right: 0; + bottom: 0; + font-family: Inconsolata, monospace !important; + font-size: 1.4em !important; + line-height: 1.3em; +} + +.ace_content { + padding: 40px 3px; +} + +.floatingheader { + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 3; + height: 40px; + padding: 8px 15px 12px; + text-transform: uppercase; + color: #333; + background-color: #eee; +} + +@media (max-width:1000px) { + .ace_content { + padding: 3px; + } + + .entry-markdown, .entry-preview { + top: 80px; + left: 0; + right: 0; + width: 100%; + border: none; + min-height: 380px; + z-index: 1; + } + + .entry-markdown.active .entry-markdown-content { + display: block; + } + .entry-markdown-content { + display: none; + } + + .entry-preview.active .entry-preview-content { + display: block; + } + + .entry-preview-content { + display: none; + padding: 10px; + } + + .entry-markdown .floatingheader, .entry-preview .floatingheader { + cursor: pointer; + width: 50%; + border-right: #fff 2px solid; + color: #333; + font-weight: normal; + background: #EEE; + position: absolute; + top: -40px; + left: 0; + box-shadow: rgba(0,0,0,0.1) 0 -2px 3px inset; + } + + .entry-preview .floatingheader { + right: 0; + left: auto; + border-right: none; + border-left: #fff 2px solid; + } + + .entry-markdown.active header, .entry-preview.active header { + cursor: auto; + box-shadow: none; + background-color: #3498db; + color: #fff; + } + +} + diff --git a/realms/static/js/editor.js b/realms/static/js/editor.js index 9185ff7..9015209 100644 --- a/realms/static/js/editor.js +++ b/realms/static/js/editor.js @@ -12,6 +12,21 @@ $(function () { , $wordcounter = $('#wordcounter') , $pagename = $("#page-name"); + var $entry_markdown_header = $("#entry-markdown-header"); + var $entry_preview_header = $("#entry-preview-header"); + + // Tabs + $entry_markdown_header.click(function(){ + $("section.entry-markdown").addClass('active'); + $("section.entry-preview").removeClass('active'); + }); + + $entry_preview_header.click(function(){ + $("section.entry-preview").addClass('active'); + $("section.entry-markdown").removeClass('active'); + }); + + var editor , autoInterval , profile = diff --git a/realms/templates/layout.html b/realms/templates/layout.html index d518d3e..586bf02 100644 --- a/realms/templates/layout.html +++ b/realms/templates/layout.html @@ -6,7 +6,7 @@ - Realms + {{ config.SITE_TITLE }} {% for bundle in g.assets['css'] %} @@ -38,10 +38,10 @@
diff --git a/realms/templates/wiki/edit.html b/realms/templates/wiki/edit.html index c2d5e95..01f9556 100644 --- a/realms/templates/wiki/edit.html +++ b/realms/templates/wiki/edit.html @@ -38,7 +38,6 @@ MDR.sanitize = false; $("#start-togetherjs").removeClass('btn-danger').html('Collaborate').prop('disabled', false); }; - {% endblock %} @@ -46,22 +45,27 @@ {% block body %}
-
+
-
+
-
+
- - Theme + + + +
-
-
-
{{ content }}
-
-
-
-
-
+
+
+ Markdown + +
+
+
{{ content }}
+
+
+ +
+
+ Preview +
+
+
+
+
+
{% endblock %} \ No newline at end of file diff --git a/setup.py b/setup.py index eade28f..2c0f542 100644 --- a/setup.py +++ b/setup.py @@ -8,7 +8,7 @@ with open('README.md') as f: with open('requirements.txt') as f: required = f.read().splitlines() -VERSION = '0.1.10' +VERSION = '0.2.0' CLASSIFIERS = [ 'Intended Audience :: Developers',