Skip to content

Commit

Permalink
add new hero component and information page
Browse files Browse the repository at this point in the history
  • Loading branch information
@hom3mad3
hom3mad3 committed Feb 6, 2025
1 parent b8c8488 commit faa8b46
Show file tree
Hide file tree
Showing 16 changed files with 325 additions and 294 deletions.
10 changes: 10 additions & 0 deletions changelog/_8766.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
### Added
- create project information page
- hero component
- contact snippets

### Removed
- image with aside (replaced with hero)

### Changed
- plan and project detail pages
48 changes: 48 additions & 0 deletions meinberlin/apps/contrib/templates/meinberlin_contrib/components/hero.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
{% load i18n thumbnail %}

<article class="hero block {{ extra_class|default:'' }}">
<div class="hero__container">
<div class="hero__content">
<h1 class="hero__title">
{% if show_buttons %}
<a href="{{ hero_link }}">{{ content.name }}</a>
{% else %}
{{ content.name }}
{% endif %}
</h1>
<div class="hero__description">
<p>{{ content.description|safe }}</p>
{% if content.image_copyright %}
<p class="hero__image-copyright">{% translate "Image" %}: {{ content.image_copyright }}</p>
{% endif %}
</div>

{% if show_buttons %}
<div class="hero__buttons">
<a href="{{ hero_link }}" class="button button--light">
{% translate "More information" %}
</a>
{% load react_follows %}
{% react_follows project %}
</div>
{% endif %}
</div>

<div class="hero__media">
<figure class="hero__figure">
{% if show_buttons %}
<a href="{{ hero_link }}">
{% endif %}
<img
class="hero__image"
src="{{ content.image|thumbnail_url:'heroimage' }}"
alt="{{ content.image_alt_text|default:'' }}"
loading="lazy"
/>
</figure>
{% if show_buttons %}
</a>
{% endif %}
</div>
</div>
</article>
99 changes: 10 additions & 89 deletions meinberlin/apps/plans/templates/meinberlin_plans/plan_detail.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% extends "base.html" %}
{% load i18n static rules wagtailcore_tags maps_tags thumbnail ckeditor_tags contrib_tags %}
{% load i18n static rules wagtailcore_tags maps_tags thumbnail ckeditor_tags contrib_tags plan_tags %}

{% block title %}{{ object.title }} – {{ block.super }}{% endblock title %}

Expand Down Expand Up @@ -42,42 +42,9 @@

{% block content %}
<div id="layout-grid__area--maincontent">
<section class="herounit-image-with-aside fullwidth">
<div class="mainbar">
<div class="mainbar__left">
{% if object.image %}
<div class="image">
<div class="image__image">
<img src="{{ object.image | thumbnail_url:"heroimage" }}" alt="{% if object.image_alt_text %}{{ object.image_alt_text }}{% else %}{% translate "Here you can find a decorative picture." %}{% endif %}" width="100%" height="auto" loading="lazy"/>
</div>
</div>
{% endif %}
</div>
<div class="mainbar__right">
<div class="panel--heavy panel--remove-inner-panels flex--stretch-inner __py-0__">
<ul class="pill__list pill__list--inline herounit-image-with-aside__pills">
<li class="pill pill--label">{% translate "Plan" %}</li>
{% for topic in object.topic_names %}
<li class="pill pill--topic">{{ topic }}</li>
{% endfor %}
</ul>

<h1 class="title herounit-image-with-aside__title">{{ object.title }}</h1>
<div class="herounit-image-with-aside__description">
<p>{{ object.point_label }}</p>

<p class="herounit-image-with-aside__copyright">
{% if object.image_copyright %}
{% translate "Image" %}: {{ object.image_copyright }}
{% else %}
{% translate "Image: copyright missing" %}
{% endif %}
</p>
</div>
</div>
</div>
</div>
</section>
{% modify_hero_content object as modified_content %}
{% include 'meinberlin_contrib/components/hero.html' with content=modified_content show_buttons=False extra_class="hero--plan" %}

<article class="item-detail">
{% has_perm 'meinberlin_plans.change_plan' request.user object as user_may_change %}
{% if user_may_change %}
Expand Down Expand Up @@ -157,58 +124,12 @@ <h1 class="title herounit-image-with-aside__title">{{ object.title }}</h1>
</div>
{% endif %}

