Add Mobile Support

Added decorator to student_view for mobile compatibility.
Removed inline `cols` property from view.html.
Styled textarea from within the view.less file.

freetextresponse/freetextresponse.py

@@ -213,6 +213,10 @@ def workbench_scenarios():
         'submitted_message',
     )
 
+    # Decorate the view in order to support multiple devices e.g. mobile
+    # See: https://openedx.atlassian.net/wiki/display/MA/Course+Blocks+API
+    # section 'View @supports(multi_device) decorator'
+    @XBlock.supports('multi_device')
     def student_view(self, context=None):
         # pylint: disable=unused-argument
         """

freetextresponse/private/view.html

@@ -5,7 +5,7 @@ <h2 class="problem-header">{self.display_name}</h2>
     <div class="word-count-message">{word_count_message}</div>
     <div class="capa_inputtype textline">
         <div class="user_input {indicator_class}">
-            <textarea class="student_answer" rows="20" cols="70">{self.student_answer}</textarea>
+            <textarea class="student_answer" rows="20">{self.student_answer}</textarea>
             <span class="status {visibility_class}" aria-describedby="student_answer"></span>
         </div>
     </div>

freetextresponse/private/view.less

@@ -31,6 +31,7 @@
       border-radius:3px;
       border:2px solid #e4e4e4;
       min-width:160px;
+      width:85%;
     }
 
     &.unanswered .student_answer {

freetextresponse/public/view.html

@@ -1 +1 @@
-<div class="freetextresponse xmodule_display xmodule_CapaModule problem"><h2 class="problem-header">{self.display_name}</h2><div class="problem-progress">{problem_progress}</div><p>{self.prompt}</p><div class="word-count-message">{word_count_message}</div><div class="capa_inputtype textline"><div class="user_input {indicator_class}"><textarea class="student_answer" rows="20" cols="70">{self.student_answer}</textarea><span class="status {visibility_class}" aria-describedby="student_answer"></span></div></div><div class="capa_alert submission-received">{submitted_message}</div><div class="action"><button class="check Submit {nodisplay_class}" data-checking="Checking..." data-value="Submit">Submit</button> <button class="save {nodisplay_class}" data-value="Save">Save</button><div class="used-attempts-feedback" aria-live="polite">{used_attempts_feedback}</div></div><div class="capa_alert user_alert">{user_alert}</div></div>
+<div class="freetextresponse xmodule_display xmodule_CapaModule problem"><h2 class="problem-header">{self.display_name}</h2><div class="problem-progress">{problem_progress}</div><p>{self.prompt}</p><div class="word-count-message">{word_count_message}</div><div class="capa_inputtype textline"><div class="user_input {indicator_class}"><textarea class="student_answer" rows="20">{self.student_answer}</textarea><span class="status {visibility_class}" aria-describedby="student_answer"></span></div></div><div class="capa_alert submission-received">{submitted_message}</div><div class="action"><button class="check Submit {nodisplay_class}" data-checking="Checking..." data-value="Submit">Submit</button> <button class="save {nodisplay_class}" data-value="Save">Save</button><div class="used-attempts-feedback" aria-live="polite">{used_attempts_feedback}</div></div><div class="capa_alert user_alert">{user_alert}</div></div>

freetextresponse/public/view.less

@@ -1,6 +1,5 @@
 .freetextresponse {
 
-
   .user_input {
 
     .status {
@@ -32,6 +31,7 @@
       border-radius:3px;
       border:2px solid #e4e4e4;
       min-width:160px;
+      width:85%;
     }
 
     &.unanswered .student_answer {