Format components HTML

opensafely-core · Sep 13, 2024 · 6a89505 · 6a89505
1 parent 85cbd88
commit 6a89505
Show file tree

Hide file tree

Showing 24 changed files with 439 additions and 439 deletions.
diff --git a/airlock/templates/_components/article/header.html b/airlock/templates/_components/article/header.html
@@ -3,9 +3,9 @@ <h1 class="text-2xl max-w-prose tracking-tight break-words md:text-4xl font-bold
     {{ title }}
   </h1>
   {% if text %}
-  <div class="font-lg text-slate-600 max-w-2xl flex flex-col gap-y-2">
-    {{ text }}
-  </div>
+    <div class="font-lg text-slate-600 max-w-2xl flex flex-col gap-y-2">
+      {{ text }}
+    </div>
   {% endif %}
   {{ children }}
 </header>
diff --git a/airlock/templates/_components/button.html b/airlock/templates/_components/button.html
@@ -7,79 +7,79 @@
     {% endif %}
 {% else %}
   <button
-    {% attrs data-expander-button data-modal data-title disabled id name type=type|default:"button" value form hx-post hx-get hx-trigger hx-swap hx-target %}
+  {% attrs data-expander-button data-modal data-title disabled id name type=type|default:"button" value form hx-post hx-get hx-trigger hx-swap hx-target %}
 
 {% endif %}
 
-    class="
-      inline-flex items-center justify-center border rounded-md shadow-sm transition-buttons duration-200
+class="
+       inline-flex items-center justify-center border rounded-md shadow-sm transition-buttons duration-200
 
-      {% if small %}
-        px-2 py-1 text-xs font-normal
-      {% else %}
-        px-4 py-2 text-sm font-medium
-      {% endif %}
+       {% if small %}
+         px-2 py-1 text-xs font-normal
+       {% else %}
+         px-4 py-2 text-sm font-medium
+       {% endif %}
 