{% if object.contact_name or object.contact_address_text or object.contact_email or object.contact_phone or object.contact_url or object.organisation.address or object.organisation.url %}
<div class="item-detail__contacts">
{% if object.contact_name or object.contact_address_text or object.contact_email or object.contact_phone or object.contact_url %}
<div class="item-detail__contact">
<h2 class="item-detail__contact-title">{% translate 'Contact for questions' %}</h2>
<address>
{% if object.contact_name %}
<p>{{ object.contact_name }}</p>
{% endif %}
{% if object.contact_address_text %}
<p>{{ object.contact_address_text|linebreaks }}</p>
{% endif %}
{% if object.contact_phone %}
<p><strong>{% translate 'Telephone' %}: </strong>{{ object.contact_phone }}</p>
{% endif %}
{% if object.contact_email %}
<p>
<a href="mailto:{{ object.contact_email }}">
{% translate 'Email' %}
</a>
</p>
{% endif %}
{% if object.contact_url %}
<p>
<a target="_blank" href="{{ object.contact_url }}">
{% translate 'Website' %}
</a>
</p>
{% endif %}
</address>
</div>
{% endif %}

{% if object.organisation.address or object.organisation.url %}
<div class="item-detail__contact">
<h2 class="item-detail__contact-title">{% translate 'Responsible body' %}</h2>
<address>
{% if object.organisation.address %}
<p>{{ object.organisation.name }}</p>
<p>{{ object.organisation.address|linebreaks }}</p>
{% endif %}
{% if object.organisation.url %}
<p>
<a target="_blank" href="{{ object.organisation.url }}">
{% translate 'Website' %}
</a>
</p>
{% endif %}
</address>
</div>
{% endif %}
</div>
{% if object.has_contact_details or object.organisation %}
<section class="flexgrid grid--2 mb-3" aria-labelledby="contact-title">
<h2>{% trans 'Contact Information' %}</h2>
{% include 'meinberlin_projects/includes/contact_person.html' with contact=object only %}
{% include 'meinberlin_projects/includes/contact_organisation.html' with organisation=object.organisation only %}
</section>
{% endif %}
</article>

Expand Down
18 changes: 18 additions & 0 deletions meinberlin/apps/plans/templatetags/plan_tags.py
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
from django import template

register = template.Library()


@register.simple_tag
def modify_hero_content(content):
"""Creates a modified copy of the content object with point_label as description"""
# Create a copy of the object to avoid modifying the original
from copy import copy

modified_content = copy(content)
# Override the description with point_label
modified_content.description = content.point_label
# Replace title with the name field dynamically
modified_content.name = modified_content.title

return modified_content
20 changes: 20 additions & 0 deletions meinberlin/apps/projects/templates/meinberlin_projects/includes/contact_organisation.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{% load i18n %}

{% if organisation %}
<div class="modul-contact">
<h3 id="responsible-body">{% trans 'Responsible body' %}</h3>
<address aria-labelledby="responsible-body" class="mt-2">
<p>{{ organisation.name }}</p>

{% if organisation.address %}
<p>{{ organisation.address|linebreaksbr }}</p>
{% endif %}

{% if organisation.url %}
<p>{% trans "Website" %}:
<a href="{{ organisation.url }}" target="_blank" rel="noopener noreferrer">{{ organisation.url }}</a>
</p>
{% endif %}
</address>
</div>
{% endif %}
22 changes: 22 additions & 0 deletions meinberlin/apps/projects/templates/meinberlin_projects/includes/contact_person.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{% load i18n %}

{% if contact.has_contact_details %}
<div class="modul-contact">
<h3 id="contact-questions">{% trans "Contact for questions" %}</h3>
<address aria-labelledby="contact-questions" class="mt-2">
<p>{{ contact.contact_name }}</p>

{% if contact.contact_email %}
<p>{% trans "Email" %}:
<a href="mailto:{{ contact.contact_email }}" aria-label="{% trans 'Email' %} {{ contact.contact_name }}">{{ contact.contact_email }}</a>
</p>
{% endif %}

{% if contact.contact_phone %}
<p>{% trans "Phone" %}:
<a href="tel:{{ contact.contact_phone }}" aria-label="{% trans 'Call' %} {{ contact.contact_name }}">{{ contact.contact_phone }}</a>
</p>
{% endif %}
</address>
</div>
{% endif %}
Loading

0 comments on commit faa8b46

Please sign in to comment.