2568 - Clean up CSS

app/templates/views/find-services/find-services-by-name.html

@@ -14,19 +14,22 @@
   </h1>
 
 
-  {% call form_wrapper(
-      action=url_for('.find_services_by_name'),
-      class='usa-search margin-bottom-4'
-  ) %}
-      {{ form.search(param_extensions={
-        "label": {"text": "Find services by name, partial name, or service ID"}
-      }) }}
-      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-      {{ usaButton({
-        "text": "Search",
-        "classes": "usa-button search-form__button"
-      }) }}
-  {% endcall %}
+ {% call form_wrapper(
+    action=url_for('.find_services_by_name'),
+    class='usa-search margin-bottom-4'
+) %}
+  <div class="display-flex flex-justify-start flex-align-end gap-1 width-full">
+    {{ form.search(param_extensions={
+      "label": {"text": "Find services by name, partial name, or service ID"},
+      "classes": "width-full"
+    }) }}
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+    {{ usaButton({
+      "text": "Search",
+      "classes": "usa-button search-form__button"
+    }) }}
+  </div>
+{% endcall %}
 
   {% call form_wrapper(id='search-form' ) %}
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

app/templates/views/find-users/find-users-by-email.html

@@ -15,17 +15,20 @@
 
 
   {% call form_wrapper(
-      action=url_for('.find_users_by_email'),
-      class='usa-search margin-bottom-4'
+    action=url_for('.find_users_by_email'),
+    class='usa-search margin-bottom-4'
   ) %}
+    <div class="display-flex flex-align-end gap-1 width-full">
       {{ form.search(param_extensions={
-            "label": {"text": "Find users by email, or by partial email"}
+        "label": {"text": "Find users by email, or by partial email"},
+        "classes": "width-full"
       }) }}
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
       {{ usaButton({
         "text": "Search",
-        "classes": "search-form__button"
+        "classes": "usa-button search-form__button"
       }) }}
+    </div>
   {% endcall %}
 
   {% call form_wrapper(id='search-form' ) %}

app/templates/views/manage-users.html

@@ -35,73 +35,95 @@
     </div>
   {% endif %}
 
+  <div class="user-list">
     {% for user in users %}
-    <div class="user-list">
       {% if user.status != 'cancelled' %}
-        <div class="user-list-item">
-          <h2 class="user-list-item-heading font-body-lg margin-top-0" title="{{ user.email_address }}">
+        <div class="user-list-item width-full">
+          <h2 class="user-list-item-heading font-body-lg margin-y-0" title="{{ user.email_address }}">
             {%- if user.name -%}
-            <span class="heading-small live-search-relevant">{{ user.name }}</span>
+              <span class="heading-small live-search-relevant">{{ user.name }}</span>
             {%- endif -%}
-            {%- if user.status == 'pending' -%}
-              <span class="live-search-relevant">{{ user.email_address }}</span><span class="hint">(invited)</span>
-            {%- elif user.status == 'cancelled' -%}
-              <span class="live-search-relevant">{{ user.email_address }}</span><span class="hint">(cancelled invite)</span>
+          </h2>
+          <p class="margin-top-0">
+             {%- if user.status == 'pending' -%}
+              <span class="live-search-relevant">{{ user.email_address }}</span>
+              <span class="hint">(invited)</span>
             {%- elif user.status == 'expired' -%}
-              <span class="live-search-relevant">{{ user.email_address }}</span><span class="hint">(expired invite)</span>
+              <span class="live-search-relevant">{{ user.email_address }}</span>
+              <span class="hint">(expired invite)</span>
             {%- elif user.id == current_user.id -%}
-              <span class="live-search-relevant"></span><span class="hint">(you)</span>
-            {% else %}
+              <span class="live-search-relevant">{{ user.email_address }}</span>
+              <span class="hint">(you)</span>
+            {%- else -%}
               <span class="live-search-relevant">{{ user.email_address }}</span>
             {% endif %}
