Minor changes to the new exp config forms (#1251)

* put content in row div * add period to end of form explanation paragraph * reorder structure/generator fields on EFP edit * add custom b5 class for darker checkbox border and use on EFP generator field * open EFP commits link in new tab * add bold class to form field labels
lookit · Aug 28, 2023 · 5c1d942 · 5c1d942
1 parent 273632d
commit 5c1d942
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 36 deletions.
diff --git a/scss/base.scss b/scss/base.scss
@@ -62,3 +62,8 @@
     background-color: #636464;
     border-color: #636464;
 }
+
+// Darker border around checkbox
+[type="checkbox"].dark-checkbox-border {
+    border-color: black;
+}
diff --git a/studies/forms.py b/studies/forms.py
@@ -382,7 +382,7 @@ class EFPForm(ModelForm):
         label="Experiment runner version (commit SHA)",
         help_text=(
             "If you're using the default Ember Frame Player, you can see <a "
-            f'href="{settings.EMBER_EXP_PLAYER_REPO}/commits/{settings.EMBER_EXP_PLAYER_BRANCH}">'
+            f'href="{settings.EMBER_EXP_PLAYER_REPO}/commits/{settings.EMBER_EXP_PLAYER_BRANCH}" target="_blank" rel="noopener noreferrer">'
             "the commits page</a> for other commit SHA options."
         ),
     )
@@ -415,9 +415,21 @@ class EFPForm(ModelForm):
         required=False,
     )
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields["use_generator"].widget.attrs.update(
+            {"class": "dark-checkbox-border"}
+        )
+
     class Meta:
         model = Study
-        fields = ("use_generator", "generator", "structure")
+        fields = (
+            "structure",
+            "use_generator",
+            "generator",
+            "player_repo_url",
+            "last_known_player_sha",
+        )
         labels = {"use_generator": "Use protocol generator (advanced)"}
         help_texts = {
             "use_generator": (

diff --git a/studies/templates/studies/experiment_runner/base.html b/studies/templates/studies/experiment_runner/base.html
@@ -20,39 +20,41 @@
     {% url 'exp:preview-detail' uuid=study.uuid as url_preview_detail %}
     {% bs_icon "play-circle" as bs_icon_play_circle %}
     {% bootstrap_form_errors form %}
-    <div class="col-lg-10 offset-lg-1">
-        <div class="card bg-light my-4">
-            <div class="card-header">
-                <h3 class="card-subtitle my-1">
-                    Study Details
-                    <div class="float-end me-4">
-                        {% bootstrap_button bs_icon_play_circle|add:"Preview Study" href=url_preview_detail button_class=btn_secondary_classes %}
-                    </div>
-                </h3>
+    <div class="row">
+        <div class="col-lg-10 offset-lg-1">
+            <div class="card bg-light my-4">
+                <div class="card-header">
+                    <h3 class="card-subtitle my-1">
+                        Study Details
+                        <div class="float-end me-4">
+                            {% bootstrap_button bs_icon_play_circle|add:"Preview Study" href=url_preview_detail button_class=btn_secondary_classes %}
+                        </div>
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <p>
+                        We have split the study forms into two views for easier navigation. On this page, you
+                        will provide the study itself - either a study protocol/study code, or a URL to your
+                        external study. You can update eligibility and other recruiting information on the
+                        <a href="{% url "exp:study-edit" pk=study.id %}">Study Ad</a> page.
+                    </p>
+                    {% block header %}
+                    {% endblock header %}
+                    <form action="" method="post" class="form">
+                        {% csrf_token %}
+                        {% block form %}
+                        {% endblock form %}
+                        {% if save_confirmation or study.built %}
+                            <p class="text-danger">
+                                Changes to any of these values (aside from code formatting), may cause your study to be rejected or need to be built again.
+                            </p>
+                        {% endif %}
+                        {% form_buttons %}
+                        {% bootstrap_button "Cancel" button_class=btn_secondary_classes href=url_study_detail %}
+                        {% bootstrap_button "Save Changes" button_class=btn_primary_classes type="submit" %}
+                    {% endform_buttons %}
+                </form>
             </div>
-            <div class="card-body">
-                <p>
-                    We have split the study forms into two views for easier navigation.
-                    You can update eligibility and other recruiting information on
-                    the <a href="{% url "exp:study-edit" pk=study.id %}">Study Ad
-                    and Recruitment</a> page.
-                </p>
-                {% block header %}
-                {% endblock header %}
-                <form action="" method="post" class="form">
-                    {% csrf_token %}
-                    {% block form %}
-                    {% endblock form %}
-                    {% if save_confirmation or study.built %}
-                        <p class="text-danger">
-                            Changes to any of these values may cause your study to be rejected or need to be built again.
-                        </p>
-                    {% endif %}
-                    {% form_buttons %}
-                    {% bootstrap_button "Cancel" button_class=btn_secondary_classes href=url_study_detail %}
-                    {% bootstrap_button "Save Changes" button_class=btn_primary_classes type="submit" %}
-                {% endform_buttons %}
-            </form>
         </div>
     </div>
 </div>

diff --git a/studies/templates/studies/experiment_runner/efp_edit.html b/studies/templates/studies/experiment_runner/efp_edit.html
@@ -17,7 +17,7 @@
     </p>
 {% endblock header %}
 {% block form %}
-    {% bootstrap_form form %}
+    {% bootstrap_form form label_class="fw-bold" %}
     <div id="commit-description" class="card bg-light my-4">
         <div class="card-header">
             <h3 class="card-subtitle my-1">

diff --git a/studies/templates/studies/experiment_runner/external_edit.html b/studies/templates/studies/experiment_runner/external_edit.html
@@ -13,5 +13,5 @@
     </p>
 {% endblock header %}
 {% block form %}
-    {% bootstrap_form form %}
+    {% bootstrap_form form label_class="fw-bold" %}
 {% endblock form %}
diff --git a/web/static/custom_bootstrap5.css b/web/static/custom_bootstrap5.css
@@ -8465,3 +8465,6 @@ textarea.form-control-lg {
   color: #fff;
   background-color: #636464;
   border-color: #636464; }
+
+[type="checkbox"].dark-checkbox-border {
+  border-color: black; }