Improve display of nomination search and form

scipost_django/colleges/forms.py

@@ -309,19 +309,16 @@ class FellowshipNominationForm(forms.ModelForm):
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        #self.fields['profile'].widget.attrs['readonly'] = True
-        self.profile = None
+        self.fields['nominator_comments'].widget.attrs['rows'] = 4
         self.helper = FormHelper()
         self.helper.layout = Layout(
             Field('profile_id', type='hidden'),
             Field('nominated_by', type='hidden'),
             Div(
-                Field('nominator_comments')
-            ),
-            Div(
-                Div(FloatingField('college'), css_class='col-lg-8'),
+                Div(Field('nominator_comments'), css_class='col-lg-8'),
                 Div(
-                    ButtonHolder(Submit('submit', 'Submit', css_class='btn btn-danger')),
+                    FloatingField('college'),
+                    ButtonHolder(Submit('submit', 'Submit', css_class='btn btn-primary')),
                     css_class="col-lg-4"
                 ),
                 css_class='row'

scipost_django/colleges/templates/colleges/_hx_nomination_form.html

 {% load crispy_forms_tags %}
-<h3>Nomination to Fellowship for {{ profile }}</h3>
+<h3>Nomination to Fellowship:&emsp;<em>{{ profile }}</em></h3>
 <form
     hx-post="{% url 'colleges:_hx_nomination_form' profile_id=profile.pk %}"
     hx-target="#nomination_form_response"

scipost_django/colleges/templates/colleges/nominations.html

@@ -22,21 +22,41 @@
     <div class="card-body">
       <div class="row">
 	<div class="col-lg-6">
+	  <h3>Procedure</h3>
+	  <ul>
+	    <li>Type your search query in the search form</li>
+	    <li>When you see the name you're looking for in the list of matches, double-click on it</li>
+	    <li>The nomination form will appear below</li>
+	    <li>Fill it in and submit!</li>
+	  </ul>
 	  <form
 	      hx-post="{% url 'profiles:_hx_profile_dynsel_list' %}"
 	      hx-trigger="keyup delay:200ms, change"
 	      hx-target="#profile_dynsel_results"
+	      hx-indicator="#profile_dynsel_results-indicator"
 	  >
 	    {% csrf_token %}
 	    <div id="profile_dynsel_form">{% crispy profile_dynsel_form %}</div>
 	  </form>
+	  <div id="profile_dynsel_results-indicator" class="htmx-indicator p-2">
+	    <button class="btn btn-warning" type="button" disabled>
+	      <strong>Loading results...</strong>
+	      <div class="spinner-grow spinner-grow-sm ms-2" role="status" aria-hidden="true"></div>
+	    </button>
+	  </div>
+	  <div id="nomination_form_response-indicator" class="htmx-indicator p-2">
+	    <button class="btn btn-warning" type="button" disabled>
+	      <strong>Loading form...</strong>
+	      <div class="spinner-grow spinner-grow-sm ms-2" role="status" aria-hidden="true"></div>
+	    </button>
+	  </div>
 	</div>
 	<div class="col-lg-6">
+	  <h3>Matching profiles</h3>
 	  <div id="profile_dynsel_results" class="border border-light m-2 p-1"></div>
 	</div>
       </div>
-      <div id="nomination_form_response">
-      </div>
+      <div id="nomination_form_response"></div>
     </div>
   </div>
 

scipost_django/colleges/views.py

@@ -583,12 +583,3 @@ def _hx_nominations(request):
     page_obj = paginator.get_page(page_nr)
     context = { 'page_obj': page_obj }
     return render(request, 'colleges/_hx_nominations.html', context)
-
-
-# @login_required
-# @user_passes_test(is_edadmin_or_active_regular_or_senior_fellow)
-# def _hx_nominate(request):
-#     form = FellowshipNominationForm(request.POST or None)
-#     if form.is_valid():
-#         nomination = form.save()
-#         return render(reverse('colleges/_hx_nominations.html

scipost_django/profiles/templates/profiles/_hx_profile_dynsel_list.html

 {% load profiles_extras %}
 
-<ul class="list list-unstyled">
+<ul class="list list-unstyled dynsel-list">
   {% for profile in profiles|slice:":11" %}
     {% if forloop.counter == 11 %}
       <li>&emsp;...</li>
@@ -9,6 +9,7 @@
 	<a
 	    hx-get="{% profile_dynsel_action_url profile %}"
 	    hx-target="#{{ action_target_element_id }}"
+	    hx-indicator="#{{ action_target_element_id }}-indicator"
 	>
 	  {{ profile }}
 	</a>

scipost_django/scipost/static/scipost/assets/css/_dynsel.scss

+
+.dynsel-list > li > a:hover {
+    background-color: #d0d0d0;
+}

scipost_django/scipost/static/scipost/assets/css/style.scss

@@ -48,6 +48,7 @@
 @import "general";
 @import "colleges";
 @import "comments";
+@import "dynsel";
 @import "icons";
 @import "journals";
 @import "personal_page";