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

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