-      {% if disabled %}
-        cursor-not-allowed bg-slate-300 text-slate-800
-      {% elif variant == "primary" %}
-        bg-oxford-600 border-oxford-600 text-white
-        hover:bg-oxford-700 hover:border-oxford-700
-        focus:bg-oxford-700 focus:border-oxford-700 focus:ring-oxford-500 focus:ring-offset-white
-      {% elif variant == "primary-outline" %}
-        bg-transparent border border-oxford-700 text-oxford-700
-        hover:bg-oxford-100
-        focus:bg-oxford-100 focus:ring-oxford-500 focus:ring-offset-white
-      {% elif variant == "secondary" %}
-        bg-slate-500 border-slate-500 text-white
-        hover:bg-slate-600 hover:border-slate-600
-        focus:bg-slate-600 focus:border-slate-600 focus:ring-slate-500 focus:ring-offset-white
-      {% elif variant == "secondary-outline" %}
-        border border-slate-400/75 text-slate-700 !shadow-none
-        hover:bg-slate-200
-        focus:bg-slate-200 focus:ring-slate-500 focus:ring-offset-white
-      {% elif variant == "danger" %}
-        bg-bn-ribbon-600 border-bn-ribbon-600 text-white
-        hover:bg-bn-ribbon-700 hover:border-bn-ribbon-700
-        focus:bg-bn-ribbon-700 focus:border-bn-ribbon-700 focus:ring-bn-ribbon-500 focus:ring-offset-white
-      {% elif variant == "danger-outline" %}
-        border border-bn-ribbon-400 text-bn-ribbon-700 !shadow-none
-        hover:bg-bn-ribbon-100
-        focus:bg-bn-ribbon-100 focus:ring-bn-ribbon-500 focus:ring-offset-white
-      {% elif variant == "warning" %}
-        bg-bn-flamenco-600 border-bn-flamenco-600 text-white
-        hover:bg-bn-flamenco-700 hover:border-bn-flamenco-700
-        focus:bg-bn-flamenco-700 focus:border-bn-flamenco-700 focus:ring-bn-flamenco-500 focus:ring-offset-white
-      {% elif variant == "success" %}
-        bg-green-600 border-green-600 text-white
-        hover:bg-green-700 hover:border-green-700
-        focus:bg-green-700 focus:border-green-700 focus:ring-green-500 focus:ring-offset-white
-      {% elif variant == "success-outline" %}
-        bg-transparent border border-green-700 text-green-700
-        hover:bg-green-100
-        focus:bg-green-100 focus:ring-green-500 focus:ring-offset-white
-      {% endif %}
+       {% if disabled %}
+         cursor-not-allowed bg-slate-300 text-slate-800
+       {% elif variant == "primary" %}
+         bg-oxford-600 border-oxford-600 text-white
+         hover:bg-oxford-700 hover:border-oxford-700
+         focus:bg-oxford-700 focus:border-oxford-700 focus:ring-oxford-500 focus:ring-offset-white
+       {% elif variant == "primary-outline" %}
+         bg-transparent border border-oxford-700 text-oxford-700
+         hover:bg-oxford-100
+         focus:bg-oxford-100 focus:ring-oxford-500 focus:ring-offset-white
+       {% elif variant == "secondary" %}
+         bg-slate-500 border-slate-500 text-white
+         hover:bg-slate-600 hover:border-slate-600
+         focus:bg-slate-600 focus:border-slate-600 focus:ring-slate-500 focus:ring-offset-white
+       {% elif variant == "secondary-outline" %}
+         border border-slate-400/75 text-slate-700 !shadow-none
+         hover:bg-slate-200
+         focus:bg-slate-200 focus:ring-slate-500 focus:ring-offset-white
+       {% elif variant == "danger" %}
+         bg-bn-ribbon-600 border-bn-ribbon-600 text-white
+         hover:bg-bn-ribbon-700 hover:border-bn-ribbon-700
+         focus:bg-bn-ribbon-700 focus:border-bn-ribbon-700 focus:ring-bn-ribbon-500 focus:ring-offset-white
+       {% elif variant == "danger-outline" %}
+         border border-bn-ribbon-400 text-bn-ribbon-700 !shadow-none
+         hover:bg-bn-ribbon-100
+         focus:bg-bn-ribbon-100 focus:ring-bn-ribbon-500 focus:ring-offset-white
+       {% elif variant == "warning" %}
+         bg-bn-flamenco-600 border-bn-flamenco-600 text-white
+         hover:bg-bn-flamenco-700 hover:border-bn-flamenco-700
+         focus:bg-bn-flamenco-700 focus:border-bn-flamenco-700 focus:ring-bn-flamenco-500 focus:ring-offset-white
+       {% elif variant == "success" %}
+         bg-green-600 border-green-600 text-white
+         hover:bg-green-700 hover:border-green-700
+         focus:bg-green-700 focus:border-green-700 focus:ring-green-500 focus:ring-offset-white
+       {% elif variant == "success-outline" %}
+         bg-transparent border border-green-700 text-green-700
+         hover:bg-green-100
+         focus:bg-green-100 focus:ring-green-500 focus:ring-offset-white
+       {% endif %}
 
-      {% if not disabled %}
-        hover:shadow-lg
-        focus:outline-none focus:ring-2 focus:ring-offset-2
-      {% endif %}
+       {% if not disabled %}
+         hover:shadow-lg
+         focus:outline-none focus:ring-2 focus:ring-offset-2
+       {% endif %}
 
-      {% if tooltip %}
-        relative group
-      {% endif %}
+       {% if tooltip %}
+         relative group
+       {% endif %}
 
-      {{ class }}
-    ">
+       {{ class }}
+      ">
 
-      {{ children }}
+  {{ children }}
 
-{% if tooltip %}
-  {% tooltip position="-bottom-4" content=tooltip %}
-{% endif %}
+  {% if tooltip %}
+    {% tooltip position="-bottom-4" content=tooltip %}
+  {% endif %}
 
-{% if type == "link" %}
-  </a>
-{% else %}
-  </button>
-{% endif %}
+  {% if type == "link" %}
+    </a>
+  {% else %}
+    </button>
+  {% endif %}
diff --git a/airlock/templates/_components/card/card-footer.html b/airlock/templates/_components/card/card-footer.html
@@ -1,13 +1,13 @@
 <div
   class="
