Standardise buttons across the site

acm-cui · Sep 10, 2024 · 7903af9 · 7903af9
1 parent 1a1e166
commit 7903af9
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 25 deletions.
diff --git a/_includes/button.html b/_includes/button.html
@@ -0,0 +1,4 @@
+<a href="{{- include.link -}}" class="{{- include.classes }} btn btn-primary text-white d-inline-flex flex-row justify-content-start align-items-center p-sm-2 p-1 shadow-sm">
+  <i class="bi {{ include.icon }} mx-2"></i>
+  <span class="text-start mx-2">{{ include.text }}</span>
+</a>
diff --git a/community/conf.html b/community/conf.html
@@ -37,10 +37,7 @@ <h3 class="fw-semibold mb-2 m-0 p-0">{{ site.data.conf_host.conference }} Expres
       {{ site.data.conf_host.preamble }}
     </p>
     <p>
-      <a href="{{ site.data.conf_host.form }}" class="btn btn-primary text-white me-3 shadow-sm">
-        <i class="bi bi-person-raised-hand me-2"></i>
-        Complete the EOI form
-      </a>
+      {%- include button.html link=site.data.conf_host.form icon="bi-person-raised-hand" text="Complete the EOI form" -%}
     </p>
     <p>
       {{ site.data.conf_host.postamble }}

diff --git a/community/sc.html b/community/sc.html
@@ -75,10 +75,7 @@ <h6 class="mt-3 m-0">Length/term of office</h6>
         To be eligible to be nominated you must be a member of SIGCHI. Please submit nominations, for yourself or another, by {% include date.html date=site.data.sc.nominations_settings.deadline -%}, Anywhere on Earth (AoE).
       </p>
       <p>
-        <a href="{{ site.data.sc.nominations_settings.link }}" class="btn btn-primary text-white me-3 shadow-sm">
-          <i class="bi bi-person-raised-hand me-2"></i>
-          Complete the nomination form
-        </a>
+        {%- include button.html link=site.data.sc.nominations_settings.link icon="bi-person-raised-hand" text="Complete the nomination form" -%}
       </p>
       <p>
         If you would like any further details about the nominations or elections process, or any of the roles, email <a href="mailto:{{ site.data.sc.nominations_settings.contact.email }}">{{ site.data.sc.nominations_settings.contact.name }}</a>.
@@ -116,10 +113,8 @@ <h3 class="fw-semibold mb-2 m-0 p-0">Constitution</h3>
       The constitution for the ACM Conversational User Interfaces conference sets out the structure and organisational procedures that govern the conference and workshop series.
     </p>
     <p>
-      <a href="{{ site.data.const.file | relative_url }}" class="btn btn-primary text-white me-3 shadow-sm">
-        <i class="bi bi-file-earmark-arrow-down-fill me-2"></i>
-        Download the latest constitution
-      </a>
+      {%- assign link = site.data.const.file | relative_url -%}
+      {%- include button.html link=link icon="bi-file-earmark-arrow-down-fill" text="Download the constitution" classes="me-2" -%}
       <span class="text-secondary small d-xl-inline-block mt-xl-0 d-block mt-3">
         Last updated and approved: {% include date.html date=site.data.const.date -%}
       </span>

diff --git a/community/stats.html b/community/stats.html
@@ -79,10 +79,9 @@ <h3 class="fw-semibold mb-3 m-0 p-0">Registration<sup>*</sup> statistics</h3>
         {%- assign footnote_index = footnote_index | plus: 1 -%}
         </div>
     {%- endfor -%}
-    <a href="{{ "/community/assets/csv/statistics/registrations.csv" | relative_url }}" class="mt-3 btn btn-primary text-white me-3 shadow-sm"  title="Registration statistics as a CSV file">
-      <i class="bi bi-file-earmark-arrow-down-fill me-2"></i>
-      Download this table as a CSV
-    </a>
+
+    {%- assign link = "/community/assets/csv/statistics/registrations.csv" | relative_url  -%}
+    {%- include button.html link=link icon="bi-file-earmark-arrow-down-fill" text="Download this table as a CSV" classes="mt-3" -%}
   </article>
 
   <article id="programme-statistics" class="flex-grow-1 p-md-4 p-3">
@@ -143,11 +142,8 @@ <h3 class="fw-semibold mb-3 m-0 p-0">Programme statistics</h3>
       </p>
     </div>
 
-    <a href="{{ "/community/assets/csv/statistics/programme.csv" | relative_url }}" class="mt-3 btn btn-primary text-white me-3 shadow-sm"  title="Registration statistics as a CSV file">
-      <i class="bi bi-file-earmark-arrow-down-fill me-2"></i>
-      Download these tables as a CSV
-    </a>
-
+    {%- assign link = "/community/assets/csv/statistics/programme.csv" | relative_url  -%}
+    {%- include button.html link=link icon="bi-file-earmark-arrow-down-fill" text="Download these tables as a CSV" classes="mt-3" -%}
   </article>
 
   <article id="awards-statistics" class="flex-grow-1 p-md-4 p-3">
@@ -183,10 +179,8 @@ <h3 class="fw-semibold mb-3 m-0 p-0">Programme award statistics</h3>
       </tbody>
     </table>
 
-    <a href="{{ "/community/assets/csv/statistics/awards.csv" | relative_url }}" class="mt-3 btn btn-primary text-white me-3 shadow-sm"  title="Registration statistics as a CSV file">
-      <i class="bi bi-file-earmark-arrow-down-fill me-2"></i>
-      Download this table as a CSV
-    </a>
+    {%- assign link = "/community/assets/csv/statistics/awards.csv" | relative_url  -%}
+    {%- include button.html link=link icon="bi-file-earmark-arrow-down-fill" text="Download this table as a CSV" classes="mt-3" -%}
   </article>
 </div>
 {%- include sidebar.html -%}