Improve keyword edit form, particularly for mobile

diff --git a/karmaworld/apps/quizzes/forms.py b/karmaworld/apps/quizzes/forms.py
index f91c4ea2cd1df9cd65a425bc20d0b4ceac700a37..0708b3bb5f26e95f7cf7b5475fa02e244e95f1db 100644 (file)
--- a/karmaworld/apps/quizzes/forms.py
+++ b/karmaworld/apps/quizzes/forms.py
@@ -1,17 +1,11 @@
-from django import forms
-from django.forms import TextInput, Textarea
+#!/usr/bin/env python
+# -*- coding:utf8 -*-
+# Copyright (C) 2014  FinalsClub Foundation
+from django.forms import TextInput, Textarea, HiddenInput, Form, CharField, IntegerField
 
 
-class KeywordForm(forms.Form):
-    keyword = forms.CharField(widget=TextInput)
-    definition = forms.CharField(widget=Textarea)
-    id = forms.IntegerField(required=False)
-
-    def as_p(self):
-        return '<div class="row keyword-form-row"><div class="small-4 columns">' + \
-                self['keyword'].as_text(attrs={'placeholder': 'Keyword', 'class': 'keyword'}) + \
-                '</div><div class="small-8 columns">' + \
-                self['definition'].as_textarea(attrs={'placeholder': 'Definition', 'class': 'definition'}) + \
-                self['id'].as_hidden(attrs={'class': 'object-id'}) + \
-                '</div></div>'
+class KeywordForm(Form):
+    keyword = CharField(widget=TextInput(attrs={'placeholder': 'Keyword', 'class': 'keyword'}))
+    definition = CharField(widget=Textarea(attrs={'placeholder': 'Definition', 'class': 'definition'}))
+    id = IntegerField(widget=HiddenInput(attrs={'class': 'object-id'}), required=False)
 

diff --git a/karmaworld/assets/css/quiz.css b/karmaworld/assets/css/quiz.css
index 48874cb18c8f62b3d8c41b3676dbecef589656ca..946431af1bd7a3d30c4bba633c80b0633b6d3b58 100644 (file)
--- a/karmaworld/assets/css/quiz.css
+++ b/karmaworld/assets/css/quiz.css
@@ -73,4 +73,9 @@
   font-size: 10px;
   color: #8e8e8e;
   margin-bottom: 20px;
+}
+
+#add-row-btn
+{
+  cursor: pointer;
 }
\ No newline at end of file

diff --git a/karmaworld/assets/js/quiz.js b/karmaworld/assets/js/quiz.js
index 50c039e3ba0c51416f7f1dde8cba2d175ac748b2..5fa8dbd3390d33e93eabdbac4ac1409d5383f24b 100644 (file)
--- a/karmaworld/assets/js/quiz.js
+++ b/karmaworld/assets/js/quiz.js
@@ -1,39 +1,39 @@
 
