TFC/tfcconnection-zola
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better styling

Browse source
This commit is contained in:
Chris Cochrun 2025-05-21 14:42:24 -05:00
parent dbb135a12e
commit c32cccf3c3
17 changed files with 190 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
templates/shortcodes/button.html
View file

@ -1,8 +1,8 @@
<a
class="!rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
class="rounded-lg outline-2 text-white bg-blue-600 outline-blue-600 px-4 py-2 text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700"
{% if href %}href="{{ href }}"{% endif %}
{% if target %}target="{{ target }}"{% endif %}
role="button"
>
{{ body }}
<i>{{ body }}</i>
</a>

93
templates/shortcodes/contact_form.html Normal file
View file

@ -0,0 +1,93 @@
{% set formClasses = "bg-gray-500 text-gray-50 placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-600 checked:text-gray-500" -%}
{% set requiredField = "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" -%}
<script>
function submitForm(e) {
e.preventDefault();
const form = document.getElementById('form');
const data = new FormData(form);
if (data.get("email") == "") {
document.getElementById('warning-email').style.visibility = 'visible';
document.getElementById('warning-email').style.height = '';
document.getElementById('warning-email').style.margin = '';
return false;
} else {
document.getElementById('warning-email').style.visibility = 'hidden';
document.getElementById('warning-email').style.height = '0';
document.getElementById('warning-email').style.margin = '0';
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
window.location.href = '/thankyou/';
}
};
xhr.open("POST", "/contact");
xhr.send(data);
console.log(data);
}
function process() {
/* document.getElementById('mt-form').hidden = false */
document.getElementById('warning-email').style.visibility = 'hidden';
document.getElementById('warning-email').style.height = '0';
document.getElementById('warning-email').style.margin = '0';
}
document.addEventListener('DOMContentLoaded', process);
</script>
<div id="mt-form" class="form text-lg w-full">
<form id='form'
hx-post="/api/contact-form"
hx-encoding="multipart/form-data"
autocomplete="on"
method="post"
target="_parent"
class="w-full items-center flex flex-wrap">
<h3 class="basis-full">Contact Form</h3>
<div class="basis-full flex flex-wrap my-4">
<label for="firstname" class="basis-full">What is your name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
<br/>
<input type="text" id="name" name="name"
placeholder="Name" class="flex-1 form-input {{ formClasses }}">
</div>
<label for="email" class="basis-full">Your Email <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
<input type="email" id="email" name="email"
pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
placeholder="bob@frank.xyz"
class="basis-full form-input {{ formClasses }}">
<label for="staff" class="basis-full mt-4">Would you like to email a specific staff member? <span class='inline-block text-[#f39] text-sm align-sub'>leave on "any" if you don't need someone specific.</span></label>
<select id="staff" name="staff" class="mb-4 flex-auto form-select {{ formClasses }}">
<option value="tfc@tfcconnection.org">Any</option>
<option value="ethan@tfcconnection.org">Ethan Rose</option>
<option value="lavonne@tfcconnection.org">Lavonne Ponstein</option>
<option value="brian@tfcconnection.org">Brian Fischer</option>
<option value="janice@tfcconnection.org">Janice Lundquist</option>
<option value="april@tfcconnection.org">April Teves</option>
<option value="chris@tfcconnection.org">Chris Cochrun</option>
<option value="rob@tfcconnection.org">Rob Lewis</option>
<option value="lewis@tfcconnection.org">Lewis Smith</option>
<option value="billy@tfcconnection.org">Billy Cayou</option>
<option value="dani@tfcconnection.org">Dani Rouse</option>
</select>
<label for="message" class="basis-full mt-4">Message <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
<textarea type="message" id="message" name="message"
class="basis-full form-input h-48 {{ formClasses }}"></textarea>
<div class="basis-full w-full mt-8">
<button type="submit" class="float-right rounded-lg outline-2 text-white bg-blue-600 outline-blue-600 px-4 py-2 text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700 cursor-pointer"><i>Submit</i></button>
</div>
<div id="warning-email" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
<span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
Make sure you have included an email so we can contact you.
</span>
</div>
</form>
</div>

2
templates/shortcodes/floating_button.html
View file

@ -6,7 +6,7 @@
}
</script>
<button class="!rounded-lg bg-blue-600 px-4 py-2 !text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700 fixed bottom-4 right-8" type="button" name="floatbutt" onclick="floatButton()" id="floatbutt">
<button class="rounded-lg bg-blue-600 px-4 py-2 !text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700 fixed bottom-4 right-8" type="button" name="floatbutt" onclick="floatButton()" id="floatbutt">
<i>{{ text }}</i>
<span class="relative inline-block align-sub size-5 fill-current flex-auto">
{{ load_data(path="icons/" ~ icon ~ ".svg") | safe }}

2
templates/shortcodes/pt.html
View file

@ -1,4 +1,4 @@
<div style="display: flex;" class="{% if width %} {{ width }} {% else %} w-full {% endif %}">
<iframe class="pt-vid flex-auto {% if aspect %} {{ aspect }} {% else %} aspect-video {% endif %} {% if width %} {{ width }} {% else %} w-24 {% endif %}" sandbox="allow-same-origin allow-scripts allow-popups" src="{{ src }}?warningTitle=0" frameborder="0" allowfullscreen></iframe>
<iframe class="pt-vid flex-auto rounded-lg {% if aspect %} {{ aspect }} {% else %} aspect-video {% endif %} {% if width %} {{ width }} {% else %} w-24 {% endif %}" sandbox="allow-same-origin allow-scripts allow-popups" src="{{ src }}?warningTitle=0" frameborder="0" allowfullscreen></iframe>
</div>