Skip to content

D
django-wiki
Commit 6a3c7775 by benjaoming
Options

resizable modals

parent e4d0669d
Showing with 124 additions and 22 deletions
wiki/static/wiki/bootstrap/css/wiki-bootstrap-responsive.css
......@@ -1023,3 +1023,24 @@
overflow: visible !important;
}
}
/******************************
WIKI STUFF
*******************************/
@media (min-width: 980px) {
.wiki-modal {
width: 80%;
margin-left: -40%;
}
}
@media (max-width: 979px) {
.wiki-modal {
width: 90%;
margin-left: -45%;
}
}
@media (max-width: 767px) {
.wiki-modal {
width: 90%;
margin-left: 0;
}
}
wiki/static/wiki/bootstrap/css/wiki-bootstrap.css
......@@ -5228,6 +5228,21 @@ input[type=file] {
padding: 30px 0;
clear: both;
}
.wiki-modal .modal-body iframe {
width: 100%;
min-height: 400px;
height: 100%;
border: 0;
}
.ui-resizable-s {
bottom: 0;
}
.ui-resizable-e {
right: 0;
}
.ui-resizable {
position: fixed !important;
}
@media print {
.navbar,
.nav-tabs li a,
......
wiki/static/wiki/bootstrap/css/wiki-bootstrap.min.css
......@@ -878,4 +878,8 @@ input[type=file]{float:none;width:auto;}
#article-menu{border-bottom:1px solid #EEE;}
#article-container{margin-top:20px;}
#wiki-footer{padding:30px 0;clear:both;}
.wiki-modal .modal-body iframe{width:100%;min-height:400px;height:100%;border:0;}
.ui-resizable-s{bottom:0;}
.ui-resizable-e{right:0;}
.ui-resizable{position:fixed !important;}
@media print{.navbar,.nav-tabs li a,#article-breadcrumbs{display:none;} #article-menu li{display:none;} #article-title-li{display:block !important;}}
wiki/static/wiki/bootstrap/less/wiki/wiki-bootstrap-responsive.less
......@@ -55,3 +55,30 @@
// From 979px and below, show a button to toggle navbar contents
@import "../responsive-navbar.less";
/******************************
WIKI STUFF
*******************************/
@media (min-width: 980px) {
.wiki-modal
{
width: 80%;
margin-left: -40%;
}
}
@media (max-width: 979px) {
.wiki-modal
{
width: 90%;
margin-left: -45%;
}
}
@media (max-width: 767px) {
.wiki-modal
{
width: 90%;
margin-left: 0;
}
}
wiki/static/wiki/bootstrap/less/wiki/wiki-bootstrap.less
......@@ -90,6 +90,25 @@ input[type=file] {float: none; width: auto;}
clear: both;
}
.wiki-modal .modal-body iframe
{
width: 100%;
min-height: 400px;
height: 100%;
border: 0;
}
// Resizable modals
.ui-resizable-s {
bottom: 0;
}
.ui-resizable-e {
right: 0;
}
.ui-resizable {
position: fixed !important;
}
@media print
{
.navbar,
......@@ -107,3 +126,5 @@ input[type=file] {float: none; width: auto;}
display: block !important;
}
}
wiki/templates/wiki/edit.html
......@@ -33,6 +33,8 @@
<div style="clear: both"></div>
{% include "wiki/includes/modals.html" %}
<div class="form-actions">
<a class="btn btn-large" onclick="$('#previewModal').modal('show'); document.getElementById('article_edit_form').target='previewWindow'; document.getElementById('article_edit_form').action='{% url 'wiki:preview' path=urlpath.path article_id=article.id %}'; $('#article_edit_form').submit()" href="#">
<span class="icon-eye-open"></span>
......@@ -51,9 +53,9 @@
{% endif %}
</div>
<div class="modal hide" id="previewModal" style="width: 80%; min-height: 500px; margin-left: -40%;">
<div class="modal hide wiki-modal" id="previewModal">
<div class="modal-body">
<iframe name="previewWindow" style="width: 100%; min-height: 400px; border: 0;" frameborder="0"></iframe>
<iframe name="previewWindow" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-large" data-dismiss="modal">
......
wiki/templates/wiki/history.html
......@@ -6,25 +6,11 @@
{% block wiki_contents_tab %}
{% include "wiki/includes/modals.html" %}
{% addtoblock "js" %}
<script type="text/javascript" src="{{ STATIC_URL }}wiki/js/diffview.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}wiki/js/diff.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('.accordion input[disabled!="disabled"][type="radio"]').first().attr('checked', 'true');
// Fix modal heights
$('.modal').css('height', $(window).height()*0.70 + 'px');
$('.modal').css('max-height', ($(window).height() * 0.8) + 'px');
$('.modal').each( function() {
var max_height = ($(this).height() - $(this).find('.modal-header').height() - $(this).find('.modal-footer').height()-265);
if (max_height > 0)
$(this).find('.modal-body').css('height', max_height + 'px');
else
$(this).find('.modal-body').css('height', ($(this).height() - 100) + 'px');
});
});
</script>
{% endaddtoblock %}
{% addtoblock "css" %}
<style type="text/css">
......@@ -153,9 +139,9 @@
</div>
<input type="hidden" name="r" value="" />
<div class="modal hide" id="previewModal" style="width: 80%; margin-left: -40%;">
<div class="modal hide wiki-modal" id="previewModal">
<div class="modal-body">
<iframe name="previewWindow" style="width: 100%; height: 100%; border: 0;" frameborder="0"></iframe>
<iframe name="previewWindow" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-large" data-dismiss="modal">
......@@ -176,13 +162,13 @@
</div>
</div>
<div class="modal hide" id="mergeModal" style="width: 80%; margin-left: -40%;">
<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" style="width: 100%; height: 100%; border: 0;" frameborder="0"></iframe>
<iframe name="mergeWindow" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-large" data-dismiss="modal">
......
wiki/templates/wiki/includes/modals.html 0 → 100644
{% load sekizai_tags %}
{% addtoblock "js" %}
<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("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%");
$(ui.element).find(".modal-body").each(function() {
$(this).css("min-height", 400 + ui.size.height - ui.originalSize.height);
});
$(ui.element).find("iframe").each(function() {
$(this).css("min-height", 400 + ui.size.height - ui.originalSize.height);
});
});
$(".modal").resizable();
});
</script>
{% endaddtoblock %}
{% addtoblock "css" %}
<link rel="stylesheet" href="{{ STATIC_URL }}wiki/js/jqueryui/jquery-ui-1.10.0.custom.min.css" type="text/css" />
{% endaddtoblock %}
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