Several Survey UI fixes.
authorDaniel Diniz <ajaksu@gmail.com>
Wed, 08 Jul 2009 10:40:46 +0200
changeset 2570 851640749319
parent 2569 494a4fb98649
child 2571 dac91fecae38
Several Survey UI fixes. Fixes: Too narrow fieldsets in new question/option dialogs. Survey submit (on take view) and save/export/etc. buttons at weird places, instead of at bottom. Weird placement of radio buttons in Opera. Too narrow selects in IE. Broken images in edit view in IE and Opera. Reviewed by: Lennard de Rijk (Only on IE)
app/soc/content/css/soc-090418-ie.css
app/soc/content/css/soc-090706.css
app/soc/content/js/survey-edit-090706.js
app/soc/content/js/survey-take-090706.js
app/soc/templates/soc/survey/edit.html
app/soc/templates/soc/survey/take.html
app/soc/templates/soc/survey/universal_choice_editor.html
--- a/app/soc/content/css/soc-090418-ie.css	Tue Jul 07 21:16:57 2009 +0200
+++ b/app/soc/content/css/soc-090418-ie.css	Wed Jul 08 10:40:46 2009 +0200
@@ -30,3 +30,11 @@
   width: 200px;
 }
 
+#survey_widget select,
+#survey_widget input {
+  width: auto !important;
+}
+
+#survey_widget textarea {
+  width: 95%;
+}
--- a/app/soc/content/css/soc-090706.css	Tue Jul 07 21:16:57 2009 +0200
+++ b/app/soc/content/css/soc-090706.css	Wed Jul 08 10:40:46 2009 +0200
@@ -662,7 +662,7 @@
 }
 
 div #survey_widget table {
-  width:100%
+  width:95%
 }
 
 div #survey_widget th,
@@ -674,7 +674,6 @@
 
 div #survey_widget textarea.long_answer {
   padding: 10px;
-  width: 500px;
 }
 
 div #survey_widget textarea.tooltip_entry {
@@ -682,8 +681,8 @@
   width: 80%;
 }
 
-div #survey_widget input.text_question {
-  width: 320px;
+div #survey_widget textarea {
+  width: 90% !important;
 }
 
 div #survey_widget td.formfieldlabel {
@@ -699,9 +698,6 @@
 
 #survey_widget.quant_radio input,
 #survey_widget.quant_radio label {
-  clear: left;
-  display: block;
-  float: left;
   margin: 4px;
 }
 
@@ -722,7 +718,7 @@
 }
 
 div #survey_widget th label {
-  display: block;
+  /*display: block;*/
   max-width: 180px;
 }
 
@@ -747,10 +743,8 @@
   -webkit-border-radius: 5px;
 }
 
-div #survey_widget fieldset,
-div #survey_widget th,
-div #survey_widget td,
 div #survey_widget select {
+  display: inline;
 }
 
 div #survey_widget td {
@@ -768,13 +762,17 @@
 }
 
 div #survey_widget textarea.comment{
-margin-bottom: 30px;
+  margin-bottom: 30px;
 }
 
 div #survey_widget td > fieldset > label {
   font-size: 11px;
 }
 
+.ui-dialog-content {
+  padding: 0px !important;
+  margin: 5px !important;
+}
 
 #dialog {
   font-size: 62.5%;
@@ -825,8 +823,10 @@
   padding: .3em;
 }
 
