Skip to content

D
django-wiki
Commit 4aef17a6 by benjaoming
Options

Fix #181 and #183 -- responsive modals, prepend for form inputs, form controls… 

Fix #181 and #183 -- responsive modals, prepend for form inputs, form controls fixed for horizontal and vertical layouts
parent eb21b9d2
Showing with 172 additions and 87 deletions
wiki/forms.py
......@@ -227,7 +227,7 @@ class TextInputPrepend(forms.TextInput):
def render(self, *args, **kwargs):
html = super(TextInputPrepend, self).render(*args, **kwargs)
return mark_safe('<div class="input-prepend"><span class="add-on">%s</span>%s</div>' % (self.prepend, html))
return mark_safe('<div class="input-group"><span class="input-group-addon">%s</span>%s</div>' % (self.prepend, html))
class CreateForm(forms.Form, SpamProtectionMixin):
......
wiki/static/wiki/bootstrap/less/wiki/wiki-bootstrap.less
......@@ -18,7 +18,13 @@
#div_id_title .asteriskField{display:none}
#id_title {font-size: 20px; height: 30px; padding: 6px; width: 98%;}
#id_title {
font-size: 20px;
height: 40px;
padding: 6px;
display: block;
width: 98%;
}
#id_summary {width: 98%; padding: 6px;}
h1#article-title {font-size: 2.5em; margin-top: 0px;}
......@@ -26,12 +32,7 @@ h1#article-title {font-size: 2.5em; margin-top: 0px;}
#article_edit_form label {max-width: 100px;}
#article_edit_form .controls {margin-left: 120px;}
.form-horizontal label { font-size: 16px; font-weight: normal; color: #777;}
.settings-form label {min-width: 250px; font-size: inherit; font-weight: normal;}
.settings-form .controls {margin-left: 270px;}
.settings-form select {}
.settings-form .form-actions { padding-left: 270px; }
label { font-size: 16px; font-weight: normal; color: #777;}
.controls ul
{
......@@ -223,20 +224,77 @@ input[type=file] {float: none; width: auto;}
}
}
/******************************
BOOTSTRAP 2 COMPAT
FORMS - horizontal and vertical
*******************************/
.wiki-control input,
.wiki-control select,
.wiki-control textarea,
/* Special form class that just has 100% width elements */
.wiki-form-block input[type='text'],
.wiki-form-block textarea,
.wiki-form-block select
{
display: block;
width: auto;
.form-control;
}
/* General styling, any kind of form input */
.wiki-control input
{
display: inline-block;
height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
color: @gray;
vertical-align: middle;
width: 280px;
display: inline-block;
}
.form-horizontal .wiki-control input,
.form-horizontal .wiki-control select,
.form-horizontal .wiki-control textarea
{
width: 280px;
display: inline-block;
}
.form-horizontal .wiki-control input[type='text'],
.form-horizontal .wiki-control select,
.form-horizontal .wiki-control textarea
{
.form-control;
}
.form-horizontal .wiki-control .input-group
{
display: inline-table;
width: 280px;
}
.form-vertical .wiki-control input[type='text'],
.form-vertical .wiki-control select,
.form-vertical .wiki-control textarea
{
.form-control;
width: 95%; /* make room for an asterix */
display: inline-block;
}
/* Reset column grid layout for vertical forms */
.form-vertical .wiki-control,
.form-vertical .wiki-label
{
display: block;
float: none;
padding: 0; margin: 0;
width: 100%;
}
.form-actions {
.make-row();
padding: 19px 15px 20px;
padding-left: 0;
margin-top: 20px;
......@@ -257,22 +315,24 @@ input[type=file] {float: none; width: auto;}
RESPONSIVE STUFF
*******************************/
.wiki-modal .modal-content { width: 100%; }
@media (min-width: 980px) {
.wiki-modal
.wiki-modal .modal-dialog
{
width: 80%;
margin-left: -40%;
}
}
@media (max-width: 979px) {
.wiki-modal
.wiki-modal .modal-dialog
{
width: 90%;
margin-left: -45%;
}
}
@media (max-width: 767px) {
.wiki-modal
.wiki-modal .modal-dialog
{
width: 90%;
margin-left: 0;
......
wiki/static/wiki/markitup/skins/simple/style.css
......@@ -17,6 +17,12 @@
}
.markItUpContainer {
font:11px Verdana, Arial, Helvetica, sans-serif;
}
.markItUpHeader
{
padding-top: 5px;
padding-bottom: 15px;
}
.markItUpEditor {
font:12px 'Courier New', Courier, monospace;
......@@ -115,4 +121,4 @@
.markItUpHeader ul ul a:hover {
color:#FFF;
background-color:#000;
}
\ No newline at end of file
}
wiki/templates/wiki/create.html
......@@ -49,6 +49,8 @@
<form method="POST" class="form-horizontal">
{% wiki_form create_form %}
<div class="form-group form-actions">
<div class="col-lg-2"></div>
<div class="col-lg-10">
<a href="{% url 'wiki:get' path=parent_urlpath.path %}" class="btn btn-default btn-large">
<span class="icon-circle-arrow-left"></span>
{% trans "Go back" %}
......@@ -57,6 +59,7 @@
<span class="icon-plus"></span>
{% trans "Create article" %}
</button>
</div>
</div>
</form>
......
wiki/templates/wiki/edit.html
......@@ -56,19 +56,23 @@
{% endif %}
</div>
</div>
<div class="modal hide wiki-modal" id="previewModal">
<div class="modal-body">
<iframe name="previewWindow" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default btn-large" data-dismiss="modal">
<span class="icon-circle-arrow-left"></span>
{% trans "Back to editor" %}
</a>
<a class="btn btn-large btn-primary" onclick="document.getElementById('article_edit_form').target=''; document.getElementById('article_edit_form').action='{% url 'wiki:edit' path=urlpath.path article_id=article.id %}'; document.getElementById('article_edit_form').submit();" href="#">
<span class="icon-ok"></span>
{% trans "Save changes" %}
</a>
<div class="modal fade wiki-modal" id="previewModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<iframe name="previewWindow" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default btn-large" data-dismiss="modal">
<span class="icon-circle-arrow-left"></span>
{% trans "Back to editor" %}
</a>
<a class="btn btn-large btn-primary" onclick="document.getElementById('article_edit_form').target=''; document.getElementById('article_edit_form').action='{% url 'wiki:edit' path=urlpath.path article_id=article.id %}'; document.getElementById('article_edit_form').submit();" href="#">
<span class="icon-ok"></span>
{% trans "Save changes" %}
</a>
</div>
</div>
</div>
</div>
{% endblock %}
......
wiki/templates/wiki/history.html
......@@ -140,53 +140,61 @@
</div>
<input type="hidden" name="r" value="" />
<div class="modal hide wiki-modal" id="previewModal">
<div class="modal-body">
<iframe name="previewWindow" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default btn-large" data-dismiss="modal">
<span class="icon-circle-arrow-left"></span>
{% trans "Back to history view" %}
</a>
{% if article|can_write:user %}
<a href="#" class="btn btn-large btn-primary switch-to-revision">
<span class="icon-flag"></span>
{% trans "Switch to this version" %}
</a>
{% else %}
<a href="#" class="btn btn-large btn-primary disabled">
<span class="icon-lock"></span>
{% trans "Switch to this version" %}
</a>
{% endif %}
<div class="modal fade wiki-modal" id="previewModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<iframe name="previewWindow" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default btn-large" data-dismiss="modal">
<span class="icon-circle-arrow-left"></span>
{% trans "Back to history view" %}
</a>
{% if article|can_write:user %}
<a href="#" class="btn btn-large btn-primary switch-to-revision">
<span class="icon-flag"></span>
{% trans "Switch to this version" %}
</a>
{% else %}
<a href="#" class="btn btn-large btn-primary disabled">
<span class="icon-lock"></span>
{% trans "Switch to this version" %}
</a>
{% endif %}
</div>
</div>
</div>
</div>
<div class="modal hide wiki-modal" id="mergeModal">
<div class="modal-header">
<h1>{% trans "Merge with current" %}</h1>
<p class="lead"><span class="icon-info-sign"></span> {% trans "When you merge a revision with the current, all data will be retained from both versions and merged at its approximate location from each revision." %} <strong>{% trans "After this, it's important to do a manual review." %}</strong></p>
</div>
<div class="modal-body">
<iframe name="mergeWindow" frameborder="0" style="min-height: 0;"></iframe>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default btn-large" data-dismiss="modal">
<span class="icon-circle-arrow-left"></span>
{% trans "Back to history view" %}
</a>
{% if article|can_write:user %}
<a href="#" class="btn btn-large btn-primary merge-revision-commit">
<span class="icon-file"></span>
{% trans "Create new merged version" %}
</a>
{% else %}
<a href="#" class="btn btn-large btn-primary disabled">
<span class="icon-lock"></span>
{% trans "Create new merged version" %}
</a>
{% endif %}
<div class="modal fade wiki-modal" id="mergeModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1>{% trans "Merge with current" %}</h1>
<p class="lead"><span class="icon-info-sign"></span> {% trans "When you merge a revision with the current, all data will be retained from both versions and merged at its approximate location from each revision." %} <strong>{% trans "After this, it's important to do a manual review." %}</strong></p>
</div>
<div class="modal-body">
<iframe name="mergeWindow" frameborder="0" style="min-height: 0;"></iframe>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default btn-large" data-dismiss="modal">
<span class="icon-circle-arrow-left"></span>
{% trans "Back to history view" %}
</a>
{% if article|can_write:user %}
<a href="#" class="btn btn-large btn-primary merge-revision-commit">
<span class="icon-file"></span>
{% trans "Create new merged version" %}
</a>
{% else %}
<a href="#" class="btn btn-large btn-primary disabled">
<span class="icon-lock"></span>
{% trans "Create new merged version" %}
</a>
{% endif %}
</div>
</div>
</div>
</div>
</form>
......
wiki/templates/wiki/includes/formfield.html
......@@ -3,12 +3,14 @@
{% else %}
<div id="div_{{ field.auto_id }}" class="form-group{% if field.errors %} has-error{% endif %}">
<div class="wiki-label col-lg-2">
{% if field.label %}
<label for="{{ field.id_for_label }}" class="col-lg-2 control-label {% if field.field.required %}requiredField{% endif %}">
<label for="{{ field.id_for_label }}" class="control-label {% if field.field.required %}requiredField{% endif %}">
{{ field.label|safe }}
</label>
{% endif %}
<div class="col-lg-10 wiki-control">
</div>
<div class="wiki-control col-lg-10">
{{ field }} {% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
{% if field.errors %}
{% for error in field.errors %}
......
wiki/templates/wiki/includes/modals.html
......@@ -3,18 +3,18 @@
<script type="text/javascript" src="{{ STATIC_URL }}wiki/js/jqueryui/jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".modal").on("resizestart", function(event, ui) {
$(".modal-content").on("resizestart", function(event, ui) {
$(ui.element).find(".modal-body, iframe").each(function() {
elem = $(this);
elem.data("resizeoriginalheight", elem.height());
});
});
$(".modal").on("resize", function(event, ui) {
ui.element.css("margin-left", -ui.size.width/2);
ui.element.css("margin-top", -ui.size.height/2);
ui.element.css("top", "50%");
ui.element.css("left", "50%");
$(".modal-content").on("resize", function(event, ui) {
ui.element.parents('.modal-dialog').css("margin-left", -ui.size.width/2);
ui.element.parents('.modal-dialog').css("margin-top", -ui.size.height/2);
ui.element.parents('.modal-dialog').css("top", "50%");
ui.element.parents('.modal-dialog').css("left", "50%");
$(ui.element).find(".modal-body,iframe").each(function() {
elem = $(this);
......@@ -22,7 +22,7 @@ $(document).ready(function() {
});
});
$(".modal").resizable();
$(".modal-content").resizable();
});
</script>
{% endaddtoblock %}
......
wiki/templates/wiki/settings.html
......@@ -11,10 +11,13 @@
<h3 class="page-header">{{ form.settings_form_headline }}</h2>
{% wiki_form form %}
<div class="form-group form-actions">
<button type="submit" name="save" value="1" class="btn btn-primary">
<span class="icon-ok"></span>
{% trans "Save changes" %}
</button>
<div class="col-lg-2"></div>
<div class="col-lg-10">
<button type="submit" name="save" value="1" class="btn btn-primary btn-large">
<span class="icon-ok"></span>
{% trans "Save changes" %}
</button>
</div>
</div>
</form>
{% endfor %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment