From 3d217b85f8a09f31db43055b76b977d165010257 Mon Sep 17 00:00:00 2001 From: Charles Connell Date: Mon, 17 Feb 2014 12:21:48 -0500 Subject: [PATCH] Improve keyword edit form, particularly for mobile --- karmaworld/apps/quizzes/forms.py | 22 +++----- karmaworld/assets/css/quiz.css | 5 ++ karmaworld/assets/js/quiz.js | 54 +++++++++---------- .../templates/quizzes/keyword_edit.html | 40 +++++++++++--- 4 files changed, 74 insertions(+), 47 deletions(-) diff --git a/karmaworld/apps/quizzes/forms.py b/karmaworld/apps/quizzes/forms.py index f91c4ea..0708b3b 100644 --- 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 '
' + \ - self['keyword'].as_text(attrs={'placeholder': 'Keyword', 'class': 'keyword'}) + \ - '
' + \ - self['definition'].as_textarea(attrs={'placeholder': 'Definition', 'class': 'definition'}) + \ - self['id'].as_hidden(attrs={'class': 'object-id'}) + \ - '
' +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 48874cb..946431a 100644 --- 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 50c039e..5fa8dbd 100644 --- 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 cfddcc2..eb8af25 100644 --- a/karmaworld/templates/quizzes/keyword_edit.html +++ b/karmaworld/templates/quizzes/keyword_edit.html @@ -34,8 +34,8 @@
-
-

(Press tab in the last definition box for more rows)

+
+

(Press button or hit tab in the last definition box for more rows)

@@ -43,16 +43,44 @@
-
+
{% csrf_token %} + {{ form.management_form }}
- {{ prototype_form.as_p }} +
+
+ {{ prototype_form.keyword }} +
+
+ {{ prototype_form.definition }} + {{ formprototype_form_row.id }} +
+
+
- {{ form.as_p }} + {% for form_row in form %} +
+
+ {{ form_row.keyword }} +
+
+ {{ form_row.definition }} + {{ form_row.id }} +
+
+
+ {% endfor %} +
+
+
+ +
+
+ +
-
-- 2.25.1