-.pick_multi input {
+.pick_multi input,
+.quant_radio input {
   display: inline;
+  width: auto !important;
 }
 
 /* NEWS FEED FEEDS */
--- a/app/soc/content/js/survey-edit-090706.js	Tue Jul 07 21:16:57 2009 +0200
+++ b/app/soc/content/js/survey-edit-090706.js	Wed Jul 08 10:40:46 2009 +0200
@@ -53,7 +53,7 @@
     */
 
     var SURVEY_PREFIX = 'survey__';
-    var del_el = ["<a class='delete'><img '",
+    var del_el = ["<a class='delete'><img ",
                   "src='/soc/content/images/minus.gif'/></a>"].join("");
     var del_li = ["<a class='delete_item' id='del_",
                   "' ><img src='/soc/content/images/minus.gif'/></a> "];
@@ -62,7 +62,7 @@
 
     function renderHTML() {
       // render existing survey forms
-      widget.find('td > label').prepend(del_el).end();
+      widget.find('td.twolineformfieldlabel > label').prepend(del_el).end();
 
       $('ol').find('li').each(
         function () {
@@ -487,6 +487,7 @@
       bgiframe: true,
       autoOpen: false,
       height: 300,
+      width: 300,
       modal: true,
       buttons: {
         'Add option': function () {
@@ -533,7 +534,7 @@
   $(function () {
     //  Dialog for adding new question to survey
     var SURVEY_PREFIX = 'survey__';
-    var del_el = ["<a class='delete'><img '",
+    var del_el = ["<a class='delete'><img ",
               "src='/soc/content/images/minus.gif'/></a>"].join("");
     var del_li = ["<a class='delete_item' id='del_",
                   "' ><img src='/soc/content/images/minus.gif'/></a> "];
@@ -546,6 +547,7 @@
       bgiframe: true,
       autoOpen: false,
       height: 400,
+      width: 300,
       modal: true,
       buttons: {
         'Add question': function () {
--- a/app/soc/content/js/survey-take-090706.js	Tue Jul 07 21:16:57 2009 +0200
+++ b/app/soc/content/js/survey-take-090706.js	Wed Jul 08 10:40:46 2009 +0200
@@ -28,10 +28,6 @@
     */
 
     var widget = $('div#survey_widget');
-    widget.parents('td.formfieldvalue:first').css({
-      'float': 'left',
-      'width': 200
-    });
 
     // TODO(ajaksu) survey below is unused, remove if no known use is predicted
     var survey = widget.find('tbody:first');
--- a/app/soc/templates/soc/survey/edit.html	Tue Jul 07 21:16:57 2009 +0200
+++ b/app/soc/templates/soc/survey/edit.html	Wed Jul 08 10:40:46 2009 +0200
@@ -51,7 +51,7 @@
 
   <span class="formfieldlabel">Survey content:</span>
 
-<div style="width:100%; float:left;">
+<div style="width:100%;">
   <div class="survey_admin" id="survey_widget">
     <table>
       {% block survey_content %}
@@ -160,9 +160,9 @@
 
 <div id="new_item_dialog" title="Name new option">
   <form>
-    <fieldset style="width: 50px;">
+    <fieldset style="margin: 5px;">
 
-      <label for="new_item_name">Name</label>
+      <label for="new_item_name">Name</label><br>
       <input type="text" name="new_item_name" id="new_item_name"
        class="text ui-widget-content ui-corner-all" value="" />
 
@@ -172,21 +172,21 @@
 
 <div id="new_question_dialog" title="Name new question">
   <form>
-    <fieldset style="width: 50px;">
+    <fieldset style="margin: 5px;">
 
-      <label for="new_question_name">ID (link_id-like)</label>
+      <label for="new_question_name">ID (link_id-like)</label><br>
       <input type="text" name="new_question_name" id="new_question_name"
-       class="text ui-widget-content ui-corner-all" value="" />
+       class="text ui-widget-content ui-corner-all" value="" /><br>
 
-      <label for="new_question_content">Title</label>
+      <label for="new_question_content">Title</label><br>
       <input type="text" name="new_question_content" id="new_question_content"
-       class="text ui-widget-content ui-corner-all" value="" />
+       class="text ui-widget-content ui-corner-all" value="" /><br>
 
       <div id='question_options_div'>
-        <label for="new_question_options">Options</label>
+        <label for="new_question_options">Options</label><br>
         <textarea name="new_question_options"
          id="new_question_options" class="text ui-widget-content ui-corner-all"
-         rows="7" cols="20"></textarea>
+         rows="7" cols="20"></textarea><br>
       </div>
 
      </fieldset>
--- a/app/soc/templates/soc/survey/take.html	Tue Jul 07 21:16:57 2009 +0200
+++ b/app/soc/templates/soc/survey/take.html	Wed Jul 08 10:40:46 2009 +0200
@@ -44,7 +44,7 @@
   {% else %}
     <form method="post">
   {% endif %}
-    <div style="width:100%; float:left; clear:right;">
+    <div style="width:100%;">
       <div class="{{ status }}" id="survey_widget">
         <table>
           {% block form_table %}
@@ -54,13 +54,13 @@
       </div> {# end survey_widget #}
     </div>
 
-<br/><br/>
-    <div style="float:left">
+<br><br>
+    <div>
       <table>
         <tbody>
           <tr>
             <td>
-              <input type="submit" value="Submit" style="font-weight: bold;"/>
+              <input type="submit" value="Submit" style="font-weight: bold;">
             </td>
           </tr>
         </tbody>
--- a/app/soc/templates/soc/survey/universal_choice_editor.html	Tue Jul 07 21:16:57 2009 +0200
+++ b/app/soc/templates/soc/survey/universal_choice_editor.html	Wed Jul 08 10:40:46 2009 +0200
@@ -46,7 +46,7 @@
  <tr>
   <td  colspan='2'>
     <textarea id="tip_for_{{ name }}" name="tip_for_{{ name }}"
-     cols='20' rows='1' class="tooltip_entry">{{ tooltip_content }}</textarea>
+     cols='20' rows='3' class="tooltip_entry">{{ tooltip_content }}</textarea>
   </td>
  </tr>
 </table>