-    bg-slate-50 px-4 py-2 border-t border-t-slate-200
-    md:px-6 md:py-5
-    {% if not no_container %}
-      -mx-4 mt-6
-      md:-mb-5 md:-mx-6
-    {% endif %}
-    {{ class }}
-  "
+         bg-slate-50 px-4 py-2 border-t border-t-slate-200
+         md:px-6 md:py-5
+         {% if not no_container %}
+           -mx-4 mt-6
+           md:-mb-5 md:-mx-6
+         {% endif %}
+         {{ class }}
+        "
 >
   {{ children }}
 </div>
diff --git a/airlock/templates/_components/card/card.html b/airlock/templates/_components/card/card.html
@@ -1,39 +1,39 @@
 <section {% attrs class id %} {% if title %}aria-labelledby="{{ title | slugify }}-title"{% endif %}>
   <div class="bg-white shadow">
     {% if title or subtitle or button %}
-    <div class="flex flex-wrap gap-2 items-center justify-between px-4 py-2 sm:px-6 sm:py-4 {{ header_class }}">
-      <div>
-        {% if title %}
-        <h2 id="{{ title | slugify }}-title" class="text-xl font-semibold tracking-tight text-slate-900">
-          {{ title }}
-        </h2>
-        {% endif %}
+      <div class="flex flex-wrap gap-2 items-center justify-between px-4 py-2 sm:px-6 sm:py-4 {{ header_class }}">
+        <div>
+          {% if title %}
+            <h2 id="{{ title | slugify }}-title" class="text-xl font-semibold tracking-tight text-slate-900">
+              {{ title }}
+            </h2>
+          {% endif %}
 