-function addForm(event) {
-
+function tabHandler(event) {
   // check for:
   // key pressed was TAB
   // key was pressed in last row
   if (event.which == 9 &&
       (!$(this).closest('div.keyword-form-row').next().hasClass('keyword-form-row'))) {
-
-    var prototypeFormString = $('#keyword-form-prototype').text();
-    var newForm = $('#keyword-form-rows').append(prototypeFormString).find('.keyword-form-row:last');
-    var totalForms = $('#id_form-TOTAL_FORMS').attr('value');
-    var newIdRoot = 'id_form-' + totalForms + '-';
-    var newNameRoot = 'form-' + totalForms + '-';
-
-    var keywordInput = newForm.find('.keyword');
-    console.log(newForm);
-    console.log(keywordInput);
-    keywordInput.attr('id', newIdRoot + 'keyword');
-    keywordInput.attr('name', newNameRoot + 'keyword');
-
-    var definitionInput = newForm.find('.definition');
-    definitionInput.attr('id', newIdRoot + 'definition');
-    definitionInput.attr('name', newNameRoot + 'definition');
-    definitionInput.keydown(addForm);
-
-    var objectIdInput = newForm.find('.object-id');
-    objectIdInput.attr('id', newIdRoot + 'id');
-    objectIdInput.attr('name', newNameRoot + 'id');
-
-    $('#id_form-TOTAL_FORMS').attr('value', parseInt(totalForms)+1);
-
+    addForm(event);
   }
 }
 
+function addForm(event) {
+  var prototypeForm = $('#keyword-form-prototype div.keyword-form-row').clone().appendTo('#keyword-form-rows');
+  var newForm = $('.keyword-form-row:last');
+  var totalForms = $('#id_form-TOTAL_FORMS').attr('value');
+  var newIdRoot = 'id_form-' + totalForms + '-';
+  var newNameRoot = 'form-' + totalForms + '-';
+
+  var keywordInput = newForm.find('.keyword');
+  keywordInput.attr('id', newIdRoot + 'keyword');
+  keywordInput.attr('name', newNameRoot + 'keyword');
+
+  var definitionInput = newForm.find('.definition');
+  definitionInput.attr('id', newIdRoot + 'definition');
+  definitionInput.attr('name', newNameRoot + 'definition');
+  definitionInput.keydown(addForm);
+
+  var objectIdInput = newForm.find('.object-id');
+  objectIdInput.attr('id', newIdRoot + 'id');
+  objectIdInput.attr('name', newNameRoot + 'id');
+
+  $('#id_form-TOTAL_FORMS').attr('value', parseInt(totalForms)+1);
+}
+
 $(function() {
-  $('.definition').keydown(addForm);
+  $('.definition').keydown(tabHandler);
+  $('#add-row-btn').click(addForm);
 });
 

diff --git a/karmaworld/templates/quizzes/keyword_edit.html b/karmaworld/templates/quizzes/keyword_edit.html
index cfddcc2bb60f8fba2325bc9a363a0fb4901b633b..eb8af251397af3ff6f776d44717856cde9eea60b 100644 (file)
--- a/karmaworld/templates/quizzes/keyword_edit.html
+++ b/karmaworld/templates/quizzes/keyword_edit.html
@@ -34,8 +34,8 @@
       </div>
 
       <div class="row">
-        <div class="small-10 columns small-centered center">
-          <p>(Press tab in the last definition box for more rows)</p>
+        <div class="small-10 columns small-centered center show-for-large-up">
+          <p>(Press <i class="fa fa-plus"></i> button or hit tab in the last definition box for more rows)</p>
         </div>
       </div>
 
@@ -43,16 +43,44 @@
 
     <div id="activity_container">
       <div class="row">
-        <div class="small-12 columns center">
+        <div class="small-12 columns">
           <form id="keyword-form" action="{% url 'keyword_edit' note.course.school.slug note.course.slug note.slug %}" method="post">
             {% csrf_token %}
+            {{ form.management_form }}
             <div class="hide" id="keyword-form-prototype">
-              {{ prototype_form.as_p }}
+              <div class="row keyword-form-row">
+                <div class="small-12 large-4 columns">
+                  {{ prototype_form.keyword }}
+                </div>
+                <div class="small-12 large-8 columns">
+                  {{ prototype_form.definition }}
+                  {{ formprototype_form_row.id }}
+                </div>
+              </div>
+              <hr class="hide-for-large-up" />
             </div>
             <div id="keyword-form-rows">
-              {{ form.as_p }}
+              {% for form_row in form %}
+                <div class="row keyword-form-row">
+                  <div class="small-12 large-4 columns">
+                    {{ form_row.keyword }}
+                  </div>
+                  <div class="small-12 large-8 columns">
+                    {{ form_row.definition }}
+                    {{ form_row.id }}
+                  </div>
+                </div>
+                <hr class="hide-for-large-up" />
+              {% endfor %}
+            </div>
+            <div id="row">
+              <div class="small-1 columns">
+                <i id="add-row-btn" class="fa fa-plus fa-2x"></i>
+              </div>
+              <div class="small-10 large-11 columns center">
+                <button type="submit" name="action">Save</button>
+              </div>
             </div>
-            <button type="submit" name="action">Save</button>
           </form>
         </div>
       </div>