-          </h2>
-          <h3 class="margin-bottom-0">Permissions</h3>
-          <ul class="tick-cross-list-permissions">
-            {% for permission, label in permissions %}
-              {{ tick_cross(
-                user.has_permission_for_service(current_service.id, permission),
-                label
-              ) }}
-            {% endfor %}
-          </ul>
-          {# only show if the service has folders #}
-          {% if current_service.all_template_folders %}
-            <p class="usa-body tick-cross-list-hint">
-              {% set folder_count = user.template_folders_for_service(current_service) | length %}
-              {% if folder_count == 0 %}
-                Cannot see any folders
-              {% elif folder_count != current_service.all_template_folders | length %}
-                Can see {{ folder_count }} folder{% if folder_count > 1 %}s{% endif %}
-              {% else %}
-                Can see all folders
-              {% endif%}
-            </p>
-          {% endif %}
-          {% if current_service.has_permission('email_auth') %}
-            <p class="usa-body tick-cross-list-hint">
-              Signs in with
-              {{ user.auth_type | format_auth_type(with_indefinite_article=True) }}
-            </p>
-          {% endif %}
-          {% if current_service.has_permission('email_auth') %}
-            <p class="usa-body tick-cross-list-hint">
-              Signs in with
-              {{ user.auth_type | format_auth_type(with_indefinite_article=True) }}
-            </p>
-            {% endif %}
-              {% if current_user.has_permissions('manage_service') %}
-                {% if user.status == 'pending' or user.status == 'expired' %}
-                  <a class="user-list-edit-link usa-link" href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id)}}">Cancel invitation<span class="usa-sr-only"> for {{ user.email_address }}</span></a>
+          </p>
+
+          <div class="usa-accordion usa-accordion--bordered margin-bottom-2">
+            <h3 class="margin-bottom-0 usa-accordion__heading">
+              <button
+                type="button"
+                class="usa-accordion__button"
+                aria-expanded="false"
+                aria-controls="permissions_{{user.id}}"
+              >
+                Permissions
+              </button>
+            </h3>
+              <div id="permissions_{{user.id}}" class="usa-accordion__content usa-prose" hidden>
+                <ul class="tick-cross-list-permissions">
+                  {% for permission, label in permissions %}
+                    {{ tick_cross(
+                      user.has_permission_for_service(current_service.id, permission),
+                      label
+                    ) }}
+                  {% endfor %}
+                </ul>
+                 {% if current_service.all_template_folders %}
+                  <p class="usa-body tick-cross-list-hint">
+                    {% set folder_count = user.template_folders_for_service(current_service) | length %}
+                    {% if folder_count == 0 %}
+                      Cannot see any folders
+                    {% elif folder_count != current_service.all_template_folders | length %}
+                      Can see {{ folder_count }} folder{% if folder_count > 1 %}s{% endif %}
+                    {% else %}
+                      Can see all folders
+                    {% endif %}
+                  </p>
                 {% endif %}
-                {% if user.status == 'expired' %}
-                  <a class="user-list-edit-link usa-link" href="{{ url_for('.resend_invite', service_id=current_service.id, invited_user_id=user.id)}}">Resend invite<span class="usa-sr-only"> for {{ user.email_address }}</span></a>
-                {% elif user.is_editable_by(current_user) %}
-                  <a class="user-list-edit-link usa-link" href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id)}}">Change details<span class="usa-sr-only"> for {{ user.name }} {{ user.email_address }}</span></a>
+
+                {% if current_service.has_permission('email_auth') %}
+                  <p class="usa-body tick-cross-list-hint">
+                    Signs in with
+                    {{ user.auth_type | format_auth_type(with_indefinite_article=True) }}
+                  </p>
                 {% endif %}
+              </div>
+          </div>
+
+
+
+          {% if current_user.has_permissions('manage_service') %}
+            {% if user.status == 'pending' or user.status == 'expired' %}
+              <a class="user-list-edit-link usa-link" href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id) }}">
+                Cancel invitation<span class="usa-sr-only"> for {{ user.email_address }}</span>
+              </a>
             {% endif %}
+
+            {% if user.status == 'expired' %}
+              <a class="user-list-edit-link usa-link" href="{{ url_for('.resend_invite', service_id=current_service.id, invited_user_id=user.id) }}">
+                Resend invite<span class="usa-sr-only"> for {{ user.email_address }}</span>
+              </a>
+            {% elif user.is_editable_by(current_user) %}
+              <a class="user-list-edit-link usa-link" href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id) }}">
+                Change details<span class="usa-sr-only"> for {{ user.name }} {{ user.email_address }}</span>
+              </a>
+            {% endif %}
+          {% endif %}
         </div>
       {% endif %}
-    </div>
     {% endfor %}
+  </div>
+
 
 {% endblock %}