-        {% if subtitle %}
-        <p class="text-slate-600 text-sm leading-tight">{{ subtitle }}</p>
+          {% if subtitle %}
+            <p class="text-slate-600 text-sm leading-tight">{{ subtitle }}</p>
+          {% endif %}
+        </div>
+        {% if button %}
+          {% #button class="flex-shrink-0" href=button_href type="link" variant="primary" %}
+            {{ button_text }}
+          {% /button %}
+        {% endif %}
+        {% if custom_button %}
+          {{ custom_button }}
         {% endif %}
       </div>
-      {% if button %}
-        {% #button class="flex-shrink-0" href=button_href type="link" variant="primary" %}
-          {{ button_text }}
-        {% /button %}
-      {% endif %}
-      {% if custom_button %}
-        {{ custom_button }}
-      {% endif %}
-    </div>
     {% endif %}
 
     {% if container %}
       <div
         class="
-          px-4 py-3 md:px-6 md:py-5
-          {% if title or subtitle %}border-t border-slate-200{% endif %}
-          {{ container_class }}
-        "
+               px-4 py-3 md:px-6 md:py-5
+               {% if title or subtitle %}border-t border-slate-200{% endif %}
+               {{ container_class }}
+              "
       >
     {% endif %}
-      {{ children }}
+    {{ children }}
     {% if container %}
       </div>
     {% endif %}

diff --git a/airlock/templates/_components/description-item.html b/airlock/templates/_components/description-item.html
@@ -2,20 +2,20 @@
 {% var details_class=details_class|default:"mt-1 text-sm text-slate-900 pl-3 ml-0.5 border-l-2 border-l-slate-200 sm:pl-0 sm:ml-0 sm:border-l-0 sm:col-span-3 sm:mt-0" %}
 
 <div
-	class="
-		px-3 py-2
-		{% if stacked %}
-			flex flex-col gap-y-1
-		{% else %}
-			sm:grid sm:grid-cols-4 sm:gap-3
-		{% endif %}
-		md:py-4 md:px-6
-		md:even:bg-white md:odd:bg-slate-50
-		{{ class }}
-	">
-	<dt
-		class="
-			{{ title_class }}
-		">{{ title }}</dt>
-	<dd class="{{ details_class }} break-words">{{ children }}</dd>
+  class="
+         px-3 py-2
+         {% if stacked %}
+           flex flex-col gap-y-1
+         {% else %}
+           sm:grid sm:grid-cols-4 sm:gap-3
+         {% endif %}
+         md:py-4 md:px-6
+         md:even:bg-white md:odd:bg-slate-50
+         {{ class }}
+        ">
+  <dt
+    class="
+           {{ title_class }}
+          ">{{ title }}</dt>
+  <dd class="{{ details_class }} break-words">{{ children }}</dd>
 </div>
diff --git a/airlock/templates/_components/form/checkbox.html b/airlock/templates/_components/form/checkbox.html
@@ -17,13 +17,13 @@
   <input
     {% attrs checked %}
     class="
-      scale-125 mt-1 ml-1 transition-colors
-      group-hover:bg-oxford-50 group-hover:border-oxford-700
-      group-hover:checked:bg-oxford-600 group-hover:checked:border-oxford-600
-      checked:bg-oxford-600 checked:border-oxford-600
-      focus:ring-0 focus:outline-2 focus:outline-offset-0 focus:outline-yellow-300
-      {{ input_class }}
-    "
+           scale-125 mt-1 ml-1 transition-colors
+           group-hover:bg-oxford-50 group-hover:border-oxford-700
+           group-hover:checked:bg-oxford-600 group-hover:checked:border-oxford-600
+           checked:bg-oxford-600 checked:border-oxford-600
+           focus:ring-0 focus:outline-2 focus:outline-offset-0 focus:outline-yellow-300
+           {{ input_class }}
+          "
     id="{{ input_id }}"
     name="{{ input_name }}"
     type="checkbox"

diff --git a/airlock/templates/_components/form/input.html b/airlock/templates/_components/form/input.html
@@ -39,13 +39,13 @@
     <input
       {% attrs autocapitalize autocomplete autocorrect inputmode name=input_name placeholder required value=input_value %}
       class="
-        mt-1 block w-full rounded-md border-slate-300 text-slate-900 shadow-sm
-        {% if show_placeholder %}placeholder:text-slate-400{% else %}placeholder:text-white{% endif %}
-        focus:border-oxford-500 focus:ring-oxford-500
-        sm:text-sm
-        [&:not(:placeholder-shown):not(:focus)]:invalid:border-bn-ribbon-600 [&:not(:placeholder-shown):not(:focus)]:invalid:ring-bn-ribbon-600 [&:not(:placeholder-shown):not(:focus)]:invalid:ring-1
-        {{ input_class }}
-      "
+             mt-1 block w-full rounded-md border-slate-300 text-slate-900 shadow-sm
+             {% if show_placeholder %}placeholder:text-slate-400{% else %}placeholder:text-white{% endif %}
+             focus:border-oxford-500 focus:ring-oxford-500
+             sm:text-sm
+             [&:not(:placeholder-shown):not(:focus)]:invalid:border-bn-ribbon-600 [&:not(:placeholder-shown):not(:focus)]:invalid:ring-bn-ribbon-600 [&:not(:placeholder-shown):not(:focus)]:invalid:ring-1
+             {{ input_class }}
+            "
       id="{{ input_id }}"
       type="{% if type %}{{ type }}{% else %}text{% endif %}"
     >

diff --git a/airlock/templates/_components/form/radio.html b/airlock/templates/_components/form/radio.html
@@ -5,12 +5,12 @@
   <input
     {% attrs checked %}
     class="
-      scale-125 ml-1 mt-[0.33em] transition-colors
-      group-hover:bg-oxford-50 group-hover:border-oxford-700
-      group-hover:checked:bg-oxford-600 group-hover:checked:border-oxford-600
-      checked:bg-oxford-600 checked:border-oxford-600
-      {{ input_class }}
-    "
+           scale-125 ml-1 mt-[0.33em] transition-colors
+           group-hover:bg-oxford-50 group-hover:border-oxford-700
+           group-hover:checked:bg-oxford-600 group-hover:checked:border-oxford-600
+           checked:bg-oxford-600 checked:border-oxford-600
+           {{ input_class }}
+          "
     id="{{ id }}"
     name="{{ name }}"
     type="radio"