"Enhance partner event styling and adjust newsletter text

Updated the partner event card with a new ribbon design, left border highlight, and improved layout for better visibility. Simplified newsletter subscription text for conciseness. These changes enhance visual clarity and streamline user communication."
main
Arne Schauf 2 weeks ago
parent b8c745d675
commit b447adb389
  1. 43
      core/static/css/theme/events.css
  2. 3
      core/templates/core/event_index_page.html
  3. 2
      core/templates/core/tags/newsletter_minimal_form.html

@ -40,18 +40,51 @@
/* Partner event ribbon */ /* Partner event ribbon */
.partner-event-ribbon { .partner-event-ribbon {
position: absolute; position: absolute;
top: 10px; top: 30px;
right: 10px; right: -20px;
background: linear-gradient(135deg, #ff9800, #ff5722); background: linear-gradient(135deg, rgba(132, 0, 75, 0.6), #84004b);
color: white; color: white;
padding: 0.3rem 1rem; padding: 0.3rem 0;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 10; z-index: 10;
border-radius: 3px; transform: rotate(45deg);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
width: 160px;
text-align: center;
overflow: hidden;
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
/* Partner event card left border */
.timeline-panel.partner-event-card {
border: none;
border-left: 4px solid #84004b;
transition: all 0.3s ease;
}
.partner-event-ribbon::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 25px;
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0, 0, 0, 0.15));
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.partner-event-ribbon::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.15);
clip-path: polygon(0 0, 100% 0, 0 100%);
} }
.event-item:hover { .event-item:hover {

@ -19,7 +19,7 @@
<span class="timeline-badge-day">{{ event.start_date|date:"d" }}</span> <span class="timeline-badge-day">{{ event.start_date|date:"d" }}</span>
<span class="timeline-badge-month">{{ event.start_date|date:"b" }}</span> <span class="timeline-badge-month">{{ event.start_date|date:"b" }}</span>
</div> </div>
<div class="timeline-panel card border-0 shadow-sm"> <div class="timeline-panel card shadow-sm{% if event.is_partner_event %} partner-event-card{% else %} border-0{% endif %}">
{% if event.is_partner_event %} {% if event.is_partner_event %}
<div class="partner-event-ribbon">Partner Event</div> <div class="partner-event-ribbon">Partner Event</div>
{% endif %} {% endif %}
@ -29,7 +29,6 @@
<span class="fs-5">{{ event.start_date|date:"SHORT_DATE_FORMAT" }}{% if event.end_date %} - {{ event.end_date|date:"SHORT_DATE_FORMAT" }}{% endif %}</span> <span class="fs-5">{{ event.start_date|date:"SHORT_DATE_FORMAT" }}{% if event.end_date %} - {{ event.end_date|date:"SHORT_DATE_FORMAT" }}{% endif %}</span>
</div> </div>
<div> <div>
<span class="text-muted">{{ event.start_date|date:"F Y" }}</span>
</div> </div>
</div> </div>
</div> </div>

@ -1,6 +1,6 @@
<div id="mc_embed_signup" class="newsletter-cta p-3 mb-4 rounded"> <div id="mc_embed_signup" class="newsletter-cta p-3 mb-4 rounded">
<p class="newsletter-heading mb-2">Bleiben Sie informiert!</p> <p class="newsletter-heading mb-2">Bleiben Sie informiert!</p>
<p class="newsletter-text mb-3">Erhalten Sie Updates zu unseren Veranstaltungen und Angeboten.</p> <p class="newsletter-text mb-3">Erhalten Sie Updates zu unseren Veranstaltungen.</p>
<a href="https://gmbh.us8.list-manage.com/subscribe?u=a2db855ea544f9ced14052793&id=42a1a3ba11" <a href="https://gmbh.us8.list-manage.com/subscribe?u=a2db855ea544f9ced14052793&id=42a1a3ba11"
target="_blank" class="btn btn-primary w-100 d-flex align-items-center justify-content-center"> target="_blank" class="btn btn-primary w-100 d-flex align-items-center justify-content-center">
<i class="bi bi-envelope-fill me-2"></i> <i class="bi bi-envelope-fill me-2"></i>

Loading…
Cancel
Save