Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#8709] Plan Detail: fix github issues #5956

Merged
merged 1 commit into from
Jan 21, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 31 additions & 29 deletions meinberlin/apps/plans/templates/meinberlin_plans/plan_detail.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,41 +42,42 @@

{% block content %}
<div id="layout-grid__area--maincontent">
{% if object.image %}
<section class="herounit-image-with-aside fullwidth">
<div class="mainbar">
<div class="mainbar__left">
<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>
</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">
{% 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>
{% 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>
</section>
{% endif %}
</div>
</section>
<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 @@ -159,7 +160,7 @@ <h1 class="title herounit-image-with-aside__title">{{ object.title }}</h1>
{% 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>
<div class="item-detail__contact">
<h2 class="item-detail__contact-title">{% translate 'Contact for questions' %}</h2>
<address>
{% if object.contact_name %}
Expand Down Expand Up @@ -190,7 +191,7 @@ <h2 class="item-detail__contact-title">{% translate 'Contact for questions' %}</
{% endif %}

{% if object.organisation.address or object.organisation.url %}
<div>
<div class="item-detail__contact">
<h2 class="item-detail__contact-title">{% translate 'Responsible body' %}</h2>
<address>
{% if object.organisation.address %}
Expand Down Expand Up @@ -220,6 +221,7 @@ <h3 class="item-detail__project-title" id="participation-plans">
<div
data-projects-list
data-projects="{{ published_projects }}"
data-topic-choices="{{ topic_choices }}"
></div>
</div>
</section>
Expand Down
12 changes: 12 additions & 0 deletions meinberlin/apps/plans/views.py
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,24 @@ class PlanDetailView(rules_mixins.PermissionRequiredMixin, CanonicalURLDetailVie
template_name = "meinberlin_plans/plan_detail.html"
permission_required = "meinberlin_plans.view_plan"

def get_topics(self):
topics = [
{
"id": topic.id,
"code": topic.code,
"name": str(TopicEnum(topic.code).label),
}
for topic in Topic.objects.all()
]
return json.dumps(topics)

def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
serializer = PlanSerializer(self.object)
context["published_projects"] = json.dumps(
serializer.data.get("published_projects")
)
context["topic_choices"] = self.get_topics()
context["polygon"] = settings.BERLIN_POLYGON
return context

Expand Down
21 changes: 18 additions & 3 deletions meinberlin/assets/scss/components_user_facing/_item_detail.scss
Original file line number Diff line number Diff line change
Expand Up @@ -167,12 +167,27 @@ dl.item-detail__factsheet-table dd {
}

.item-detail__map {
margin-bottom: 3rem;
margin-bottom: 3rem;
}

.item-detail__map .leaflet-map-pane,
.item-detail__map .leaflet-control-container .leaflet-top {
z-index: 0;
}

.item-detail__contacts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@media screen and (min-width: $breakpoint-palm) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

.item-detail__contact {
margin-bottom: 2.75rem;
}

.item-detail__contact:last-child {
margin-bottom: 0;
}

.item-detail__contact-title {
Expand Down
5 changes: 3 additions & 2 deletions meinberlin/react/plans/react_projects_list.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ import { createRoot } from 'react-dom/client'
import ProjectsList from '../projects/ProjectsList'

function init () {
const projectsList = document.querySelectorAll('[data-projects-list')
const projectsList = document.querySelectorAll('[data-projects-list]')
projectsList.forEach(el => {
const root = createRoot(el)
const projects = JSON.parse(el.getAttribute('data-projects'))
const topicChoices = JSON.parse(el.getAttribute('data-topic-choices'))
root.render(
<React.StrictMode>
<ProjectsList projects={projects} />
<ProjectsList projects={projects} topicChoices={topicChoices} />
</React.StrictMode>)
})
}
Expand Down