tweaks to request form ui

 - Legacy-Id: 10898

Author: rpcross

ietf/meeting/views.py

@@ -892,15 +892,15 @@ def sort_key(session):
 @role_required('Area Director','Secretariat','IRTF Chair','WG Chair')
 def interim_request(request):
     '''View for requesting an interim meeting'''
-    form = InterimRequestForm(request=request)
+    #form = InterimRequestForm(request=request)
 
     if request.method == 'POST':
         form = InterimRequestForm(request, data=request.POST)
         if form.is_valid():
             form.save()
             return redirect(upcoming)
     else:
-        form = InterimRequestForm(request=request)
+        form = InterimRequestForm(request=request,initial={'meeting_type':'single'})
 
     return render(request, "meeting/interim_request.html", {"form":form})
 

ietf/static/ietf/css/ietf.css

@@ -448,3 +448,17 @@ form.navbar-form input.form-control.input-sm { width: 141px; }
     padding: inherit;
     outline: inherit;
 }
+
+/* Interim Meetings
+   ========================================================================== */
+#meeting-type-options {
+    display: inline-block;
+    margin-left: 4em;
+}
+
+.fieldset {
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
+    background-color: #f1f1f1;
+    padding: 16px 16px;
+    margin-bottom: 20px;
+}

ietf/static/ietf/js/meeting-interim-request.js

@@ -1,3 +1,26 @@
+
+var interimRequest = {
+    // functions for Interim Meeting Request 
+    init : function() {
+        interimRequest.form = $(this);
+        $('.select2-field').select2();
+        $('#id_face_to_face').change(interimRequest.toggleLocation);
+        $('#id_face_to_face').each(interimRequest.toggleLocation)
+    },
+
+    toggleLocation : function() {
+        if(this.checked){
+            $("#id_city").prop('disabled', false);
+            $("#id_country").prop('disabled', false);
+            $("#id_timezone").prop('disabled', false);
+        } else {
+            $("#id_city").prop('disabled', true);
+            $("#id_country").prop('disabled', true);
+            $("#id_timezone").prop('disabled', true);
+        }
+    }
+}
+
 $(document).ready(function () {
-    $('.select2-field').select2();
+    $('#interim-request-form').each(interimRequest.init);
 });

ietf/templates/meeting/interim_request.html

@@ -15,35 +15,42 @@
   {% origin %}
   <h1>Interim Meeting Request</h1>
 
-  <form method="post" class="form-horizontal">
+  <form id="interim-request-form" role="form" method="post" class="form-horizontal">
     {% csrf_token %}
 
     {% bootstrap_field form.group layout='horizontal' %}
 
-    <div class="form-group">
-        <div class="checkbox">
-            <label class="checkbox-inline">{% render_field form.face_to_face class="form-control" %}Face to Face</label>
-        </div>
+    <div class="form-group form-inline">
+        <div class="col-md-offset-2">
 
+        <div class="col-md-3">
+        <!-- <div class="checkbox"> -->
+            <label class="checkbox-inline">{% render_field form.face_to_face %}<strong>Face to Face</strong></label>
+        <!-- </div> -->
+        </div>
+
+
+        <!-- <div id="meeting-type-options"> -->
+        <div class="col-md-2 radio-inline"><strong>Meeting Type:</strong></div>
         <label class="radio-inline">
-            <input type="radio" name="optradio">Option 1
+            <input type="radio" value="single" name="meeting_type">Single
         </label>
         <label class="radio-inline">
-            <input type="radio" name="optradio">Option 2
+            <input type="radio" value="multi-day" name="meeting_type">Multi-Day
         </label>
         <label class="radio-inline">
-            <input type="radio" name="optradio">Option 3
+            <input type="radio" value="series" name="meeting_type">Series
         </label>
+        <!-- </div> -->
 
-            {% render_field form.multi_day class="form-control" %}
-            {% render_field form.series class="form-control" %}
-        
+        </div>
+
     </div>
 
-    
+    <div class="fieldset">    
     <div class="form-group">
         <label for="face-to_face" class="col-md-2 control-label">Location</label>
-        <div class="form-inline">
+        <div class="col-md-10 form-inline">
             {% render_field form.city class="form-control" placeholder="City" %}
             {% render_field form.country class="form-control" %}
             {% render_field form.timezone class="form-control" %}
@@ -68,13 +75,14 @@ <h1>Interim Meeting Request</h1>
 
     <div class="form-group">
         <label for="agenda" class="col-md-2 control-label">Agenda</label>
-        <div class="col-md-10">{% render_field form.agenda class="form-control" placeholder="Meeting agenda" %}</div>
+        <div class="col-md-10">{% render_field form.agenda class="form-control" rows="6" placeholder="paste agenda here" %}</div>
     </div>
 
     <div class="form-group">
         <label for="agenda_note" class="col-md-2 control-label">Agenda Note</label>
         <div class="col-md-10">{% render_field form.agenda_note class="form-control" placeholder="Note" %}</div>
     </div>
+    </div>  <!-- fieldset -->
 
     {% buttons %}
       <button type="submit" class="btn btn-primary">Submit</button>