Personal/realms-wiki
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

make editor page responsive to smaller screens

Browse source
This commit is contained in:
Matthew Scragg 2014-09-25 18:17:38 -05:00
parent f1c675973d
commit 8f6823676a
5 changed files with 191 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

14
realms/templates/layout.html
View file

@ -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> &nbsp;Login</a></li>
{% if config.REGISTRATION_ENABLED %}
<li><a href="{{ url_for('auth.register') }}"><i class="fa fa-pencil"></i> &nbsp;Register</a></li>
<li><a href="{{ url_for('auth.register') }}"><i class="fa fa-users"></i> &nbsp;Register</a></li>
{% endif %}
{% endif %}
</ul>

45
realms/templates/wiki/edit.html
View file

@ -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 %}