make editor page responsive to smaller screens
This commit is contained in:
Matthew Scragg
parent
f1c675973d
commit
8f6823676a
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -186,3 +194,129 @@ a.label {
|
|||
font-size: 14px !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 =
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>Realms</title>
|
||||
<title>{{ config.SITE_TITLE }}</title>
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
|
||||
|
||||
{% for bundle in g.assets['css'] %}
|
||||
|
|
@ -38,10 +38,10 @@
|
|||
</div>
|
||||
<div class="navbar-collapse collapse navbar-inverse-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="{{ url_for('wiki.create') }}">New</a></li>
|
||||
<li><a href="{{ url_for('wiki.create') }}"><i class="fa fa-plus"></i> New</a></li>
|
||||
{% if name %}
|
||||
<li><a href="{{ url_for('wiki.edit', name=name) }}">Edit</a></li>
|
||||
<li><a href="{{ url_for('wiki.history', name=name) }}">History</a></li>
|
||||
<li><a href="{{ url_for('wiki.edit', name=name) }}"><i class="fa fa-pencil"></i> Edit</a></li>
|
||||
<li><a href="{{ url_for('wiki.history', name=name) }}"><i class="fa fa-clock-o"></i> History</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
|
|
@ -54,14 +54,14 @@
|
|||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="{{ url_for('auth.settings') }}">Settings</a></li>
|
||||
<li><a href="{{ url_for('auth.logout') }}">Logout</a></li>
|
||||
<li><a href="{{ url_for('auth.settings') }}"><i class="fa fa-gear"></i> Settings</a></li>
|
||||
<li><a href="{{ url_for('auth.logout') }}"><i class="fa fa-power-off"></i> Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
{% else %}
|
||||
<li><a href="{{ url_for('auth.login') }}"><i class="fa fa-user"></i> Login</a></li>
|
||||
{% if config.REGISTRATION_ENABLED %}
|
||||
<li><a href="{{ url_for('auth.register') }}"><i class="fa fa-pencil"></i> Register</a></li>
|
||||
<li><a href="{{ url_for('auth.register') }}"><i class="fa fa-users"></i> Register</a></li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,6 @@
|
|||
MDR.sanitize = false;
|
||||
$("#start-togetherjs").removeClass('btn-danger').html('Collaborate').prop('disabled', false);
|
||||
};
|
||||
|
||||
</script>
|
||||
<script src="https://togetherjs.com/togetherjs-min.js"></script>
|
||||
{% endblock %}
|
||||
|
|
@ -46,22 +45,27 @@
|
|||
{% block body %}
|
||||
<div id="app-wrap">
|
||||
<div id="app-controls" class="row">
|
||||
<div class="col-xs-3">
|
||||
<div class="col-xs-4 col-md-3">
|
||||
<input id="page-name" type="text" class="form-control input-sm" name="name" placeholder="Name" value="{{- name -}}" />
|
||||
</div>
|
||||
<div class="col-xs-3">
|
||||
<div class="col-xs-4 col-md-3">
|
||||
<input id="page-message" type="text" class="form-control input-sm" name="page-message" placeholder="Comment" value="" />
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<div class="col-md-6 col-xs-4">
|
||||
<div class="pull-right">
|
||||
|
||||
<button class="btn btn-success btn-sm" id="start-togetherjs" type="button"
|
||||
<button class="btn btn-default btn-sm" id="start-togetherjs" type="button"
|
||||
onclick="TogetherJS(this); return false">
|
||||
Collaborate
|
||||
|
||||
<i class="fa fa-comments-o visible-xs"></i>
|
||||
<span class="hidden-xs">Collaborate</span>
|
||||
</button>
|
||||
|
||||
<a href="#" id="drop6" role="button" class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown">Theme <b class="caret"></b></a>
|
||||
<a href="#" id="drop6" role="button" class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown">
|
||||
<i class="fa fa-paint-brush visible-xs"></i>
|
||||
<span class="hidden-xs">Theme <i class="fa fa-caret-down"></i></span>
|
||||
</a>
|
||||
<ul id="theme-list" class="dropdown-menu" role="menu" aria-labelledby="drop6">
|
||||
<li><a tabindex="-1" href="#" data-value="ace/theme/chrome" >Chrome</a></li>
|
||||
<li><a tabindex="-1" href="#" data-value="ace/theme/clouds" >Clouds</a></li>
|
||||
|
|
@ -98,14 +102,25 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="position: relative; height: 100%; margin-left: 15px; margin-right: 15px;">
|
||||
<div class="col-xs-6" style="position: absolute; bottom: 20px; top: 10px; left:0;border-right: 2px solid transparent;">
|
||||
<div id="editor">{{ content }}</div>
|
||||
</div>
|
||||
<div class="col-xs-6" style="position: absolute; bottom: 20px; top: 10px; right:0; border-left: 2px solid transparent;">
|
||||
<div id="preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="entry-markdown active">
|
||||
<header class="floatingheader" id="entry-markdown-header">
|
||||
<small>Markdown</small>
|
||||
<a class="markdown-help" href=""><span class="hidden">What is Markdown?</span></a>
|
||||
</header>
|
||||
<section id="entry-markdown-content" class="entry-markdown-content">
|
||||
<div id="editor" class="ace-editor">{{ content }}</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="entry-preview">
|
||||
<header class="floatingheader" id="entry-preview-header">
|
||||
<small>Preview</small>
|
||||
</header>
|
||||
<section class="entry-preview-content">
|
||||
<div id="preview"></div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Loading…
Reference in a new issue