arne
/
feo-homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance contact page design and update development settings.

Browse Source 
Implemented new responsive and visually appealing styles for the contact page, including animations and improved layout organization. Additionally, updated `ALLOWED_HOSTS` in the development settings to allow all hosts for easier testing in development environments.
main
Arne Schauf 2 weeks ago
parent 8295e9fb3e
commit 36970abd77
2 changed files with 180 additions and 62 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 241
      core/templates/core/contact_form_page.html
  2. 1
      feo_homepage/settings/dev.py

241
core/templates/core/contact_form_page.html
Unescape View File

@ -1,77 +1,194 @@
{% extends "core/base.html" %} {% extends "core/base.html" %}
{% load core_tags menu_tags static wagtailcore_tags wagtailimages_tags crispy_forms_tags %} {% load core_tags menu_tags static wagtailcore_tags wagtailimages_tags crispy_forms_tags %}
{% block content %} {% block extra_css %}
<div class="row"> <style>
<!-- Contact Form (Desktop) --> /* Contact page specific styles */
<div class="col-md-6 d-none d-md-block"> .contact-section {
<div class="border-bottom pb-2 mb-3"> padding: 2rem 0;
<h2>{{ self.form_title }}</h2> }
</div>
<form action="{% pageurl self %}" method="POST" class="mb-4">
{% csrf_token %}
{{ form|crispy }}
<div class="text-end">
<button type="submit" class="btn btn-primary">Senden</button>
</div>
</form>
</div>
<!-- Contact Person --> .section-title {
<div class="col-md-6 col-12"> position: relative;
<div class="border-bottom pb-2 mb-3"> margin-bottom: 2rem;
<h2>Ihr Ansprechpartner</h2> }
</div>
<div class="row"> .section-title:after {
{% if self.person_img %} content: '';
<!-- Desktop Image --> position: absolute;
<div class="col-md-6 d-none d-md-block text-center"> bottom: -10px;
<div class="card mb-4"> left: 0;
{% image self.person_img fill-240x320 class="img-fluid card-img-top" %} width: 60px;
<div class="card-body"> height: 3px;
<h4 class="card-title">{{ self.person_name }}</h4> background-color: var(--bs-primary);
<p class="card-text">{{ self.person_position }}</p> border-radius: 3px;
}
.contact-card {
border-radius: 12px;
overflow: hidden;
box-shadow: var(--box-shadow-medium);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
border: none;
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.contact-info-list li {
padding: 0.75rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease;
}
.contact-info-list li:last-child {
border-bottom: none;
}
.contact-info-list li:hover {
transform: translateX(5px);
}
.contact-info-list i {
color: var(--bs-primary);
font-size: 1.2rem;
width: 30px;
text-align: center;
}
.person-img-container {
overflow: hidden;
border-radius: 12px;
box-shadow: var(--box-shadow-light);
width: 100%;
height: 300px;
}
.person-img-container img {
transition: transform 0.5s ease;
width: 100%;
height: 100%;
object-fit: cover;
}
.person-img-container:hover img {
transform: scale(1.05);
}
.contact-form-card {
padding: 2rem;
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
{% endblock %}
{% block content %}
<div class="contact-section">
<div class="row">
<!-- Contact Form (Desktop) -->
<div class="col-md-6 d-none d-md-block animate-fade-in-up" style="animation-delay: 0.1s;">
<h2 class="section-title">{{ self.form_title }}</h2>
<div class="card contact-card contact-form-card mb-4">
<form action="{% pageurl self %}" method="POST">
{% csrf_token %}
{{ form|crispy }}
<div class="text-end mt-4">
<button type="submit" class="btn btn-primary">
<i class="bi bi-send me-2"></i>Senden
</button>
</div> </div>
</div> </form>
</div> </div>
<!-- Mobile Image --> </div>
<div class="col-sm-6 col-12 d-md-none">
<div class="card mb-4"> <!-- Contact Person -->
{% image self.person_img fill-240x320 class="img-fluid card-img-top" %} <div class="col-md-6 col-12 animate-fade-in-up" style="animation-delay: 0.2s;">
<div class="card-body"> <h2 class="section-title">Ihr Ansprechpartner</h2>
<h4 class="card-title">{{ self.person_name }}</h4> <div class="card contact-card mb-4">
<p class="card-text">{{ self.person_position }}</p> <div class="card-body p-4">
<div class="row">
{% if self.person_img %}
<!-- Person Image -->
<div class="col-md-5 col-sm-6 mb-4 mb-md-0">
<div class="person-img-container">
{% image self.person_img fill-300x400 class="img-fluid rounded" %}
</div>
<div class="text-center mt-3">
<h4 class="mb-1">{{ self.person_name }}</h4>
<p class="text-muted">{{ self.person_position }}</p>
</div>
</div>
{% endif %}
<!-- Contact Information -->
{% if self.address or self.mail_address or self.phone or self.web_address %}
<div class="col-md-7 col-sm-6">
<h5 class="mb-3">Kontaktdaten</h5>
<ul class="list-unstyled contact-info-list">
{% if self.address %}
<li><i class="bi bi-geo-alt"></i> {{ self.address }}</li>
{% endif %}
{% if self.mail_address %}
<li>
<a href="mailto:{{ self.mail_address }}" class="text-decoration-none text-dark">
<i class="bi bi-envelope"></i> {{ self.mail_address }}
</a>
</li>
{% endif %}
{% if self.phone %}
<li>
<a href="tel:{{ self.phone }}" class="text-decoration-none text-dark">
<i class="bi bi-telephone"></i> {{ self.phone }}
</a>
</li>
{% endif %}
{% if self.web_address %}
<li>
<a href="{{ self.web_address }}" class="text-decoration-none text-dark">
<i class="bi bi-globe"></i> {{ self.web_address }}
</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}
</div> </div>
</div> </div>
</div> </div>
{% endif %}
<!-- Contact Information -->
{% if self.address or self.mail_address or self.phone or self.web_address %}
<div class="col-sm-6 col-12">
<ul class="list-unstyled mb-4">
{% if self.address %}<li class="mb-2"><i class="bi bi-house me-2"></i>{{ self.address }}</li>{% endif %}
{% if self.mail_address %}<li class="mb-2"><a href="mailto:{{ self.mail_address }}" class="text-decoration-none"><i class="bi bi-envelope me-2"></i>{{ self.mail_address }}</a></li>{% endif %}
{% if self.phone %}<li class="mb-2"><a href="tel:{{ self.phone }}" class="text-decoration-none"><i class="bi bi-telephone me-2"></i>{{ self.phone }}</a></li>{% endif %}
{% if self.web_address %}<li class="mb-2"><a href="{{ self.web_address }}" class="text-decoration-none"><i class="bi bi-globe me-2"></i>{{ self.web_address }}</a></li>{% endif %}
</ul>
</div>
{% endif %}
</div> </div>
</div>
<!-- Contact Form (Mobile) --> <!-- Contact Form (Mobile) -->
<div class="col-12 d-md-none"> <div class="col-12 d-md-none animate-fade-in-up" style="animation-delay: 0.3s;">
<div class="border-bottom pb-2 mb-3"> <h2 class="section-title">{{ self.form_title }}</h2>
<h2>{{ self.form_title }}</h2> <div class="card contact-card contact-form-card mb-4">
</div> <form action="{% pageurl self %}" method="POST">
<form action="{% pageurl self %}" method="POST" class="mb-4"> {% csrf_token %}
{% csrf_token %} {{ form|crispy }}
{{ form|crispy }} <div class="text-end mt-4">
<div class="text-end"> <button type="submit" class="btn btn-primary">
<button type="submit" class="btn btn-primary">Senden</button> <i class="bi bi-send me-2"></i>Senden
</button>
</div>
</form>
</div> </div>
</form> </div>
</div> </div>
</div> </div>
{% endblock content %} {% endblock content %}

1
feo_homepage/settings/dev.py
Unescape View File

@ -5,6 +5,7 @@ DEBUG = True
TEMPLATE_DEBUG = True TEMPLATE_DEBUG = True
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
ALLOWED_HOSTS = ['*']
try: try:

Write Preview
Loading…
Cancel
Save